document.getElementById（“x”）。checked返回undefined

Question

我做了一个脚本来显示视频，如果复选框被选中。

HTML：

<p class="subParHeader" style="">Video or not</p> 
<form action="#" method="post" style="font-family: Arial;"> 
<input type="checkbox" title="Click here if you want to input a video" value="" id="FormVidOrNot"><input id="FormVidOrNotInput" value="" style="width: 30%"></input></input> 
</form> 

的Javascript：

if(document.getElementById("FormVidOrNot").checked){ 

    document.write('<div class="div_video">'); 
    document.write(JSFormVidOrNotInput); 
    document.write('</div>'); 

} 

但每次我运行它返回未定义的代码的时候，尽管它已经完全在这里运行：

if(document.getElementById("FormVidOrNot").checked){ 
    var JSFormVidOrNotInput = document.getElementById("FormVidOrNotInput").value; 
} 

（这部分是在代码中比第一个脚本更高）

Answer 1

试试这个

<p class="subParHeader" style="">Video or not</p> 
    <form action="#" method="post" style="font-family: Arial;"> 
    <input type="checkbox" title="Click here if you want to input a video" value="Test" id="FormVidOrNot"> 
    <input id="FormVidOrNotInput" value="" style="width: 30"> 
    </form> 

请注意，我们没有必要密切

document.getElementById("FormVidOrNot").addEventListener('click',function(){ 
    if(document.getElementById("FormVidOrNot").checked){ 
     var JSFormVidOrNotInput = document.getElementById("FormVidOrNotInput").value; 

     document.write('<div class="div_video">'); 
     document.write(JSFormVidOrNotInput); 
     document.write('</div>'); 
    } 

});