2017-10-28 173 views
-1

我想点击我的按钮,当我点击每个按钮=> p.innerhtml =在该按钮中单击的每个div。onclick and change innerhtml

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

回答

0

加 “-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>

+0

的ID是那么容易! –