Добавить +1 в p каждый раз, когда divis нажал

Question

<div id="main">  

<div id="rating"> 

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

</div> 

<div id="main"> 

Я хочу увеличивать число внутри p каждый раз, когда я нажимаю на внутренний div. Я пробовал некоторые методы. Но они работают только с кнопками, и я не хочу менять 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>