Loop by user input problems?

Question

I'm trying to make a small program to take 3 user inputs, and make a loop out of it. For example, user says he wants to start from the number 5 up to the number 25 and count by 5, so the program will execute : "5 10 15..."

But I seem to fail and I couldn't find what I'm doing wrong.

HTML/JS

    <!DOCTYPE HTML>
<html>

<head>
    <title>Counter</title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <h1>The Counter</h1>
    <form>
        <fieldset>
            <label for="firstNum"> Start from </label>
            <input type = "text" id = "firstNum"> </input>
            <label for="lastNum"> Up to </label>
            <input type="text" id="lastNum"> </input>
            <label for="countBy"> Count By </label>
            <input type= "text" id="countBy"> </input> </br>

            <button onclick = "startCount()" type = "button"> Start the Counter! </button>
        </fieldset>
    </form>
    <p id="loopHere"></p>
    <script>

    function startCount() {
    var firstNum = document.getElementById("firstNum");
    var lastNum = document.getElementById("lastNum");
    var countBy = document.getElementById("countBy");//finish getElements

    var a = firstNum.value;
    var b = lastNum.value;
    var c = countBy.value;//finish getting values

    for(i = a; i <= b; i += c) {
        document.write(i + "</br>");
    }//finish loop

    }//finish function startCount()

    </script>
</body>

</html>

CSS

  fieldset {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
input {
    width: 20%;
    color: red;
}
h1 {
    text-align: center;
}
button {
    margin-left: auto;
    margin-right: auto;
}

Thanks.

You should not use document.write after the page load! – epascarello Sep 22 '14 at 13:19 — epascarello, Sep 22 '14 at 13:19

score 1 · Accepted Answer · answered Sep 22 '14 at 12:50

1

value property in DOM returns String value, not Int. So you need to convert them to integers:

var a = parseInt( firstNum.value, 10 );
var b = parseInt( lastNum.value, 10 );
var c = parseInt( countBy.value, 10 ); //finish getting values

answered Sep 22 '14 at 12:50

antyrat

27,479
9
75
76

score 0 · Answer 2 · answered Sep 22 '14 at 12:52

0

Your string values can be cast to int. The for loop check for mathematics conditions:

var a = 1 * firstNum.value;
var b = 1 * lastNum.value;
var c = 1 * countBy.value;

answered Sep 22 '14 at 12:52

Nicolas Albert

2,586
1
16
16

Hotted24 · Answer 3 · 2014-09-22T13:52:04.673

-3

Did you check the "a,b,c" var type ?

Try your code with :

for(i = eval(a); i <= eval(b); i += eval(c))

EDIT : See comments

parseInt IS better in this case, but would be problematic if he tried with something else than numbers, that's why, as it seems to be for langage exploring purpose, I chose to point eval =)

Else than numbers ex : (1+1), (customVar*2) ....

edited Sep 22 '14 at 13:52

answered Sep 22 '14 at 12:50

Hotted24

502
3
8

1

Don't use `eval` in your code. This is very bad. And this case even worse as it's uses user input value – antyrat Sep 22 '14 at 12:52
Sure, but IMHO parseInt is even worse =) I believe it's for testing purpose, so what he's getting is not really dangerous =) – Hotted24 Sep 22 '14 at 12:54
@Hotted24 why parseInt even worse? – antyrat Sep 22 '14 at 12:54
May I ask what is the problem with Eval? – TheUnknown Sep 22 '14 at 12:55
It executes javascript from script. So if user will write in your input "alert('XSS')" it will be executed. This will not change var type, it just executes JavaScript. look at this answer of why eval ia evil http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – antyrat Sep 22 '14 at 12:56
Ah, I see thank you. So you say it's better to use the parseInt function instead like you wrote in your comment, I'll take that to mind. Thank you all for your help. I never knew that calling value returns a string. Thanks ^-^ – TheUnknown Sep 22 '14 at 13:00
using eval to change a string to a number is like using a sledge hammer to open a window. It works, but there are better ways of doing it. – epascarello Sep 22 '14 at 13:32
@epascarello You're right, but the context, I think, of a test like this allow us to use this hammer =) parseInt IS better in this case, but would be problematic if he tried with something else than numbers, that's why i chose to point eval =) – Hotted24 Sep 22 '14 at 13:50

Loop by user input problems?

HTML/JS

CSS

3 Answers3