イベントリスナーの使用
HTML 内で直接イベント属性を使用する代わりに、JavaScript を使って HTML 要素にイベントリスナーを追加することもできます。
まず、HTML 要素から onclick
および onsubmit
属性を削除します。
<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<form>
<input type="text" name="firstName" placeholder="First Name" />
<input type="text" name="lastName" placeholder="Last Name" />
<br />
<button type="submit">Submit</button>
</form>
次に、ボタンがクリックされたときに呼び出される JavaScript 関数を作成します。この関数は div
要素のテキストを更新する必要があります。
<script>
function handleButtonClick() {
document.getElementById("myDiv").innerHTML = "Hello, World!";
}
</script>
最後に、JavaScript を使ってボタンにイベントリスナーを追加します。
<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
document
.getElementById("myButton")
.addEventListener("click", handleButtonClick);
</script>