Trying to complete my coding bootcamp prework using getElementByID and addEventListener

Question

I start my coding bootcamp tomorrow and I have been able to complete all my pre-work modules except this one.

Using only html and Javascript, I am to try to get these buttons to work to change this object in the following code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
    </head>
    <body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> . 
    </div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>

    </body>
    </html>

Here is where I am at, and I am obviously having issues. I feel like I know just enough to make a mess.

//the following is the fade function, 
//currently unattached to button:
//source: https://stackoverflow.com/questions/28662893/fade-in-and-fade-out-in-pure-javascript-without-jquery

var box = document.getElementById('box');

function fadeOut(elem, speed) {

  if (!elem.style.opacity) {
    elem.style.opacity = 1;
  } // end if

  var outInterval = setInterval(function() {
    elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0) {
      clearInterval(outInterval);
    } // end if
  }, speed / 50);
}

fadeOut(box, 2000);

// end fadeOut()

<!DOCTYPE html>
<html>

<head>

  <title>Jiggle Into JavaScript</title>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> .
  </div>

  <button id="growBtn">Grow</button>
  <button id="blueBtn">Blue</button>
  <button id="fadeBtn">Fade</button>
  <button id="resetBtn">Reset</button>

  <script type="text/javascript">
    document.getElementById("growBtn").addEventListener("click", function() {

      document.getElementById("box").style = "height:250px; width:250px;background-color: orange;margin: 25px";

    });

    document.getElementById("blueBtn").addEventListener("click", function() {

      document.getElementById("box").style = "height:150px; width:150px;background-color: blue;margin: 25px";

    });

    document.getElementById("fadeBtn").addEventListener("click", function() {

      document.getElementById("box").onclick.fadeOut();

    });

    document.getElementById("resetBtn").addEventListener("click", function() {

      document.getElementById("box").style = "height:150px; width:150px;background-color: orange;margin: 25px";

    });
  </script>

  <!-- Linking the JavaScript file -->

</body>

</html>

I have been researching for days but have found so many different options and none seem to be the right fit.

Here are the issues as they stand right now:

Grow button: Well, I can make it get bigger, but just once, not every time the button is clicked.
Blue button: I can make it blue when the button is clicked, but the size changes back to the original if the grow button was clicked first.
Fade button: I found the code to a fadeOut function on this site (referenced in the code), but I don't know how to apply it to my fadeBtn so the box fades immediately upon opening the page. This is currently the only code in my js file.
Reset button: This works! Not sure that the code I used to make it work is the appropriate way, but I will take any win at this point!

I will take absolutely any advice/guidance/google links anyone is willing to share to help me! I'd like to start bootcamp out on the right foot and figure this out.

Thanks in advance!

Shiny · Accepted Answer · 2020-01-18T00:13:03.330

Firstly, there's no reason to continually fetch the element on the page - assign it to a variable once at the start, and then reference that variable through your functions.

const box = document.getElementById('box');

Also, when updating an Element's styles, you should be targeting a specific style that you want to change, and then updating it directly

// Instead of this
document.getElementById("box").style = "height:250px; width:250px; 

// Do this ( Also applying the above tip )
const box = document.getElementById('box');

box.style.height = '250px';
box.style.width = '250px';

Grow button: Well, I can make it get bigger, but just once, not every time the button is clicked

Your code currently doesn't do anything dynamic - You're just setting it to a hard-coded size. What you want to do instead is get the current size of the element, increase this, and then assign that value back to your element

You can use offsetHeight and offsetWidth to get the height / width of an element as a Number for easier addition

let height = box.offsetHeight + 50; // Increasing the current size by 50
let width = box.offsetWidth + 50;

box.style.height = height + 'px'; // Assigning our increased size back to the box
box.style.width = width + 'px';

Blue button: I can make it blue when the button is clicked, but the size changes back to the original if the grow button was clicked first.

Throughout your functions, you're overwriting every style on the box element for no reason. Unless you are overwriting a style, or removing a style, the values for each style will stay the same. When you're updating backgroundColor, just update backgroundColor.

box.style.backgroundColor = 'blue'; // This is all you need to change

Fade button: I found the code to a fadeOut function on this site (referenced in the code), but I don't know how to apply it to my fadeBtn so the box fades immediately upon opening the page

I'm a little confused as to why you would want this applied to the box as soon as the page loads, surely applying this style to the box on the button press is more appropriate? If that's the case, just move your function call into the click handler on the button

document.getElementById("fadeBtn").addEventListener("click", function() {
  fadeOut(box, 2000);
});

Reset button: This works! Not sure that the code I used to make it work is the appropriate way, but I will take any win at this point!

It does, but you don't need to reset margin because you're never changing it.

Also, because your fadeOut function is running it's setInterval until the opacity is 0, we need a way to access and cancel this interval or else the element will keep fading - I've moved the outInterval declaration outside of the function for this, so you can call clearInterval(outInterval) inside your reset function (this is more visible in the Code Snippet at the bottom)

// Reset 'Grow'
box.style.height = '150px';
box.style.width = '150px';

// Reset 'Blue'
box.style.backgroundColor = 'orange';

// Reset 'Fade'
clearInterval(outInterval);
box.style.opacity = 1;

Here's a Snippet with these changes implemented so you can have a look how it works - Feel free to ask any questions if you're not sure on something, or I've missed a detail

const box = document.getElementById('box');
let outInterval = null;

document.getElementById("growBtn").addEventListener("click", function() {
  let height = box.offsetHeight + 50;
  let width = box.offsetWidth + 50;
  
  box.style.height = height + 'px';
  box.style.width = width + 'px';
});

