用户输入后多次使用内部Html的方法？答案

【问题标题】：Way to use inner Html multiple times after user input?用户输入后多次使用内部Html的方法？
【发布时间】：2020-02-29 16:41:56
【问题描述】：

有没有办法可以在下面做这样的事情？

function start(){
var action = document.getElementById("html_input_box").value;
document.getElementById('textarea').innerHTML = "Would you like to begin?";
if (action == "start"){
document.getElementById('textarea').innerHTML = "Welcome, you have begun."
}
}

start();

有没有办法在用户输入多次后使用innerHTML？

【问题讨论】：

“多次使用innerHTML”是什么意思？这段代码没有按预期工作怎么办？
如果你的意思是第二个文本会覆盖第一个文本，那么你用'+='代替'='就足够了。这样，您将在底部附加文本
您要将 HTML 附加到 textarea 吗？

标签： javascript html innerhtml

【解决方案1】：

我就是这样处理的..

HTML

<input id="html_input_box" onkeyup="start()" />
<textarea id="textarea"></textarea>

function start(){
var action = document.getElementById("html_input_box").value;
document.getElementById('textarea').innerHTML = "Would you like to begin?";
if (action == "start"){
document.getElementById('textarea').innerHTML += "Welcome, you have begun."
  }
}

通过添加 onkeyup() 事件并将 start() 作为处理程序传递给 输入字段，textarea strong> 字段将 'Welcome, you have started' 使用附加运算符 '+=' 附加到已经存在的文本当且仅当 'html_input_box' 的值为 'start'，除 'start' 以外的任何值都将采用原始/前 '您想开始吗？'

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

document.getElementById('textarea').innerHTML += action;

【讨论】：

【解决方案3】：

如果要追加textarea的innerHTML，可以使用+=追加操作符

function start(){
var action = document.getElementById('action').value;
document.getElementById('textarea').innerHTML = "Would you like to begin?";
if (action == "start"){
document.getElementById('textarea').innerHTML += " Welcome, you have begun."
}
}

<input type="text" id="action">
<textarea id="textarea" rows="4" cols="50">
</textarea>
<button onclick="start()">Click</button>

【讨论】：