Javascript问题管理变量答案

【问题标题】：Javascript issue managing variablesJavascript问题管理变量
【发布时间】：2018-06-18 17:41:39
【问题描述】：

这是我尝试使用我的代码：

单击具有 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)">

目前，它正在编辑点击的元素的宽度，但对前一个元素没有任何作用。

【问题讨论】：

如果你检查控制台，我很确定你会发现一个错误，因为在第一次执行函数时，lastOne 是未定义的，并且 javascript 在设置元素宽度后崩溃。
lastOne 在您尝试设置其样式属性时尚未分配给 DOM 元素。切换这些行。

标签： javascript html var

【解决方案1】：

一切正常，除了一件事：如果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)">

【讨论】：

【解决方案2】：

第一次调用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);
}

【讨论】：