JavaScript的HTML DOM事件監聽器不工作

我的代碼：JavaScript的HTML DOM事件監聽器不工作

<?php 
    $id = 0; 
    /*if(isset($_POST["type_test"]) && !empty($_POST["type_test"])){ 
    if($_POST["type_test"] == "ola"){ 
     echo "Ola José"; 
    } 
    else if($_POST["type_test"] == "adeus"){ 
     echo "Adeus José"; 
    } 
    else{ 

    } 
    }*/ 


?> 

<html> 

<form id="<?php echo $id; ?>" name ="form_test" action = "test_form.php" method="post" > 
    <input type="radio" id = "type_test" name="type_test" value="ola"> ola <br> 
    <input type="radio" id = "type_test" name="type_test" value="adeus"> adeus <br> 
    <input type="submit" value="submit"> //imput only use for POST method 
    <button id="myBtn">Try it</button> 
    <script> 

    </script> 


</form> 
<script> 
     document.getElementById("myBtn").addEventListener("click", functio_test; 
     functio_test(){ 
      var x =document.getElementById.("type_test").value; 
      if(x == "ola"){ 
       alert("Ola José"); 
      } 
      else if(x == "adeus"){ 
       alert("Adeus José"); 
      } 
      else 
       alert("Continua José"); 
     } 
</script>  
</html>

這是當一個按鈕觸發一個簡單的程序，出現警告信息。

我嘗試使用POST方法，它工作。爲什麼它不適用於DOM事件監聽器？

來源

2017-04-11 Jose Marques

這一行是不恰當：'的document.getElementById（「myBtn」）的addEventListener（「點擊」，functio_test;' – Slime

代碼應該是這樣的

<form id="<?php echo $id; ?>" name ="form_test" action="test_form.php" method="post"> 
    <input type="radio" name="type_test" value="ola"> ola <br/> 
    <input type="radio" name="type_test" value="adeus"> adeus <br/> 
    <input type="submit" value="submit" /> <!--imput only use for POST method--> 
</form> 

<button id="myBtn">Try it</button> 

<script> 
     document.getElementById("myBtn").addEventListener("click", functio_test); 

     function functio_test(){ 
      var x = document.querySelector('input[name="type_test"]:checked').value; 
      if(x == "ola"){ 
       alert("Ola José"); 
      } 
      else if(x == "adeus"){ 
       alert("Adeus José"); 
      } 
      else { 
       alert("Continua José"); 
      } 
     } 
</script>

評論fo r「輸入只用於POST方法」不是一個真正的評論。正如@Hossam所提到的，你在addEventListeiner中缺少一個右括號。正如@Cruiser所提到的那樣，在聲明函數時缺少單詞函數。另外一個id屬性應該是唯一的，所以id =「type_test」應該只分配一次。獲取type_test單選按鈕的值的方法可以通過查詢選擇器來完成，因爲你必須找到被選中的那個，所以你的id調用不起作用。我假設你不想通過點擊try it按鈕來提交表單。最簡單的方法是將按鈕放在表單外。

還檢查了jQuery JavaScript庫，這使得使用Javascript樂趣:)

來源

2017-04-11 18:18:41 CodingYourLife

因爲您沒有正確使用它。的addEventListener應該叫這樣的：

document.getElementById("myBtn").addEventListener("click", function(){ 
    // code here 
});

或者，你可以調用它像這樣：

document.getElementById("myBtn").addEventListener("click", functio_test); 

// and you must make sure to declare your function correctly 
function functio_test(){ 
    // code here 
}

來源

2017-04-11 17:39:46 Cruiser

由於某種原因，我無法編輯您的答案。你在第一個例子中錯過了一個圓括號，並且分號爲 – CodingYourLife

是的，謝謝。固定。 – Cruiser

請確保關閉所有的支架：

document.getElementById("myBtn").addEventListener("click", functio_test);

來源

2017-04-11 17:40:19 Hossam

爲何不與DOM事件監聽器工作？

致電addEventListener()未關閉。

document.getElementById("myBtn").addEventListener("click", functio_test;

爲了解決這個問題，添加一個右括號：

document.getElementById("myBtn").addEventListener("click", functio_test); 
//                 ^

見這個工作在下面的例子。注意到有一些改變：function functio_test()

事件參數接受：function functio_test(e)

事件默認行爲（點擊按鈕提交表單）停止：e.preventDefault()

獲得前值函數名

function關鍵字添加從表單元素（而不是由id - 因爲這隻涉及具有該id屬性的第一個輸入）：
```
var x = document.forms[0].elements.type_test.value; 
```
<input>標記沒有允許的內容，因此是empty elements，所以結束斜槓被添加到標記的末尾。例如：
```
<input type="radio" id="type_test" name="type_test" value="ola" /> 
//               ^
```
第二個單選按鈕的ID屬性被改變，因爲「的ID全局屬性定義一個唯一的標識符（ID），其必須在整個文檔中的獨特。」 ²
```
<input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br> 
```
此外，如果該代碼不會在片段沙箱中，<form>和<script>標籤將被移入<body>標籤下的<html>標籤，因爲那些是flow content，並且唯一允許的內容是<head>是：「一個<head>元素，後跟一個<body>元素。 「¹
同樣形式的ID屬性具有文本」形式`前綴，因爲「除了ASCII字母和數字用字， '_'， ' - ' 和''。可能會導致兼容性問題，因爲它們在HTML 4中是不允許的。雖然HTML 5解除了此限制，但ID應以字母開頭以便兼容。「³

document.getElementById("myBtn").addEventListener("click", functio_test); 
 

 
function functio_test(e) { 
 
    e.preventDefault(); 
 
    var x = document.forms[0].elements.type_test.value; 
 
    if (x == "ola") { 
 
    alert("Ola José"); 
 
    } else if (x == "adeus") { 
 
    alert("Adeus José"); 
 
    } else 
 
    alert("Continua José"); 
 
}

<form id="form0" name="form_test" action="test_form.php" method="post"> 
 
    <input type="radio" id="type_test" name="type_test" value="ola" /> ola <br> 
 
    <input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br> 
 
    <input type="submit" value="submit" /> //imput only use for POST method 
 
    <button id="myBtn">Try it</button> 
 
</form>

_{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html）}

_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id）}

來源

2017-04-11 18:22:28

JavaScript的HTML DOM事件監聽器不工作

回答

相關問題