函数 add() 带提示的数字

Question

我想使用提示简单地添加数字代码

function myFunction() {
  var x = prompt("");
  var add = (function () {
    var counter = 0;
    return function () {return counter += x;}
  })();
  document.getElementById("demo").innerHTML = add();
}

<button onclick="myFunction()">+</button>
<p id="demo"></p>

Answer 1

我从 IIFE 定义了函数，所以 counter 不会污染全局范围 - 然后，只是 return 函数，不需要任何更复杂的东西

const myFunction = (() => {
  let counter = 0;
  return () => {
    counter += Number(prompt('Number?'));
    document.getElementById("demo").innerHTML = counter;
  };
})();

<button onclick="myFunction()">+</button>
<p id="demo"></p>

Answer 2

您的代码比需要的更复杂。不需要嵌套函数来进行数学运算。您还必须将 user-supplied 数据转换为数字（这可以通过在数据前添加 + 来完成）。

此外，您的代码不符合 best-practices 和标准。

查看下面代码中的注释。

// Get references to the HTML elements you'll use in JavaScript
var btn = document.getElementById("btn");
var output = document.getElementById("demo");
var counter = 0; // Running total will be here

// Set up event handling in JavaScript, not HTML
btn.addEventListener("click", function() {
  counter += +prompt("What is the number to add?"); // Convert response to number and add to counter
  output.textContent = counter; // Place result back into the document (use .textContent, not .innerHTML)
});

<button id="btn">+</button>
<p id="demo">0</p>

Answer 3

主要问题是在每个点击事件中创建函数 add。
把它放在函数外面就行了 myFunction.
您需要将输入的值转换为数字，即使用运算符 +.

var add = (function() {
  var counter = 0;
  return function(x) {
    return counter += +x;
  }
})();

function myFunction() {
  var x = prompt("");
  document.getElementById("demo").innerHTML = add(x);
}

<button onclick="myFunction()">+</button>
<p id="demo"></p>

建议：

使用函数addEventListener绑定事件click.

// This is to illustrate the usage of 'addEventListener'.
// The function getElementsByTagName gets the whole set of elements button.
// In your case it doesn't make sense because you have only one.
// Like I said, this is just to illustrate.
var buttons = document.getElementsByTagName('button');
for (var btn of buttons) btn.addEventListener('click', myFunction);

//-----------

var add = (function() {
  var counter = 0;
  return function(x) {
    return counter += +x /*Convert to number*/;
  }
})();

function myFunction() {
  var x = prompt("");
  document.getElementById("demo").textContent = add(x);
}

<button>+</button>
<p id="demo"></p>

函数 add() 带提示的数字

function add() numbers with prompt

javascript

prompt

function

add