當使用JavaScript單擊HTML上的按鈕時，如何使事件發生

Question

單擊按鈕時，我試圖使HTML打印出“德國”。 但是它不能正常工作。 我的代碼有問題嗎？

的HTML

<input type="button" value="click!" onclick="shuffle();"/>
<div id="output"></div>

Java腳本

(function(){
    window.onload = function(){
        alert("welcome to my trip record");
    }
})();

var shuffle = function(){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
}

Answer 1

刪除; 從您的onclick

<input type="button" value="click!" onclick="shuffle()"/>

Answer 2

嘗試使用addEventListener進行按鈕單擊時的make事件

document.getElementById("myBtn").addEventListener("click", function(){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
});

這是工作的jsfiddle： https ://jsfiddle.net/jxjpzvvz/

Answer 3

<button id='btn_click' type="button">Click me!</button>
<div id="output"></div>

將按鈕元素用於按鈕，而不是輸入類型按鈕。 我們不在html 4.0的時代;）

(function(){
    window.onload = function(){
        alert("welcome to my trip record");
    }
})();

var shuffle = function(event){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
}

document.getElementById('btn_click').addEventListener('click', shuffle);

我是html標簽中沒有js的粉絲，所以我向該元素添加了一個偵聽器

Answer 4

您犯了兩個錯誤第一個錯誤<input />這沒什么。 第二個最常見的“函數（）;”，“;” 是錯的

您更正的代碼

 (function(){ window.onload = function(){ alert("welcome to my trip record"); } })(); var shuffle = function(){ var target = document.getElementById("output"); target.innerHTML = "Germany"; } 

 <input type="button" value="click!" onclick="shuffle()"/> <div id="output"></div> 

我喜歡使用DOM EventListener

 window.onload = function(){ alert("welcome to my trip record"); } document.getElementById("myBtn").addEventListener("click", function_t); function function_t(){ var target = document.getElementById("output"); target.innerHTML = "Germany"; } 

  <input type="button" value="click!" id = "myBtn" > <div id="output"></div>