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

的 Addword（）

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

空输入

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

显示字词

您只需使用join()即可显示数组

＆＃13;
＆＃13;
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(' - '); }
＆＃13;
#error { color: tomato; } #words { color: purple; }
＆＃13;
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>
＆＃13;
＆＃13;
＆＃13;

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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: