将用户输入添加到数组 // Javascript

Question

这是我到目前为止的代码。当用户在输入框中输入一个单词时，我希望通过Add Word 按钮将该单词存储在一个数组中。输入多个单词后，用户单击Process Word 按钮，我希望数组中的所有单词都出现。我该怎么做？也有人能解释一下为什么在输入框中没有输入任何内容时不会出现“字段为空”吗？

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

1. Addword()

您的函数包含一个数组arrword。如果将其保留在函数中，则每次调用该函数时都会重置它。您需要将您的单词数组保留在函数之外

1. 空输入

当您单击添加单词按钮时，应该会显示空输入消息。检查输入并在需要时显示消息

1. 显示词

您可以简单地使用join() 来显示您的数组

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

你可以用 jQuery 做一些更清晰的事情！ :)

如果您使用 jquery 处理输入，您可以编写如下内容：

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

要将 jquery 添加到您的 html 页面，只需添加 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 在您的 html 标头中

Answer 3

希望您已经拥有正确的 html。然后你可以像下面这样修改你的脚本：

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