英文:
HTML: use a string variable to change a value in a block of text
问题
以下是翻译好的部分：
我想要显示一个文本块（"pre" 标签），允许用户在文本框中输入文本，然后单击按钮，他们输入的文本将显示在文本块中。
举个例子，文本块会显示："Hello USERNAME, welcome!"
我输入："seba1685"，然后单击按钮，显示："Hello seba1685, welcome!"
到目前为止，我已经有以下内容：
<input type="text" id="myText" value="USERNAME">
<p>在上面输入您的用户名</p>
<button onclick="myFunction()">试一试</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>
但是它不是在文本块中添加文本，而是替换整个文本块。我不知道如何在这个块中使用一个变量。
任何建议将不胜感激 - 谢谢！
英文:
I would like to display a block of text ("pre" tag), allow a user to type in a textbox, click a button and the text which they typed appears in the block of text.
For example, the block of text will say: "Hello USERNAME, welcome!"
I type: "seba1685", click the button to display: "Hello seba1685, welcome!"
Here is what I have so far:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
But instead of adding text to the block, it REPLACES the entire block. I don't know how to use a variable within this block.
Any ideas would be greatly appreciated - thank you!
答案1
得分: 3
把 <span> 放在 <pre> 块内部，然后只更新 <span> 而不是整个 <pre> 块。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("username").innerHTML = x;
}
<!-- language: lang-html -->
<input type="text" id="myText" placeholder="用户名">
<p>在上面输入您的用户名</p>
<button onclick="myFunction()">试一试</button>
<br>
<pre style="color: #000; background: #cccccc; padding: 10px; display: inline-flex" id="demo">你好 <span id="username">用户名</span>，欢迎！</pre>
<!-- end snippet -->
英文:
Put a span inside the pre block, and update that rather than the whole pre block.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("username").innerHTML = x;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论