Theodore Steiner Theodore Steiner - 5 months ago 18
CSS Question

Using the Console to Debug JavaScript

I am trying to get better at using the Console debug my JS code, but I'm not quite sure if I am logging to the console properly.

Here is a little code example to illustrate. In this example, if you click on the black square the width changes. Now the code works so nothing should appear in the console, but when it comes time to test new code, have I logged it appropriately?

HTML:

<div id="square1"></div>


CSS:

#square1
{
height: 10px;
width: 10px;
background: black;
}


JS:

var square1 = document.getElementById("square1");

square1.onclick = function grow()
{
if(square1.style.width=="10px")
{
square1.style.width="20px";
}
else
{
square1.style.width = "10px";
}
};

console.log(grow());

Answer

if you want to log the final width after pressing click, you should use:

square1.onclick = function grow()
{
 if(square1.style.width=="10px")
 {
    square1.style.width="20px";
 }
 else
 {
    square1.style.width = "10px";
 }

 console.log(square1.style.width);
};