Question

我正在努力使用Console调试我的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

如果要在按下点击后记录最终宽度，则应使用：

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，因为您的函数不返回任何内容。

使用控制台调试JavaScript

2 个答案: