【javascript】onclickの書き方と使い方 クリックした値を取得する

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); // ボタン
  }

複数ある要素の中から、クリックした要素の値を取得する

以下のボックスをクリックしてみてください。