Add user input to array // Javascript

Question

This is the code I have so far. When the user enters a word into the input box, I want that word to be stored in an array via the Add Word button. Once a number of words have been entered, the user clicks the Process Word button and I want all the words in the array to appear. How would I do this? Also could someone also explain why when nothing is entered into the input box "field is empty" does not appear?

function begin() {
var word = "List of words";
  var i = returnword.length

if (userinput.length === 0) {
word = "Field is empty"

}
  document.getElementById('message2').innerHTML = word
  while (i--) {



   document.getElementById('message').innerHTML = returnword[i] + "<br/>" +     document.getElementById('message').innerHTML;


}
}

 function addword() {
  var arrword = [];
  returnword = document.getElementById('userinput').value;
  arrword.push(returnword);
}

Who is returnword ?

Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut

2017-04-20 07:24:50 +00:00
Commented Apr 20, 2017 at 7:24 — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Apr 20, 2017 at 7:24

Weedoze · Accepted Answer · 2017-04-20 07:35:32Z

Addword()

Your function contains an array arrword. If you keep it inside your function it will be reset every time you call the function. You need to keep your array of words outside the function

Empty input

The empty input message should be shown when you click on the Add word button. Check the input and display a message if needed

Display word

You can simply use join() to display you array

var arrayOfWord = [];
var inputElement = document.getElementById('userinput');
var errorElement = document.getElementById('error');
var wordsElement = document.getElementById('words');

function addWord() {
  errorElement.innerHTML = "";
  var word = inputElement.value;
  if (word.trim() === "")
    errorElement.innerHTML = "Empty input";
  else
    arrayOfWord.push(word);
  inputElement.value = "";  
}

function process(){
  words.innerHTML = arrayOfWord.join(' - ');
}

#error {
  color: tomato;
}

#words {
  color: purple;
}

Enter a word <input id="userinput" /><button onclick="addWord()">Add word</button>
<div id="error"></div>
<button onclick="process()">Process</button>
<div id="words"></div>

Manu · Accepted Answer · 2017-04-20 07:52:50Z

0

you can do something a bit clearer with jQuery! :)

if you handle the input with jquery you can write something like:

var arrWord = [] // your array

/* Attaching a click handler on your "Add Word" button that will
execute the function on user click */
$("#addWordButtonID").on("click", function () {
  var wordTyped = $('#textInputID').val() // your var that collect userInput

  if (wordTyped.length != 0) { // your if statement with length === 0 condition 
    arrWord.push(wordTyped)  // adding word typed to the array
  }
})

to add jquery to your html page, just add <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> in your html header

edited Apr 20, 2017 at 7:52

answered Apr 20, 2017 at 7:35

Manu

3961 gold badge5 silver badges14 bronze badges

Comments

Pankaj Shukla · Accepted Answer · 2017-04-20 07:57:39Z

0

Hopefully you already have the right html. Then you can modify your script like below:

<script>
    var arrword = [];
    var returnword;
    function begin() {
        var word = "List of words";
        var i = arrword.length;

        if (arrword.length === 0) {
            word = "Field is empty";
        }

        document.getElementById('message2').innerHTML = word;
        while (i--) {
            document.getElementById('message').innerHTML = arrword[i] + "<br/>" + document.getElementById('message').innerHTML;
        }
    }

    function addword() {
        returnword = document.getElementById('userinput').value;
        arrword.push(returnword);
    }
</script>

        var arrword = [];
        var returnword;
        function begin() {
            var word = "List of words";
            var i = arrword.length;

            if (arrword.length === 0) {
                word = "Field is empty";
            }

            document.getElementById('message2').innerHTML = word;
            while (i--) {
                document.getElementById('message').innerHTML = arrword[i] + "<br/>" + document.getElementById('message').innerHTML;
            }
        }

        function addword() {
            returnword = document.getElementById('userinput').value;
            arrword.push(returnword);
        }

<button id="addWord" onclick="addword()">Add Word</button>
    <button id="processWords" onclick="begin()">ProcessWords</button>
    <input type="text" id="userinput" value=" " />
    <div id="message2">
        
    </div>
    <div id="message">

    </div>

answered Apr 20, 2017 at 7:57

Pankaj Shukla

2,6722 gold badges13 silver badges18 bronze badges

2 Comments

Pankaj Shukla Over a year ago

If you notice, "field is empty" would appear only if array has no elements which means the words have not been added to the array and the user clicks on "Process Words". If you want "field is empty" at the time of clicking "Add Word" button then you have to write code in the "addWord()" function. Check for returnword and if it is empty show the error message.

Pankaj Shukla Over a year ago

Modify like this: function addword() { returnword = document.getElementById('userinput').value; if (returnword == " ") { word = "Field is empty"; document.getElementById('message2').innerHTML = word; } else { arrword.push(returnword); } }

Collectives™ on Stack Overflow

Add user input to array // Javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related