时间戳

首页 > 解决方案 > 循环中的函数使用相同的变量

javascript - 循环中的函数使用相同的变量

问题描述

我正在尝试使用 JavaScript 制作一个计算器应用程序，并且我想要一个在按下按钮时调用的函数。这是我最近的尝试。

const buttonIDs = [
  '0',
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '*',
  '/',
  '+',
  '-',
  '.',
  '=']

for (var i = 0; i < buttonIDs.length; i++) {
  id = buttonIDs[i]
  button = document.getElementById(id)

  button.addEventListener('click', () => { buttonClicked(id) } )
}

function buttonClicked(id) {
  alert(id)
}
* {
  font-size: 100%;
  font-family: "Segoe UI",Arial,sans-serif;
  background-color: gray;
  outline: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.box {
  padding: 20px;
  background-color: #aaa;
  border-radius: 3px;
}

.box.result {
  grid-column:1/5;
}

button {
  border: 0px;
  cursor: pointer;
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Vanilla JavaScript Calculator</title>

</head>

<body>
  <div class="wrapper">
    <input type="text" name="result" id="result" value="" readonly class="box result"></input>
    <button id="7" type="button" class="box 7">7</button>
    <button id="8" type="button" class="box 8">8</button>
    <button id="9" type="button" class="box 9">9</button>
    <button id="/" type="button" class="box divide">/</button>
    <button id="4" type="button" class="box 4">4</button>
    <button id="5" type="button" class="box 5">5</button>
    <button id="6" type="button" class="box 6">6</button>
    <button id="*" type="button" class="box multiply">*</button>
    <button id="1" type="button" class="box 1">1</button>
    <button id="2" type="button" class="box 2">2</button>
    <button id="3" type="button" class="box 3">3</button>
    <button id="-" type="button" class="box subtract">-</button>
    <button id="0" type="button" class="box 0">0</button>
    <button id="." type="button" class="box decimal">.</button>
    <button id="=" type="button" class="box equals">=</button>
    <button id="+" type="button" class="box add">+</button>
  </div>
</body>
</html>

每当按下按钮时，我都会弹出一个显示“=”的弹出窗口。我认为这是因为当它遍历数组中的元素时，等号是最后被声明的东西，所以它会被记住。在 Python 中，我可以使用关键字参数lambda id=id: buttonClicked(id). JavaScript中有类似的东西吗？提前致谢。

标签： javascriptscope

解决方案

我去像这样修改了你的 JS 函数。它似乎工作...

请参阅下面的工作演示

for (var i = 0; i < buttonIDs.length; i++) {
  id = buttonIDs[i];
  var button = document.getElementById(id);
  button.addEventListener('click', buttonClicked);
}

function buttonClicked() {
  console.log(this.innerHTML);
}


const buttonIDs = [
  '0',
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '*',
  '/',
  '+',
  '-',
  '.',
  '='
];

for (var i = 0; i < buttonIDs.length; i++) {
  id = buttonIDs[i];
  var button = document.getElementById(id);
  button.addEventListener('click', buttonClicked);
}

function buttonClicked() {
  console.log(this.innerHTML);
}
* {
  font-size: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: gray;
  outline: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.box {
  padding: 20px;
  background-color: #aaa;
  border-radius: 3px;
}

.box.result {
  grid-column: 1/5;
}

button {
  border: 0px;
  cursor: pointer;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Vanilla JavaScript Calculator</title>

</head>

<body>
  <div class="wrapper">
    <input type="text" name="result" id="result" value="" readonly class="box result"></input>
    <button id="7" type="button" class="box 7">7</button>
    <button id="8" type="button" class="box 8">8</button>
    <button id="9" type="button" class="box 9">9</button>
    <button id="/" type="button" class="box divide">/</button>
    <button id="4" type="button" class="box 4">4</button>
    <button id="5" type="button" class="box 5">5</button>
    <button id="6" type="button" class="box 6">6</button>
    <button id="*" type="button" class="box multiply">*</button>
    <button id="1" type="button" class="box 1">1</button>
    <button id="2" type="button" class="box 2">2</button>
    <button id="3" type="button" class="box 3">3</button>
    <button id="-" type="button" class="box subtract">-</button>
    <button id="0" type="button" class="box 0">0</button>
    <button id="." type="button" class="box decimal">.</button>
    <button id="=" type="button" class="box equals">=</button>
    <button id="+" type="button" class="box add">+</button>
  </div>
</body>

</html>

推荐阅读