无法读取 null 的属性 'checked'

Question

正在做一个项目，但我不明白为什么我会收到：

overlay.js:71 Uncaught TypeError: Cannot read property 'checked' of null at submitClick (overlay.js:71) at HTMLButtonElement.onclick (index.html:102)

代码在获取第一个复选框 (y.checked === true) 的值以及在单击提交按钮时将 textContent 放置在 index.html 页面上没有问题，但第二个 (c.checked === true) 抛出未捕获的 TypeError 并且不会将其放在网页上。

我已尝试 window.onload 但未能解决问题。

不确定这是否重要，但这是在单击按钮时从 index.html 页面打开的模式中。

我对编码还很陌生，所以我可能缺少一些明显的东西。

function submitClick() {

        let yesOrNo = document.getElementById('concept');
        let circle = document.getElementById('circle-text');
        let c = document.getElementById('stick');
  
      
        let y = document.getElementById('yes');
        let n = document.getElementById('no');
        

        if (y.checked === true) {
          yesOrNo.textContent = 'Accept';
        } else if (n.checked === true) {
          yesOrNo.textContent = 'Avoid';
        } else {
          yesOrNo.textContent = "I'm confused";
        }

        if (c.checked === true ) {
            circle.textContent = 'Likely';
            console.log(c.value);
          } else {
            circle.textContent = "Unlikely";
          }
        };

Answer 1

document.forms[0].addEventListener('submit',function(e){
    e.preventDefault()

    let y = document.getElementById('yes');
    let n = document.getElementById('no');
    let yesOrNo = document.getElementById('concept');

    if (y.checked === true && n.checked === true) {
        yesOrNo.innerText = "I'm confused";
    } else if (n.checked === true) {
        yesOrNo.innerText = 'Avoid';
    } else {
        yesOrNo.textContent = 'Accept';
    }

    let c = document.getElementById('stick');
    let circle = document.getElementById('circle-text');
    
    if (c.checked === true ) {
        circle.innerText = 'Likely';
    } else {
        circle.innerText = "Unlikely";
    }
})

<form>
Yes : <input type="checkbox" id='yes' name='YesNo'><br>
No : <input type="checkbox" id='no' name='YesNo'>
<div id="concept"></div>

<hr>

stick : <input type="radio" id='stick'>
<div id="circle-text"></div>

<input type="submit" value="submit">
</form>

无法读取 null 的属性 'checked'

Cannot read property 'checked' of null

javascript

onsubmit

无法读取 null 的 属性 'checked'

Cannot read property 'checked' of null

javascript

onsubmit

无法读取 null 的属性 'checked'