Element disappearing before it is supposed to

user_16017150 0
Viewed 66

Recently I've been coding a clicker game and now have run into a problem with the onclick function. What I'm trying to do is on the first click, have it change into certain text, and on the second and third clicks change it to a different text. However, on the fourth click, I'd like it to disappear.

However, it disappears on the third click instead of the fourth click. The third click is supposed to show more text, and then call a function and vamoose. It just disappears. Here is my code:

function change_text(){
  
   let first_click = true;
   onclick = function() {
       
       if (first_click) {
         document.getElementById("speech").innerHTML = "You will? Thanks so much! Let's make our first pastry. Click the pastry!";
         first_click = false;
       } 
       else {
            document.getElementById("speech").innerHTML = "Wow, that looks amazing! It make take a while to bake them all by hand; so when you want to go faster, head to the shop and buy upgrades! Have fun!";
            
            function second_click(){
                document.getElementById("speech").outerHTML = ""
            }

            document.getElementById("speech").onclick = second_click();
    }
}

What can I do?

html javascript
3 Answers

I'm going to rewrite your code because it seems to be missing something.

In this code, I'm using a single event handler. Then using a counter and switch statement to determine the current click count.

let speech = document.querySelector("#speech");

let clicks = 1;

speech.addEventListener("click",function(){
  speech.style.display = "block";
   switch(clicks){
    case 1: speech.innerHTML = "You will? Thanks so much! Let's make our first pastry. Click the pastry!";break;
    case 2:  speech.innerHTML = "Wow, that looks amazing! It make take a while to bake them all by hand; so when you want to go faster, head to the shop and buy upgrades! Have fun!";break;
    case 3: speech.innerHTML = "3 text!!";break;
    case 4: speech.innerHTML = "";speech.style.display = "none";clicks=0;break;
   }   
   clicks++;
});
#speech{background:red;cursor:pointer;}
<div id="speech">CLICK HERE</div>

user_36842650

Try something like that.

var clicks = 0;

function change_text(){
    clicks += 1;
    console.log("Action " +clicks)
    if (clicks === 1) {
      //do something
    } else if (clicks === 2) {
      //do something
    } else if (clicks === 3) {
      //do something
    } else if (clicks === 4) {
      //do something
    }
}
<button onclick="change_text()">Click me</button>

user_144093300

Your code is difficult to understand. Just an advice, try to organize your logic before write code and try to code in a simple way like this:

const speeches = ["You will? Thanks so much! Let's make our first pastry. Click the pastry!'", "Wow, that looks amazing! It make take a while to bake them all by hand; so when you want to go faster, head to the shop and buy upgrades! Have fun!", "Third speech"];

const speech = document.getElementById("speech");
let clickCounter = 0;

speech.addEventListener("click", function() {
  if (clickCounter >= speeches.length) {
    clickCounter = 0;
    speech.style.display = 'none';
    return;
  }

  speech.innerHTML = speeches[clickCounter];

  clickCounter++;
});
<div id="speech">CLICK ME!</div>

user_100779110
Related