javascript HTML:使用字符串变量更改文本块中的值

rt4zxlrg  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(115)

我想显示一个文本块("前"标记),允许用户在文本框中键入,单击按钮,他们键入的文本出现在文本块中。
例如,文本块将显示:"您好,用户名,欢迎!"
我输入:"seba1685",点击按钮显示:"你好seba1685,欢迎!"
以下是我目前掌握的情况:

<input type="text" id="myText" value="USERNAME">
<p>Enter your username above</p>
<button onclick="myFunction()">Try it</button>
<br>
<pre style="color: #000; background: #cccccc; padding:10px; display: inline-flex" id="demo">Hello USERNAME, welcome!</pre>

<script>
function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

但是它不是在块中添加文本,而是替换整个块。我不知道如何在这个块中使用变量。
任何想法将不胜感激-谢谢!

b4lqfgs4

b4lqfgs41#

在pre块中放置一个span,然后更新它而不是整个pre块。

function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("username").innerHTML = x;
}
<input type="text" id="myText" placeholder="USERNAME">
<p>Enter your username above</p>
<button onclick="myFunction()">Try it</button>
<br>
<pre style="color: #000; background: #cccccc; padding:10px; display: inline-flex" id="demo">Hello <span id="username">USERNAME</span>, welcome!</pre>

相关问题