gpt4 book ai didi

Javascript 将输入文本移动到另一个标签中

转载 作者:行者123 更新时间:2023-12-03 06:54:36 29 4
gpt4 key购买 nike

我正在尝试获取一个值(一个字母),然后将该值移动到文档中的另一个位置。因此,如果在文本框中输入“t”,我想将输入的值移动到 <p> 中。标签就在上面?我不确定如何更具描述性,因此我在下面包含了我的 html 和 javascript 代码。

仅供引用,我在一个编程训练营中,我们使用纯 Javascript 来完成这项作业,而不是 JQuery,而且我对此也完全陌生,所以如果这是一个愚蠢的问题,请原谅我。这是我到目前为止所拥有的

`

<!DOCTYPE html>
<html>
<body>

<h1>The Psychic Game</h1>
<h2>Guess what letter I'm thinking of.</h2>
<h3 id="wins">Wins:</h3>
<h3 id="losses">Losses:</h3>
<h3 id="guess">Guess Left:</h3>
<h3 id="guess_num">Your Guesses so Far: <p id="guess_val"> </p></h3>
<form>
<input type="text" name="guess_letter" value="">
</form>
</body>

</html>`

`var guessLetter = document.getElementById("guess_letter");

function letterPick(guessLetter){

}

`

最佳答案

我在这里所做的是将我们将使用的两个元素保存到变量中。然后我将 keyup 事件监听器添加到输入字段。每次按下键时,我们都希望更改 p 标签的 innerHTML

<!DOCTYPE html>
<html>
<body>

<h1>The Psychic Game</h1>
<h2>Guess what letter I'm thinking of.</h2>
<h3 id="wins">Wins:</h3>
<h3 id="losses">Losses:</h3>
<h3 id="guess">Guess Left:</h3>
<h3 id="guess_num">Your Guesses so Far: <p id="guess_val"> </p></h3>
<form>
<input type="text" name="guess_letter" value="">
</form>
<script>
var input = document.querySelector('[name="guess_letter"]');
var p = document.getElementById('guess_val');

input.addEventListener('keyup', (e) => {
p.innerHTML = e.currentTarget.value;
});
</script>
</body>
</html>

var input = document.querySelector('[name="guess_letter"]');
var p = document.getElementById('guess_val');

input.addEventListener('keyup', (e) => {
p.innerHTML = e.currentTarget.value;
});
<!DOCTYPE html>
<html>
<body>

<h1>The Psychic Game</h1>
<h2>Guess what letter I'm thinking of.</h2>
<h3 id="wins">Wins:</h3>
<h3 id="losses">Losses:</h3>
<h3 id="guess">Guess Left:</h3>
<h3 id="guess_num">Your Guesses so Far: <p id="guess_val"> </p></h3>
<form>
<input type="text" name="guess_letter" value="">
</form>

</body>

</html>

关于Javascript 将输入文本移动到另一个标签中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37331697/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com