document.getElementById("x").checked 返回未定义

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>');
}

但是每次我运行代码时，它都返回undefined，尽管它在这里运行得很好:

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>

注意我们不需要输入标签close

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>');
  }
});