Adding Numbers Based On User Input


#1

Hello,

I’m new to JS and am trying to figure out a couple of issues I’m having.
1.) I have to use a for loop where I prompt a user for a number and it adds up all preceding numbers (ex. inputs 5 so the program runs 1+2+3+4+5). I’m putting a limit of going up to 100. When I run it, it just repeats the number inputted and doesn’t add them up.
2.) The second issue I’m having is I need to create an onclick prompt, but nothing is coming up when I click on the button.

HTML Code:

Welcome to JavaScript

Insert any number below 100 and it will add up everything below it including your inputted number

Click Here

JS Code:
function firstexercise() {
var total = 0;
for (var num = 1; num <= 100; num++) {
total = total + num;
}
}


#2
function series() {
    n = +prompt("Enter a number less that 100");
    total = 0
    for (var i = 1; i <= n; i++) {
        total += i;
    }
    return total;
}

This won’t be a solution, but you can fashion one from it. You will not be familiar with +, the unary operator. It is a quick and easy was of coercing string representations of a number, to a number.
prompt returns a string and we need a number for our loop.

+= is an addition assignment operator that does in short form what your statement does. The value is added to the current amount and then reassigned back on to the same variable.

Remember to call the function and log the return,

console.log(series());

#3

So, I’m thinking the html code should be: image
and JS code will be:

function exercise1() {
var userNumber = +prompt(“Enter a number less than or equal to 100”);
var total = 0
for (var i = 1; i <= 100; i++) {
total += i;
}
return total;
}
console.log(exercise1())

However, when I do that the prompt pops up first when it should show a click here first button which then asks for a prompt.


#4

If you’re writing this behind HTML, then the browser window will be where to display the result, not the console, as the use cannot see that. What’s more, since it is in a browser window then a form control would be the way to get user input, not a prompt dialog.

<body>
<div>
  <input type="number" id="number">
  <button id="enter">Enter</button>
  <input id="result" type="text" value="" readonly>
</div>
</body>

Then in the JS,

const number = document.querySelector('#number');
const enter = document.querySelector('#enter');
const result = document.querySelector('#result');

const series = () => {
    var n = number.value;
    var total = 0;
    for (let i = 1; i <= n; i++) {
        total += i;
    }
    result.value = total;
};

enter.addEventListener('click', series);

And that is that. No onclick attribute, no prompt()., no console.log().

complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Series</title>
</head>
<body>
<div>
  <input type="number" id="number">
  <button id="enter">Enter</button>
  <input id="result" type="text" value="" readonly>
</div>
<script>
const number = document.querySelector('#number');
const enter = document.querySelector('#enter');
const result = document.querySelector('#result');

const series = () => {
    var n = number.value;
    var total = 0;
    for (let i = 1; i <= n; i++) {
        total += i;
    }
    result.value = total;
};

enter.addEventListener('click', series);
</script>
</body>
</html>

Mathematically there is a simpler way to add a sequence:

let n be the number of terms in the sequence
let a be the first term
let z be the last term
let s be the sum of the sequence (series)

so that,

s = (a + z) * n / 2

Try it.

a = 1
z = 100
n = 100

(1 + 100) * 100 / 2 =>
101 * 50 =>
5050

#5

Thank you very much! That’s a much more straightforward approach then what I was trying to do.


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.