我不知道如何将用户的输入附加到 Javascript 中的数组中答案

【问题标题】：I can't figure out how to append a user's input into an array in Javascript我不知道如何将用户的输入附加到 Javascript 中的数组中
【发布时间】：2020-03-09 01:19:22
【问题描述】：

我正在处理一项任务，我需要在其中创建 javascript 代码以允许用户输入内容并将其附加到数组中。这是 HTML：

<html lang="en">
  <head>
    <title>Magic 8 Ball!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/style.css">
  </head>  
  <body>
    <div class="container">
        <h1>Magic 8 ball</h1>
        <h2>Ask your question, then click on the button!</h2>
        <div class="eightBall">
            <div id="output">
                <p id="result">8</p>
            </div>
        </div>
        <div class="inpBox">
            <input type="text" id="inputBox"></input>
            </div>
        <div class="buttons">
            <button id = "addButton" type="button">Add</button>
            <button type="button">Custom</button>
            <button id = "defaultButton" type="button">Default</button>
            <button id = "Ask" type="button">Ask</button>
        </div>
    </div>
  </body>
  <script src="js/main.js"></script>
</html>

还有 Javascript：

console.log(defaultList)
var customList = [""]
var inputText = document.getElementById("inputBox")
console.log(customList);
document.getElementById("addButton").addEventListener("click", function(){
    customList.push(inputText);
    console.log(customList);
});

一切正常，除了当我检查控制台日志以查看 customList 的值时，它带来的是实际的输入框本身，而不是其中的文本。控制台日志的图像： https://imgur.com/a/AiV4hRM 我只需要用户输入一些我将附加到空数组的文本。它不采用用户输入的文本，而是采用实际的输入框。

【问题讨论】：

标签： javascript html arrays input user-input

【解决方案1】：

您需要从value 属性中获取输入的值。

下面的代码只会返回对输入的引用而不是值。

var inputText = document.getElementById("inputBox");

要获取input的值，需要从value属性中获取。

var inputText = document.getElementById("inputBox");
console.log(inputText.value);

工作示例：

let customList = []
let inputText = document.getElementById("inputBox")
console.log(customList);
document.getElementById("addButton").addEventListener("click", function() {
    let inputValue = inputText.value;
    if (inputValue) {
        customList.push(inputValue);
        console.log(customList);
    }

});

    <input type="text" id="inputBox">
    <button type="button" id="addButton">Click me</button>

【讨论】：

【解决方案2】：

您非常接近，只是缺少获取文本框的value 属性。请参阅下面的工作示例。

var customList = [""]
var inputText = document.getElementById("inputBox")
console.log(customList);
document.getElementById("addButton").addEventListener("click", function(){
    customList.push(inputText.value);
    console.log(customList);
});

<input id="inputBox" />
<button id="addButton">Add</button>

【讨论】：