Я не могу понять, как добавить вход пользователя в массив в Javascript - PullRequest
Новая
       24

Я не могу понять, как добавить вход пользователя в массив в Javascript

3 голосов
/ 09 марта 2020

Я работаю над заданием, в котором мне нужно создать код 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 Мне просто нужно, чтобы пользователь ввел какой-то текст, который я добавлю в пустой массив. Он не принимает текст, введенный пользователем, а принимает фактическое поле ввода.

Ответы [ 2 ]

2 голосов
/ 09 марта 2020

Вы довольно близки, вам просто не хватает того, чтобы получить атрибут 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>
2 голосов
/ 09 марта 2020

Вам необходимо получить значение ввода из атрибута value.

Приведенный ниже код просто возвращает ссылку на вход, а не значение. 

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

Чтобы получить значение input, необходимо получить его из атрибута значения. 

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