JavaScriptを使用してHTML上のボタンをクリックするとイベントが発生する方法

Question

ボタンをクリックすると "ドイツ"のHTMLを印刷しようとしています。しかし、正しく動作していません。私のコードに何か間違っていますか？

HTML

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

Javascriptを

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

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

Answer 1

にリスナーを追加し<input />これは何もない。 2番目に一般的な "function（）;"、 ";"あなたの修正コード

(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>

Answer 2

ボタンのためのあなたのonclick

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

Answer 3

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

使用ボタン要素ではなく、入力TYから;を削除しますpeボタン。私たちは、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のファンですので、私は次の2つのミス最初にミスを犯した要素

Answer 4

を使用するように間違って

ですボタンのメイクイベントのddEventListenerはここ

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

をクリックして作業jsfiddleです：https://jsfiddle.net/jxjpzvvz/