在js中创建输入文本后无法从用户那里获取值
[英]cant get the value from a user after creating an input text in js
问题描述
我需要帮助来编写创建输入元素的代码，然后通过单击按钮获取用户的输入。 我需要2个功能吗？ 一个用于创建元素，另一个用于游戏（？）。 我的主要问题是在创建输入后获取文本值。
我创建了一个元素，但我不知道如何“拉”出用户文本的值。
let btGame = document.querySelector("#game"); btGame.addEventListener('click', startGame) function startGame() { createGame(); } function createGame(textInputValue) { let gameBox = document.querySelector(".gameBox"); let textInput = document.createElement("input"); let btGuess = document.createElement("input"); textInput.type = "text"; textInput.id = "inputof"; textInput.setAttribute('placeholder', 'guess a number between 1-6'); btGuess.setAttribute('type', 'button'); btGuess.setAttribute('class', 'go'); btGuess.value = "guess"; gameBox.appendChild(textInput); gameBox.appendChild(btGuess); }
* { box-sizing: border-box; }.gameBox { width: 30%; text-align: center; border: 2px dotted #ffc452; }.gameTitle { font-family: cursive; font-style: oblique; cursor: pointer; }.gameTitle:hover { transition: 2s; font-size: 35px; color: gold; } #inputof { position: relative; width: 100%; margin-top: 50px; margin-bottom: 50px; text-align: center; }
<body> <div class="gameBox"> <h1 class="gameTitle">want to play a game?</h1> <input type="button" id="game" value="click here to start"> </div> </body>
2 个解决方案
解决方案1
2 2019-11-03 20:41:13
当createGame被调用时，为创建的btGuess添加一个事件监听器：
let btGame = document.querySelector("#game"); btGame.addEventListener('click', startGame) function startGame() { createGame(); } function createGame(textInputValue) { let gameBox = document.querySelector(".gameBox"); let textInput = document.createElement("input"); let btGuess = document.createElement("input"); textInput.type = "text"; textInput.id = "inputof"; textInput.setAttribute('placeholder', 'guess a number between 1-6'); btGuess.setAttribute('type', 'button'); btGuess.setAttribute('class', 'go'); btGuess.value = "guess"; gameBox.appendChild(textInput); gameBox.appendChild(btGuess); btGuess.addEventListener('click', () => { console.log('You inputted:', textInput.value); }); }
* { box-sizing: border-box; }.gameBox { width: 30%; text-align: center; border: 2px dotted #ffc452; }.gameTitle { font-family: cursive; font-style: oblique; cursor: pointer; }.gameTitle:hover { transition: 2s; font-size: 35px; color: gold; } #inputof { position: relative; width: 100%; margin-top: 50px; margin-bottom: 50px; text-align: center; }
<body> <div class="gameBox"> <h1 class="gameTitle">want to play a game?</h1> <input type="button" id="game" value="click here to start"> </div> </body>
解决方案2
0 2019-11-03 20:47:45
正如CertainPerformance 所说，在调用btGuess时向btGuess 添加一个事件监听器。 我使用了一个单独的 function 来管理游戏逻辑，并插入guessValue变量，其中包含单击guess按钮时要猜测的值
let btGame = document.querySelector("#game"); btGame.addEventListener('click', startGame); var guessValue; function startGame() { createGame(); guessValue = Math.floor(Math.random() * 6) + 1; console.log(guessValue); } function createGame(textInputValue) { let gameBox = document.querySelector(".gameBox"); let textInput = document.createElement("input"); let btGuess = document.createElement("input"); textInput.type = "text"; textInput.id = "inputof"; textInput.setAttribute('placeholder', 'guess a number between 1-6'); btGuess.setAttribute('type', 'button'); btGuess.setAttribute('class', 'go'); btGuess.value = "guess"; btGuess.addEventListener('click',() => play()) gameBox.appendChild(textInput); gameBox.appendChild(btGuess); } function play(){ let input = document.getElementById('inputof').value; console.log(input); if(input == guessValue){ alert('You Won') } else { alert('Game over') } } * { box-sizing: border-box; }.gameBox { width: 30%; text-align: center; border: 2px dotted #ffc452; }.gameTitle { font-family: cursive; font-style: oblique; cursor: pointer; }.gameTitle:hover { transition: 2s; font-size: 35px; color: gold; } #inputof { position: relative; width: 100%; margin-top: 50px; margin-bottom: 50px; text-align: center; }
<body> <div class="gameBox"> <h1 class="gameTitle">want to play a game?</h1> <input type="button" id="game" value="click here to start"> </div> </body>
无法从输入文本中获取文本值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.