Javascript 问题管理变量

Question

这是我尝试使用我的代码进行的操作：

单击具有 selection() 函数的元素。
函数设置该元素的宽度。
函数选择之前点击的项目（也有selection()函数）
函数改变前一个元素的宽度

这是我的 JavaScript:

var lastOne;

function selection(event) {
    event.target.style.width = "50px";

    lastOne.style.width = "10px";
    current = event.target.id;
    lastOne = document.getElementById(current);
}

这里是相关的HTML:

<img src="images/Star.png" id="pic1" onclick="selection(event)">
<img src="images/Star.png" id="pic2" onclick="selection(event)">

目前正在编辑点击元素的宽度，但对上一个元素没有任何影响。

Answer 1

第一次调用 selection 时，lastOne 还没有被分配任何东西，JavaScript 抛出一个错误并且将从此时停止工作，因为 lastOne 永远不会分配给任何东西。

var lastOne;

function selection(event) {
    event.target.style.width = "50px";

    //an error will get thrown on this line the first time the function is executed because lastOne has not been defined
    lastOne.style.width = "10px";
    current = event.target.id;
    lastOne = document.getElementById(current);
}

我会通过这样做来修复它：

var lastOne;

function selection(event) {
    if(lastOne) {
      lastOne.style.width = "10px";
    }

    event.target.style.width = "50px";
    current = event.target.id;
    lastOne = document.getElementById(current);
}

Answer 2

一切正常，除了一件事：如果lastOne变量没有值，就会发生错误，所以你必须检查，这个变量是否有任何值。在你的情况下 if (lastOne) {//do stuff} 就足够了：

var lastOne;

function selection(event) {
    event.target.style.width = "150px";

    if (lastOne) {
      lastOne.style.width = "50px";
    }
    current = event.target.id;
    lastOne = document.getElementById(current);
}

img {
  width: 100px;
  max-width: 150px;
  height: auto;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" id="pic1" onclick="selection(event)">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" id="pic2" onclick="selection(event)">

Javascript 问题管理变量

Javascript issue managing variables

html

javascript

var