錯誤的JavaScript KeyListener

我有錯誤：index.html:12 Uncaught TypeError: Cannot read property 'addEventListener' of null 不知道出了什麼問題？該代碼假設將所選單選按鈕的結果存儲到數組中。但該函數甚至不運行，因爲它是空的。錯誤的JavaScript KeyListener

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Video Test</title> 
    <script> 
     var arr = []; 
     document.getElementById("continue").addEventListener("click", function() { 
      var cbChecked = document.querySelectorAll('[name="white"]:checked') 
      if (cbChecked != null) { 
      arr.push(cbChecked.value) 
      } 
      console.log(arr) 
     }) 
    </script> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="overlay"> 
     <form action=""> 
      <input type="radio" name="white" value="1" id="radio1"/> 
      <input type="radio" name="white" value="2" id="radio2"/> 
      <input type="radio" name="white" value="3" id="radio3"/> 
      <input type="radio" name="white" value="4" id="radio4"/> 
      <input type="button" id="continue" value="Continue"/> 
     </form> 
     </div> 
     <div id="base"> 
     <video controls> 
      <source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4"> 
      Your browser does not support the video tag. 
     </video> 
     </div> 
    </div> 
    </body> 
</html>

來源

2017-07-07 Alex Ker

嘗試把你的腳本在底部，所以DOM是腳本之前渲染，否則將代碼放在文檔的ready事件。 –

您正在運行您的<script>之前DOM元素在那裏。將<script>移動到<body>標記的底部。

來源

2017-07-07 20:04:59 zero298

啊，好的，解決了！ –

querySelectorAll返回一個對象數組，而不是單個對象。

var arr = []; 
 
     document.getElementById("continue").addEventListener("click", function() { 
 
      var radios = document.querySelectorAll('input:checked')   
 
      if (radios.length > 0) { 
 
      arr.push(radios[0].value) 
 
      } 
 
      console.log(arr) 
 
     })

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Video Test</title> 
 
    <script> 
 
    
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="overlay"> 
 
     <form action=""> 
 
      <input type="radio" name="white" value="1" id="radio1"/> 
 
      <input type="radio" name="white" value="2" id="radio2"/> 
 
      <input type="radio" name="white" value="3" id="radio3"/> 
 
      <input type="radio" name="white" value="4" id="radio4"/> 
 
      <input type="button" id="continue" value="Continue"/> 
 
     </form> 
 
     </div> 
 
     <div id="base"> 
 
     <video controls> 
 
      <source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4"> 
 
      Your browser does not support the video tag. 
 
     </video> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2017-07-07 20:12:45

錯誤的JavaScript KeyListener

回答

相關問題