通过将鼠标移到元素上来更改元素的标题

Question

I want to write a function called titlep(a) that when the mouse is on the numbers, their title is equal to the product of A in that number. (The number A is always changing and the titles change as it changes)

I want when the mouse is on the numbers +1, +2, +3, +4, the title of these numbers is equal to their product multiplied by the number A.

Can friends help me where is the problem with Function titlep(a) ?

 var number; setInterval(function(){ number = Math.floor((Math.random()*100)+1); document.getElementById("in02").innerHTML = number }, 5000); function titlep(a){ price = number * a this.setAttribute('title', price ); }

 <div style="cursor: pointer"> <span class="tp-cu-po" onmouseover="titlep(4)" title="333">4+ </span><br> <span class="tp-cu-po" onmouseover="titlep(3)">3+ </span><br> <span class="tp-cu-po" onmouseover="titlep(2)">2+ </span><br> <span class="tp-cu-po" onmouseover="titlep(1)">1+ </span><br> </div><br> A = <a id="in02"></a>

Answer 1

Is seemed that you didn't declare any variables with var , const or let so that could be where you were having issues.

By passing this as a parameter you can access the exactly which span you are hovering. This solution you can change the text of any of those span s or even add more and this will still work.

 setInterval(function() { const number = Math.floor((Math.random() * 100) + 1); document.getElementById("in02").innerHTML = number }, 5000); function titlep(elem) { const aVal = document.getElementById('in02').textContent; const elemVal = elem.textContent.replace(/[^0-9]/g, ''); elem.title = Number(aVal) * Number(elemVal); }

 <div style="cursor: pointer"> <span class="tp-cu-po" onmouseover="titlep(this)">4+ </span><br> <span class="tp-cu-po" onmouseover="titlep(this)">3+ </span><br> <span class="tp-cu-po" onmouseover="titlep(this)">2+ </span><br> <span class="tp-cu-po" onmouseover="titlep(this)">1+ </span><br> </div><br> A = <a id="in02"></a>