Javascript问题管理变量

Question

下面是我试图用我的代码：

1. 单击具有selection()函数的元素。
2. 函数设置元素的宽度。
3. 函数选择之前单击item (也具有select()函数)
4. 函数更改前一个元素的宽度

这是我的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)">

​