onclickに関数を指定する
クリックして下さい
<p id="p1a">クリックして下さい</p>
<p id="p1b"></p> <!-- クリックの結果を表示-->
function test1() {
p1b.textContent = "クリックされました!";
}
const p1a = document.getElementById("p1a");
const p1b = document.getElementById("p1b");
p1a.onclick = test1; // p1a が onclick されたら test1 が処理される
引数にeventを指定する
<input type="button" value="ボタン1" onclick="test2(event)" /> <!-- ここがポイント!-->
<p id="p2"></p> <!-- クリックの結果を表示-->
const p2 = document.getElementById("p2");
function test2(e) {
p2.innerHTML = e.target.value + "を" + e.type + "しました!";
console.log(e.target);
//<input type="button" value="ボタン1" onclick="test1(event)">
console.log(e.type); // click
}
引数にthisを指定する。
Hello!
<input type="button" value="ボタン2" onclick="test3(this)" />
<p>Hello!</p>
<p id="p3"></p> <!-- クリックの結果を表示-->
const p3 = document.getElementById("p3");
function test3(obj) {
p3.innerHTML = obj.value + "をクリックしました!"+ "ボタンの下の文は"
+ obj.nextElementSibling.textContent + "です。";
console.log(obj);
//<input type="button" value="ボタン1" onclick="test1(this)">
console.log(obj.nextElementSibling);
// <p>Hello!</p>
}
引数のthisにidやvalueを指定する
<input
type="button"
id="b3"
value="ボタン3"
onclick="test4(this.id,this.value)" /> <!-- ここがポイント!-->
<p id="p4"></p> <!-- クリックの結果を表示-->
const p4 = document.getElementById("p4");
function test4(a, b) {
p4.innerHTML = "idは" + a + '<br>' + "valueは" + b + "です。";
console.log(a); // b3
console.log(b); // ボタン
}
複数ある要素の中から、クリックした要素の値を取得する
以下のボックスをクリックしてみてください。