每次单击div时，都会向p添加+1

Question

<div id="main">     

 <div id="rating">

  <div> <img src=""/>   <p>0</p>   </div>

 </div>

<div id="main">

我想在每次单击内部div时增加p内的数字。我尝试了一些方法。但他们只使用按钮，我不想改变HTML。

Answer 1

只需绑定点击事件处理程序，并在点击时更新p标记内的文字。

// add click event handler to the div
document.getElementById('rating').addEventListener('click', function() {
  // get p element inside the div
  var p = this.querySelector('p');
  // update the content
  p.textContent = Number(p.textContent) + 1;
});

<div id="main">
  <div id="rating">
    <div>
      <img src="" />
      <p>0</p>
    </div>
  </div>
</div>