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);
}

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);
}

• javascript
• arrays

Share Improve this question Follow edited Apr 20, 2017 at 11:27 Garrett Kadillak 1,06099 silver badges1818 bronze badges asked Apr 20, 2017 at 7:23 NathanNathan 3311 silver badge44 bronze badges 1

• Who is returnword ? – Mihai Alexandru-Ionut Commented Apr 20, 2017 at 7:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

1. 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

2. 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

3. 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>

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./ajax/libs/jquery/1.8/jquery.min.js"></script> in your html header

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>