Есть задача: Даны абзацы с числами. По первому клику на абзац в нем должен появится квадрат числа, которое он содержит. По второму клику - куб. По третьему клику - четвертая степень.
Мой код:
<!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>
У меня функции запускаются одновременно. Как сделать чтобы они работали поочередно?