There is a task: Paragraphs with numbers are given. By the first click on a paragraph, the square of the number it contains should appear in it. By the second click - cube. By the third click - the fourth degree.

My code is:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>3</p> <p>7</p> <p>9</p> <script> var elems = document.getElementsByTagName('p'); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener('click', func1); elems[i].addEventListener('click', func2); elems[i].addEventListener('click', func3); } function func1() { this.innerHTML = this.innerHTML * this.innerHTML; this.removeEventListener('click', func1); } function func2() { this.innerHTML = Math.pow(this.innerHTML, 3); this.removeEventListener('click', func2) } function func3() { this.innerHTML = Math.pow(this.innerHTML, 4); this.removeEventListener('click', func3) } </script> </body> </html>

My functions run at the same time. How to make them work alternately?

    3 answers 3

    I have a small offer, slightly different from yours. Here is the code:

     var elems = document.getElementsByTagName('p'); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener('click', funcPow); elems[i].addEventListener('click', funcPow); elems[i].addEventListener('click', funcPow); } function funcPow() { this.innerHTML = this.innerHTML * this.title; } 
     <p title="3">3</p> <p title="7">7</p> <p title="9">9</p>

    Slightly upgraded your code. The first click will be the square of the number. The second click - cube. Third click - fourth degree, etc. Hide in the title - our number, and we will already show the result in innerHTML like you, only we will multiply the number hidden in the title by the result in innerHTML . It took one function. You can make it even easier, in my opinion easier, like this:

     function funcPow(el) { el.innerHTML = el.innerHTML * el.title; } 
     <p title="3" onclick="funcPow(this);">3</p> <p title="7" onclick="funcPow(this);">7</p> <p title="9" onclick="funcPow(this);">9</p>

    Or, if you need the power of the number of the displayed, then this option:

     function funcPow(el) { el.innerHTML = Math.pow(el.innerHTML, el.title); el.title++; } 
     <p title="2" onclick="funcPow(this);">3</p> <p title="2" onclick="funcPow(this);">7</p> <p title="2" onclick="funcPow(this);">9</p>

    • Can you tell me about another identical task? Dana divas. At the first click on each div, it is painted with a red background, the second is painted back, and so on, every click alternates the background. Make it so that there are two functions: one paints in red, the other in green and they replace each other through removeEventListener. here is my decision. But functions are performed simultaneously. codepen.io/feuer81/pen/vmgVXb I don’t know if you can ask new questions, similar to the one in this topic. - Miroslav
    • @Miroslav, go here: chat with me - Denis Bubnov
    • @Miroslav, I have the answer, how will be the time - go to chat with me and write to me. - Denis Bubnov

    Example with minimal code change

     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>3</p> <p>7</p> <p>9</p> <script> var elems = document.getElementsByTagName('p'); for (var i = 0; i < elems.length; i++){ elems[i].addEventListener('click', func1); } function func1(){ this.innerHTML = this.innerHTML * this.innerHTML; this.removeEventListener('click', func1); this.addEventListener('click', func2); } function func2(){ this.innerHTML = Math.pow(this.innerHTML, 3); this.removeEventListener('click', func2); this.addEventListener('click', func3); } function func3(){ this.innerHTML = Math.pow(this.innerHTML, 4); this.removeEventListener('click', func3); } </script> </body> </html>
    • See what happens after the second or more click with the number as a result. - Denis Bubnov
    • @ denis-bubnov in the question indicated: on the first click - the square, on the second - the cube on the third click - the fourth degree, the result coincides with the result of the author, only a few clicks. The only question is whether the cube and the fourth power should be taken from the original number. Then you can do it like this jsfiddle.net/prevolley/82c636wo/1 if we want to preserve the source code as much as possible, but of course it would be better to rewrite normally - user211866
    • Aaaaa, understood you. Something I did not think about the other option with the degree of the number is not the original. Thank you for the clarification. - Denis Bubnov

    variable for each function: start variable = 2; clicked - the function worked square variable = 3; clicked - the function fulfilled the third degree variable = 4; clicked - the function has fulfilled the fourth degree;