JavaScript中如何通过值获取选中单选按钮？及相关报错求助

问题描述 #

我在学习JavaScript时制作密码生成器，遇到两个问题：

1. 代码报错：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
2. 想知道能不能通过值获取选中的单选按钮，而非必须用getElementById

相关代码如下：

HTML代码 #

<div class="container">
  <p>Please select the type of Password you want to generate:</p>
  <form id="new-form">
    <input type="radio" id="wp" name="radio" class="redio" value="0" />
    <label for="wp">Weak Password</label><br />
    <input type="radio" id="sp" name="radio" class="redio" value="1" />
    <label for="sp">Strong Password</label><br />
    <input type="radio" id="ssp" name="radio" class="redio" value="2" />
    <label for="ssp">Super Strong Password</label>
    <br />
    <input type="submit" id="btn" value="Generate Password" />
  </form>
  <div id="display" type="text" readonly="true"></div>
</div>

JavaScript代码 #

class password{
    constructor(){
        this.ucl="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        this.lcl="abcdefghijklmnopqrstuvwxyz"
        this.num="1234567890"
        this.spc = "!@#$%^&*()"
    }
    weakpassword(){
        let arr = [this.ucl, this.lcl]
        let pass = ""
        for(let i=0;i<8;i++){
            let random1= Math.floor(Math.random()*arr.length)
            let random2= Math.floor(Math.random()*arr[random1].length)
            pass= pass + arr[random1][random2]
        }
        return pass
    }
    strongpassword(){
        let arr = [this.ucl, this.lcl, this.num]
        let pass = ""
        for(let i=0;i<14;i++){
            let random1= Math.floor(Math.random()*arr.length)
            let random2= Math.floor(Math.random()*arr[random1].length)
            pass= pass + arr[random1][random2]
        }
        return pass
    }
    superstrongpassword(){
        let arr = [this.ucl, this.lcl, this.num, this.spc]
        let pass = ""
        for(let i=0;i<20;i++){
            let random1= Math.floor(Math.random()*arr.length)
            let random2= Math.floor(Math.random()*arr[random1].length)
            pass= pass + arr[random1][random2]
        }
        return pass
    }
}

let display = document.getElementById("display");
let btn = document.getElementById("btn");
let radio = document.getElementsByClassName("redio");

let a = new password()

btn.addEventListener("click",()=>{
    let b;
    // if(document.getElementById('wp').checked){
    //     b= a.weakpassword()
    // }
    if(radio[0].checked){
        b= a.weakpassword()
    }
    else if(radio[1].checked){
        b= a.strongpassword()
    }
    else if(radio[2].checked){
        b= a.superstrongpassword()
    }
    display.value= b
})

错误解决方法 #

这个错误是因为JavaScript代码在DOM元素加载完成前就执行了，导致btn被获取为null。同时代码还有两个小问题：display是div元素，没有value属性；表单提交按钮会默认刷新页面。以下是完整修复方案：

1. 确保DOM加载完成后执行代码
   有两种实现方式：
   • 把JS代码放到HTML的</body>标签之前，让浏览器先加载完所有DOM元素再执行JS。
   • 用DOMContentLoaded事件包裹代码：

     document.addEventListener('DOMContentLoaded', function() {
         let display = document.getElementById("display");
         let btn = document.getElementById("btn");
         let radio = document.getElementsByClassName("redio");
     
         let a = new password()
     
         btn.addEventListener("click",(e)=>{
             e.preventDefault(); // 阻止表单默认提交，避免页面刷新
             let b;
             if(radio[0].checked){
                 b= a.weakpassword()
             }
             else if(radio[1].checked){
                 b= a.strongpassword()
             }
             else if(radio[2].checked){
                 b= a.superstrongpassword()
             }
             display.textContent= b; // div用textContent设置内容
         })
     });
     

通过值获取选中单选按钮的实现方式 #

完全可以通过值获取选中的单选按钮，不用依赖ID，推荐两种简洁方法：

方法1：用querySelector直接选中 #

利用CSS的:checked伪类，直接定位当前激活的单选按钮：

const selectedRadio = document.querySelector('input[name="radio"]:checked');
if(selectedRadio) {
    const selectedValue = selectedRadio.value;
    // 根据值执行对应逻辑
}

方法2：遍历单选按钮集合 #

通过getElementsByName获取同组单选按钮，遍历找到选中项：

const radioButtons = document.getElementsByName('radio');
let selectedValue;
for(let radio of radioButtons) {
    if(radio.checked) {
        selectedValue = radio.value;
        break;
    }
}

整合到你的密码生成逻辑中 #

用值判断的方式可以让代码更简洁、易维护，修改后的点击事件代码：

btn.addEventListener("click",(e)=>{
    e.preventDefault();
    let b;
    const selectedRadio = document.querySelector('input[name="radio"]:checked');
    if(!selectedRadio) return; // 未选中任何选项时直接返回

    switch(selectedRadio.value) {
        case '0':
            b = a.weakpassword();
            break;
        case '1':
            b = a.strongpassword();
            break;
        case '2':
            b = a.superstrongpassword();
            break;
    }
    display.textContent = b;
})

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