Estoy trabajando en una misión en la que necesito para crear el código javascript para permitir que un usuario introduzca algo y tiene que ser añadido a una matriz. Este es el código 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>
Y el 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);
});
Todo funciona correctamente excepto cuando puedo comprobar el registro de la consola para ver qué valor tiene la CustomList, que trae la caja de entrada real en sí y no el texto del interior de la misma. Una imagen del registro de la consola: https://imgur.com/a/AiV4hRM sólo necesito que el usuario introduzca un texto que voy a anexar a una matriz vacía. No está tomando el texto que el usuario introduce, en lugar de tomar la caja de entrada real.
Es necesario para obtener el valor de la entrada del value
atributo.
El código de abajo simplemente devolverá la referencia a la entrada no el valor.
var inputText = document.getElementById("inputBox");
Para obtener el valor de la input
, que necesita para conseguirlo del atributo de valor.
var inputText = document.getElementById("inputBox");
console.log(inputText.value);
Ejemplo de trabajo:
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>