Include user input to an array in Javascript

Question

Include user input to an array in Javascript

I have a code snippet that allows users to enter words into an input box and store them in an array by clicking the Add Word button. Once multiple words have been entered, users can click the Process Word button to display all the words from the array. I need help with implementing this functionality efficiently. Additionally, I'm curious why the message "Field is empty" doesn't appear when nothing is entered in the input box.

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

Answer 1

Answer №1

Implement addWord() function

The function should include an array arrword. It is important to declare this array outside the function so that it retains its values between function calls.

Dealing with empty input

If the user clicks on the Add word button without entering any text, a message for empty input should be displayed. Ensure to check the input field and handle empty inputs appropriately.

Displaying words in the array

To display the words stored in the array, you can utilize the join() method.

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>

Answer 2

Implement addWord() function

The function should include an array arrword. It is important to declare this array outside the function so that it retains its values between function calls.

Dealing with empty input

If the user clicks on the Add word button without entering any text, a message for empty input should be displayed. Ensure to check the input field and handle empty inputs appropriately.

Displaying words in the array

To display the words stored in the array, you can utilize the join() method.

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>

Answer 3

Answer №2

Enhance your code with jQuery for a smoother experience! :)

If you choose to work with input using jQuery, consider the following approach:

var wordArray = [] // array to store words

/* Adding a click event listener to your "Add Word" button to
trigger the function when clicked by the user */
$("#addWordButtonID").on("click", function () {
  var wordEntered = $('#textInputID').val() // variable to capture user input

  if (wordEntered.length !== 0) { // condition to check if input is not empty
    wordArray.push(wordEntered)  // adding typed word to the array
  }
})

To include jQuery in your HTML page, simply insert

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

in the header section of your HTML file

Answer 4

Enhance your code with jQuery for a smoother experience! :)

If you choose to work with input using jQuery, consider the following approach:

var wordArray = [] // array to store words

/* Adding a click event listener to your "Add Word" button to
trigger the function when clicked by the user */
$("#addWordButtonID").on("click", function () {
  var wordEntered = $('#textInputID').val() // variable to capture user input

  if (wordEntered.length !== 0) { // condition to check if input is not empty
    wordArray.push(wordEntered)  // adding typed word to the array
  }
})

To include jQuery in your HTML page, simply insert

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

in the header section of your HTML file

Answer 5

Answer №3

Make sure your HTML is correct before proceeding with the script adjustments:

<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()">Process Words</button>
<input type="text" id="userinput" value="" />
<div id="message2">
    
</div>
<div id="message">

</div>

Answer 6

Make sure your HTML is correct before proceeding with the script adjustments:

<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()">Process Words</button>
<input type="text" id="userinput" value="" />
<div id="message2">
    
</div>
<div id="message">

</div>

Include user input to an array in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

What is the best MySQL data type for storing JavaScript code with PHP?

Using DataTable with backend processing

Error: The URI you are trying to access is restricted and access has been denied

The Highcharts Angular Chart fails to update after the renderer.button event is triggered

Data not being properly set in the form

Switch out the second to last symbol

What is the best way to bring my file into app.js using JavaScript?

Attempting to load an image through an AJAX Request may prove to be unsuccessful

Encountering the error message 'XMLHttpRequest is not defined' while incorporating getServerSideProps() in NextJS

Angular $http.get: How to handle errors effectively?

The script is malfunctioning on Google Chrome

Using jQuery with multiple selectors can become tricky when dealing with elements that may or may not be present

Utilize the table's checkboxes to select recipients for mail distribution

Is there a specific plugin that enables dynamic calculations within a django formset?

"Utilize JavaScript for graceful error handling in your project with

Using AngularJS to prevent HTML injection in input fields

Safari experiencing sporadic issues with reCAPTCHA AJAX API within modal dialogs

Having trouble setting $scope after redirecting to a partial template via routing

Javascript - Execute function after all nested forEach loops have finished running

When handling a document click event in Typescript, an error may occur where it cannot read