function add() numbers with prompt

Question

I want to simple add number code using prompt

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>

score 1 · Answer 1 · answered Mar 25 '18 at 00:24

1

I defined the function from an IIFE so counter doesn't pollute global scope - then, just return the function, no need for anything more complicated

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

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

answered Mar 25 '18 at 00:24

CertainPerformance

356,069
52
309
320

Avoiding global scope pollution is very worthy. Unfortunately, this creates a global variable named `myFunction`. To fix that, register the handler from JavaScript – Aluan Haddad Mar 25 '18 at 00:44
@AluanHaddad Or, just place all of the code in an IIFE. – Scott Marcus Mar 25 '18 at 00:47
@ScottMarcus right. Your answer wrapped in an IIFE is the right way. – Aluan Haddad Mar 25 '18 at 00:48

Scott Marcus · Accepted Answer · 2018-03-25T00:37:50.927

Your code is more complicated than it need be. There is no need for a nested function to do the math. You must also convert the user-supplied data to a number (this can be done by prepending a + to the data).

Also, your code does not follow best-practices and standards.

See the comments in the code below.

// 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>

Ele · Answer 3 · 2018-03-25T00:47:00.433

0

The main problem is the creation of the function add in every click event.
Just put it outside from the function myFunction.
You need to convert to number the entered value, i.e using the operator +.

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>

Recommendation:

Use the function addEventListener to bind the event 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>

edited Mar 25 '18 at 00:47

answered Mar 25 '18 at 00:27

Ele

33,468
7
37
75

There's only one button. Why use `.getElementsByTagName()` (which not only scans the whole DOM for elements, but is a live node list so it scans again every time the variable is accessed) and then loop though a list that contains just one element? – Scott Marcus Mar 25 '18 at 00:40
@ScottMarcus It's just an example! – Ele Mar 25 '18 at 00:43
Ok, but maybe point out what you are showing so that the OP understands when it might be beneficial? – Scott Marcus Mar 25 '18 at 00:43
Hmmm. Sorry to hound you, but you don't need `.getElementsByTagName()` and `for/of` to demonstrate `.addEventListener()`. A newbie is going to think this is the way to handle setting up a listener for just one element. – Scott Marcus Mar 25 '18 at 00:45

function add() numbers with prompt

3 Answers3