使用控制台调试JavaScript

Question

我试图在使用控制台调试我的JS代码方面变得更好，但是我不确定是否可以正确登录到控制台。

这是一个小代码示例来说明。 在此示例中，如果单击黑色正方形，则宽度会更改。 现在代码可以正常工作了，因此控制台中什么也不会出现，但是到了测试新代码的时候，我是否正确记录了它？

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 1

如果要在单击click之后记录最终宽度，则应使用：

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

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

Answer 2

您最想在此处登录的意思是square1.style.width 。 console.log(grow())将始终返回undefined，因为您的函数什么也不返回。