document.getElementById("blueBtn").addEventListener("click", function() {
  box.style.backgroundColor = 'blue';
});

document.getElementById("fadeBtn").addEventListener("click", function() {
  fadeOut(box, 2000);
});

document.getElementById("resetBtn").addEventListener("click", function() {
  // Reset 'Grow'
  box.style.height = '150px';
  box.style.width = '150px';
  
  // Reset 'Blue'
  box.style.backgroundColor = 'orange';
  
  // Reset 'Fade'
  clearInterval(outInterval);
  box.style.opacity = 1;
});

function fadeOut(elem, speed) {
  if (!elem.style.opacity) {
    elem.style.opacity = 1;
  } // end if

  outInterval = setInterval(function() {
    elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0) {
      clearInterval(outInterval);
    } // end if
  }, speed / 50);
};

<body>
  <p>Press the buttons to change the box!</p>

  <div id="box" class="box" style="height:150px; width:150px; background-color:orange; margin:25px"> . </div>

  <button id="growBtn">Grow</button>
  <button id="blueBtn">Blue</button>
  <button id="fadeBtn">Fade</button>
  <button id="resetBtn">Reset</button>
</body>

Thank you for all this great information! To clarify, I didn't want the box to fade when the page loaded, it just did fade when I opened the page because I didn't know how to assign it to the fade button. I should have worded that better. I really appreciate the time you took to help me understand! — jenkruk, Jan 18 '20 at 00:17
Ah, right - Yeah, just moving the function call `fadeOut(box, 2000);` inside the `.addEventListener` for fadeBtn would be enough — Shiny, Jan 18 '20 at 00:22

score -2 · Answer 2 · answered Jan 17 '20 at 23:53

here you go I explained what and why but if you have questions just ask:

HTML :

<!DOCTYPE html>
<html>
<head>
  <title>Jiggle Into JavaScript</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <met charset="utf-8">
</head>
<body>
  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> .
  </div>

  <button id="growBtn">Grow</button>
  <button id="blueBtn">Blue</button>
  <button id="fadeBtn">Fade</button>
  <button id="resetBtn">Reset</button>

  <script type="text/javascript">
    // The simples aproach would be to create global variable boxHeightAndWoxWidth and change it
    var boxHeightAndWidth = 150;
    document.getElementById("growBtn").addEventListener("click", function() {
      // Well my mate if you are tring to make box bigger each time then don't pass fixed height and width 
      // but make it bigger each time you pressed the button like so:
      boxHeightAndWidth += 10;
      // and we don't change color cuz why even?
      // document.getElementById("box").style = "height:" + boxHeightAndWidth +"px; width:" + boxHeightAndWidth + "px;background-color:orange; margin:25px";
      document.getElementById("box").style.height = boxHeightAndWidth + "px";
      document.getElementById("box").style.width = boxHeightAndWidth + "px";
      // jea we update this too so if you "faded" your box it will be seen again
      document.getElementById("box").style.opacity = "1";
    });

    document.getElementById("blueBtn").addEventListener("click", function() {
      // well of course it changes to orginal - you are passing fixed values which are lower then from growBtn
      // here we will use the global boxHeightAndWidth so it would stay the same
      // OR JUST DON'T CHANGE and change only required variables
      // document.getElementById("box").style = "height:150px; width:150px; background-color:blue; margin:25px";
      document.getElementById("box").style.backgroundColor = "blue";
      // jea we update this too so if you "faded" your box it will be seen again
      document.getElementById("box").style.opacity = "1";
    });


    // jea let's break this to pieces
    document.getElementById("fadeBtn").addEventListener("click", function() { // here you add event "onclick"

      // document.getElementById("box").onclick.fadeOut(); // here too but not in correct way so it doesn't even work
      // https://www.w3schools.com/jsref/event_onclick.asp - here, it's nicely exlpained
      // Correct way:
      // document.getElementById("box").onclick = function(){
      //   fadeOut();
      // };
      // but it's wrong too, because you would have to click twice to activate this script - if you wan't this behaviour the use "ondblclick"
      // so just pass this:
      // fadeOut();
      // but it's wrong too cuz this function requires variable to be passed
      // fadeOut(elem, speed) - elem - element to which apply fade and speed - speed of fade, so we will just copy the call from javascript.js:
      var box = document.getElementById('box');
      fadeOut(box, 2000);
      // and for explainations why it started without any action go to javascript.js
    });

    document.getElementById("resetBtn").addEventListener("click", function() {
      // This works because you reset styles to their start values. 
      document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px";

    });
  </script>

  <!-- Linking the JavaScript file -->
  <script type="text/javascript" src="javascript.js"> </script>

</body>

</html>

And javascript.js:

//the following is the fade function,
   //currently unattached to button:
   //source: https://stackoverflow.com/questions/28662893/fade-in-and-fade-out-in-pure-javascript-without-jquery


   function fadeOut(elem, speed) {

   if (!elem.style.opacity) {
   elem.style.opacity = 1;
   } // end if

   var outInterval = setInterval(function () {
   elem.style.opacity -= 0.02;
   if (elem.style.opacity <= 0) {
       clearInterval(outInterval);
   } // end if
   }, speed / 50);
   }
   // cuz this calls the function just when the page loads so on the start of everything:
   // fadeOut(box, 2000);

   // end fadeOut()

I hope you understand everything now <3.

Trying to complete my coding bootcamp prework using getElementByID and addEventListener

2 Answers2