使用JS从HTML输入取值并应用OOP创建字符对象时遇TypeError错误求助

错误原因分析 #

• DOM加载时机问题：JS代码在页面DOM元素未完全加载时就执行了document.getElementById，此时获取到的元素为null，访问null.value直接抛出Cannot read properties of null (reading 'value')错误。
• API拼写错误：document.getElementByName是错误写法，正确应为document.getElementsByName（注意复数Elements）。
• 循环初始化错误：for (i == 0; ...)是判断语句，需改为for (let i = 0; ...)来初始化循环变量。
• 事件绑定逻辑错误：按钮的onclick='char1.identify()'在页面加载时就绑定，但char1是页面加载时创建的，此时用户还未输入内容，点击按钮时逻辑完全失效。
• 单选框处理问题：单选框未设置value属性，原逻辑返回的是DOM元素而非字符类型标识，不符合需求。
• 变量未声明：所有变量未用let/const声明，会变成全局变量，易引发意外问题。

修正后的代码 #

HTML部分 #

<body>
    <label for="namebox">Character Name</label>
    <input type="text" name="" id="namebox">
    <label for="agebox">Age</label>
    <input type="text" name="" id="agebox">
    <label for="humanclass">Human</label>
    <label for="majinclass">Majin</label>

    <!-- 给单选框添加value属性，明确字符类型标识 -->
    <input type="radio" name="class1" id="humanclass" value="Human">
    <input type="radio" name="class1" id="majinclass" value="Majin">

    <!-- 修改点击事件，调用封装的创建函数 -->
    <input type="button" value="Create Character" id="creationbtn" onclick="createAndIdentifyCharacter()">
    <input type="reset" value="Cancel">

    <!-- 将JS放在body末尾，确保DOM加载完成后执行 -->
    <script src="javascript.js"></script>
</body>

JS部分 #

class Charcreation {
    constructor(name, age, charclass) {
        this.name = name;
        this.age = age;
        this.class = charclass;
    }

    identify() {
        // 用模板字符串优化拼接，提升可读性
        console.log(`My name is ${this.name} and I am a ${this.age} years old ${this.class}`);
    }
}

// 封装创建+识别字符的逻辑，按钮点击时触发
function createAndIdentifyCharacter() {
    // 点击按钮时才获取输入值，确保拿到用户最新输入
    const charname = document.getElementById("namebox").value;
    const charage = document.getElementById('agebox').value;
    
    // 获取所有name为class1的单选框集合
    const charselection = document.getElementsByName('class1');
    let charclass = '';

    // 遍历单选框，找到选中项的value
    for (let i = 0; i < charselection.length; i++) {
        if (charselection[i].checked) {
            charclass = charselection[i].value;
            break; // 找到后退出循环，提升效率
        }
    }

    // 创建字符实例并调用识别方法
    const char1 = new Charcreation(charname, charage, charclass);
    char1.identify();
}

关键修改说明 #

1. DOM加载时机：将<script>标签放到<body>末尾，确保所有DOM元素加载完成后再执行JS。
2. 事件逻辑调整：把创建实例的逻辑封装到函数中，按钮点击时才执行，确保获取用户输入的最新值。
3. API修正：修正getElementsByName的拼写错误，正确处理单选框集合。
4. 循环修正：用let i = 0初始化循环变量，避免全局变量污染。
5. 单选框优化：添加value属性，获取选中项的标识作为字符类型。
6. 变量规范：用const/let声明变量，符合现代JS编码规范。
7. 字符串优化：使用模板字符串替代传统拼接，代码更简洁易读。

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