How to run a loop once at a time javascript

Question

I'm pretty new to Javascript and I have an issue i can't seem to resolve. I would like to get user inputs from the same input text field and then place them in an array. First input goes in the array[0] position second in the array[1] position and so on. My setup is below but i have no success.

    <!DOCTYPE html>

    <html>
    <head>
    <title>Save Session</title>
    </head>

    <body>

    <form>
        <input type = "text" id = "testInput"></input>
        <input type = "button" value = "Make Array" onClick = "makeArray()">       </input>
        <input type = "button" value = "See Result" onClick = "seeResult()"></input>
    </form>

    <script type = "text/javascript">

        function makeArray(){

            var userInput = document.getElementById("testInput").value;

            sessionArray = [];

            for(i = 0; i < 5; i++){
                sessionArray[i] = userInput;
                break;
            }

            return sessionArray;
        }

        function seeResult(){

            alert(makeArray())
        }
    </script>
</body>

Try making i a global variable and do not reset it to 0 each time. That may give you a hint or two. (Check to ensure that the value of i doesn't get too high though...) — rhughes
– rhughes, Commented Feb 15, 2015 at 22:12
One problem with your script is that you set sessionArray every time you click on the makeArray or seeResult. buttons. — Zlatko
– Zlatko, Commented Feb 15, 2015 at 22:33

The_Black_Smurf · Accepted Answer · 2015-02-15 22:58:00Z

1

A for loop isn't what should be used here because you'll end up with 5 identical values. You probably want the user to be able to provide 5 different values (using the same input) so you'll have to determine when you want to add those values (on a button click or any other event).

Once you have determined the right event, you'll have to push the input value in a global array variable. If you want to limit your array to 5 items, then check the array length before pushing any value to make sure it's < 5.

Note that I didn't provide any code on purpose because you still have to learn some programming basics... writing the code for you wouldn't help you.

edited Feb 15, 2015 at 22:58

answered Feb 15, 2015 at 22:21

The_Black_Smurf

5,29714 gold badges58 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kasper Taeymans · Accepted Answer · 2015-02-15 22:23:44Z

0

jsfiddle demo

html

<input type = "text" id = "testInput"></input>
<input type = "button" value = "Add Array" onclick = "addArray();">       </input>
<input type = "button" value = "See Result" onclick = "seeResult();"></input>

js

var result=[];
function addArray(){
    var userInput = document.getElementById("testInput").value;
    result.push(userInput);
    document.getElementById("testInput").value="";
}

function seeResult(){
    alert("the result  array contains: "+result+"\nResults will get removed");
    result=[];//empty result array
}

answered Feb 15, 2015 at 22:23

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

Comments

jd182 · Accepted Answer · 2015-02-15 22:27:45Z

0

I think this is what you want. Each time the button is pressed it takes the value of the input and adds it into the sessionArray and then clears the input.

I also moved the code where you select the input outside of the function. The input will only be selected once now as opposed to every time the function runs.

<script type = "text/javascript">

   // Define vars
   var sessionArray = [];
   var inputEl = document.getElementById("testInput");

    function makeArray(){

        // Get input value
        inputValue = inputEl.value;

        // Add input value to array
        sessionArray.push(inputValue);

        // Empty input ready for next item
        inputEl.value = '';           
    }

    function seeResult(){

        alert(sessionArray)
    }
</script>

edited Feb 15, 2015 at 22:27

answered Feb 15, 2015 at 22:21

jd182

3,2706 gold badges24 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to run a loop once at a time javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related