Button function only work on second click

Hello I would like to change the size and color of my div when I click the button for first time and display the original properties of div when click the second time. I have been trying to fix this issue with no success. Thanks
CODEPEN

HTML

<div id="myDivOne" class="myDivOne">
        <button id="myDivOneBtn">welcome back</button>
        This div should change size and color on the first click.
    </div>

CSS

.myDivOne {
      background-color: pink;
      width: 600px;
      height: 300px;
      margin: 20px;
  }
  .smoth {
    margin: 20px;
    height: 300px;
    transition: all .5s linear;
  }

JS

document.getElementById("myDivOneBtn").addEventListener("click", hhFunction);
function hhFunction() {
    var myDivOne = document.getElementById("myDivOne");
    if (myDivOne.style.backgroundColor == "pink") {
        myDivOne.style.width = "200px";
        myDivOne.style.backgroundColor = "lightblue";
        myDivOne.className = "smoth";
    }
    else {
        myDivOne.style.width = "600px";
        myDivOne.style.backgroundColor = "pink";
    }
}

After debugging a bit, so I added a console.log(myDivOne.style.backgroundColor) to your hhFunction and found out that the color pink is not getting recognized on the first click, but after the first click on the second one.

You should get myDivOne at the top of the code. Not inside hhFunction.

thank you very useful

Hi @codeca423
So this is very interesting so it seems you want to change the background color from pink to light blue on click button. When i trying to click do not do the change on the first click until the second click will change from pink to light blue.

Having said this your if else statements are good and do the job, in order to fix this problem. I created a variable to grab, the div that you want to change the background color, and added the background color to “pink”. this is all done within the script.
1.

var backgroundDef = document.querySelector('.myDiv');
 backgroundDef.style.backgroundColor = 'pink';

That way you have already loaded the pink background.

  1. You will need to Grab the variable var backgroundChange and add this to each element object of the if else statement, instead of your myDivOne

  2. Remove the CSS background-color: "pink"; line code.

  3. In addition you need to structure your HTML like this for best practices:

<button id="myDivOneBtn">welcome back</button>
<div class="myDiv">        
  This div should change size and color on the first click.
</div>

So this will work on first click change background color. let us know if this works!

it worked !! thanks, I was playing around a little bit more with my code and looks like if I use a simple window.onload = hhFunction; this could make the function load since the first moment, how efficient do you see this method?
js

window.onload = hhFunction;
document.getElementById("myDivOneBtn").addEventListener("click", hhFunction);
function hhFunction() {
    var myDivOne = document.getElementById("myDivOne");
    if (myDivOne.style.backgroundColor == "pink") {
        myDivOne.style.width = "200px";
        myDivOne.style.backgroundColor = "lightblue";
        myDivOne.className = "smoth";
    }
    else {
        myDivOne.style.width = "600px";
        myDivOne.style.backgroundColor = "pink";
    }
}
1 Like

Awesome… that is another way of doing it, because you are calling the function first to loaded and find the pink background, if it has it click and turned to light blue, else click again and will go pink.

So now you know two methods of doing it, you can do pure vanilla pink background the one i show you, and the one you have leaving the CSS intact and load your script first, before the CSS.

Good Job :slight_smile: that is another way of doing it as long you have good structured code, also just remeber to structure your HTML markup ok.

Good Job…

// HTML 
<button id="myDivOneBtn">welcome back</button>
<div class="myDiv">        
  This div should change size and color on the first click.
</div>
// CSS
.myDiv {
   
      width: 600px;
      height: 300px;
      margin: 20px;
  }
  .smoth {
    margin: 20px;
    height: 300px;
    transition: all .5s linear;
  }
var backgroundChange = document.querySelector('.myDiv');
 backgroundChange.style.backgroundColor = 'pink'; 

var button = document.querySelector("#myDivOneBtn");
button.addEventListener("click", function() { 

    if (backgroundChange.style.backgroundColor === 'pink') { 
        backgroundChange.style.width = "200px";
        backgroundChange.style.backgroundColor = "lightblue";
        backgroundChange.className = "smoth";
    } 
    else {
        backgroundChange.style.width = "600px";
        backgroundChange.style.backgroundColor = "pink";
    }
}); 

1 Like

thanks very handy information