Hinzufügen von Benutzereingabe zu Array // Javascript

Question

Dies ist der Code, den ich bisher habe. Wenn der Benutzer ein Wort in das Eingabefeld eingibt, möchte ich, dass dieses Wort über die Schaltfläche Add Word in einem Array gespeichert wird. Sobald eine Anzahl von Wörtern eingegeben wurde, klickt der Benutzer auf die Schaltfläche Process Word und ich möchte, dass alle Wörter im Array angezeigt werden. Wie würde ich das tun? Könnte auch jemand erklären, warum, wenn nichts in das Eingabefeld eingegeben wird "Feld ist leer" nicht erscheint?

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

Answer 1

Sie können mit jQuery etwas klarer machen! :)

, wenn Sie die Eingabe mit jquery behandeln Sie so etwas wie schreiben:

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

hinzufügen jquery Ihre HTML-Seite, nur <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> in Ihrem HTML-Header hinzufügen

Answer 2

1. Addword()

Ihr func tion enthält ein Array arrword. Wenn Sie es in Ihrer Funktion behalten, wird es bei jedem Aufruf der Funktion zurückgesetzt. Sie benötigen eine Reihe von Wörtern außerhalb der Funktion

zu halten

1. Leere Eingabe

Die leere Eingabemeldung angezeigt werden soll, wenn Sie auf das Wort Hinzufügen klicken Taste. Überprüfen Sie die Eingabe und eine Meldung angezeigt, wenn nötig

3. Anzeigewort

Sie einfach join() verwenden, können Sie 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>

anzuzeigen

Answer 3

Hoffentlich haben Sie bereits das richtige HTML. Dann können Sie Ihr Skript wie unten ändern:

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