onclick and innerhtmlを変更

Question

私は自分のボタンをクリックしたいと思っていました。各ボタンをクリックしたときに=> p.innerhtml =そのボタンをクリックした各div。

<script> 
 

 
    var buttons = document.getElementsByClassName("b"); 
 
    for(var i = 0; i < buttons.length ; i++) { 
 
     buttons[i].onclick = function (event) { 
 
      document.getElementById("name").innerHTML = document.getElementById(this.id).innerHTML 
 
     }; 
 
    } 
 

 
</script>

<div style="display: flex"> 
 
    <div class="g" id="11">100</div> 
 
    <button id="1" class="b">btn</button> 
 
    </div> 
 
<br> 
 
<div style="display: flex;"> 
 
    <div class="g" id="12">200</div> 
 
    <button id="2 " class="b">btn</button> 
 
</div > 
 
<br> 
 
<div style="display: flex"> 
 
    <div class="g" id="13">300</div> 
 
    <button id="3 " class="b">btn</button> 
 
</div> 
 

 

 

 

 
<p id="name"> name</p>

Answer 1

追加 "-10" のdivの

var buttons = document.getElementsByClassName("b"); 
 
    for(var i = 0; i < buttons.length ; i++) { 
 
     buttons[i].onclick = function (event) { 
 
      document.getElementById("name").innerHTML = document.getElementById(this.id-10).innerHTML 
 
     }; 
 
    }

<div style="display: flex"> 
 
    <div class="g" id="1">100</div> 
 
    <button id="11" class="b">btn</button> 
 
</div> 
 
<br> 
 
<div style="display: flex;"> 
 
    <div class="g" id="2">200</div> 
 
    <button id="12 " class="b">btn</button> 
 
</div> 
 
<br> 
 
<div style="display: flex"> 
 
    <div class="g" id="3">300</div> 
 
    <button id="13 " class="b">btn</button> 
 
</div> 
 

 

 

 

 
<p id="name"> name</p>