为何用JavaScript获取HTML元素值返回undefined？求指导

原始HTML代码 #

<div id="result-box" class="col-5">
    <h3 class="result" id="name" >Name: --- </h3>
    <h3 class="result" id="age">Age: ---</h3>
    <h3 class="result" id="class">Class: --- </h3>
    <h3 class="result" id="skill">Skill:--- </h3>
    <h3 class="result" id="gen">Gender: --- </h3>
    <h3 class="result" id="perform">Perfomance: --- </h3>
</div>

原始JavaScript代码 #

let name = document.getElementById('name').value;
let age = document.getElementById('age').value;
let class = document.getElementById('class').value;
let skil = document.getElementById('skill').value;
let gen = document.getElementById('gen').value;
let perform = document.getElementById('perform').value;

let name = document.getElementById('name').value
console.log(name)

JavaScript代码中的错误 #

• 重复声明变量：同一作用域下用let重复声明了name变量，违反JS语法规则。
• 变量名拼写错误：skil应为skill，和HTML元素的id不匹配，会导致无法获取目标元素。
• 使用关键字作为变量名：class是JavaScript的保留关键字，不能用来命名变量，需改为如className这类合法名称。
• 错误获取元素内容：<h3>是普通文本元素，并非输入类表单元素，没有value属性，调用.value会返回undefined。

控制台输出undefined的核心原因 #

你试图通过.value获取<h3>元素的内容，但只有输入框（如<input>、<textarea>）这类表单元素才有value属性，普通文本元素的内容需要通过textContent或innerHTML来获取，这是导致输出undefined的直接原因。

修正后的代码示例 #

// 修正变量名、避免关键字、使用正确的内容获取方式
let userName = document.getElementById('name').textContent;
let userAge = document.getElementById('age').textContent;
let className = document.getElementById('class').textContent;
let skill = document.getElementById('skill').textContent;
let gender = document.getElementById('gen').textContent;
let performance = document.getElementById('perform').textContent;

console.log(userName);

内容的提问来源于stack exchange，提问作者Anonymous