CODEWITHSUNDEEP
javascripthtml
Bahdoo
Bahdoo

Reputation: 31

Element disappearing before it is supposed to

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?

Upvotes: 1

Views: 232

Answers (3)

JMSalazarDev
JMSalazarDev

Reputation: 185

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>

Upvotes: 1

Sillas Senna
Sillas Senna

Reputation: 115

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>

Upvotes: 1

imvain2
imvain2

Reputation: 15847

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>

Upvotes: 2

Related Questions