Javascript 使用onclick函数更改textarea的值

我是Javascript新手。当我按下“再见”按钮时，无法更改textarea的值。但是当我点击hello时，它工作得很好！当第二次按下textarea时，您能帮助更改其值吗

Comment:<br>
<textarea id="myTextarea">
</textarea><br>

<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction()">Gooodbye</button>


<script>
function myFunction() {
    
    var text =document.getElementById("text").value;
    document.getElementById("myTextarea").value=text;
}
</script>

注释：





你好



再见
函数myFunction（）{
var text=document.getElementById（“text”）.value；
document.getElementById（“myTextarea”）.value=text；
}

您的

再见

和

你好

输入字段具有相同的

id

-当调用

我的函数

时，

文本

变量将始终是第一个

输入

的值

您必须为每个

输入使用不同的ID，您可以分别为每个按钮处理
单击事件


函数handleHelloClick（）{
var text=document.getElementById（“text hello”）.value；
setTextarea（文本）；
}
函数handlegoodbyclick（）{
var text=document.getElementById（“文本再见”）.value；
setTextarea（文本）；
}
函数setTextarea（文本）{
document.getElementById（“myTextarea”）.value=text；
}
注释：





你好



Gooodbye
不能有两个ID相同的元素。这就是它不起作用的原因

你会想要这样的东西

Comment:<br>
<textarea id="myTextarea">
</textarea><br>

<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction2()">Gooodbye</button>


<script>
function myFunction() {
    
    var text =document.getElementById("text").value;
    document.getElementById("myTextarea").value=text;

}
function myFunction2() {
    
    var text =document.getElementById("text2").value;
    document.getElementById("myTextarea").value=text;

}
</script>

注释：





你好



再见
函数myFunction（）{
var text=document.getElementById（“text”）.value；
document.getElementById（“myTextarea”）.value=text；
}
函数myFunction2（）{
var text=document.getElementById（“text2”）.value；
document.getElementById（“myTextarea”）.value=text；
}
对于不同的输入，您应该有不同的id。
对所有元素使用相同的ID是一种不好的做法

<textarea id="myTextarea">
</textarea><br>

<input id="hello-input" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('hello-input')">hello</button><br>
<input id="bye-input" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('bye-input')">Gooodbye</button>


<script>
function myFunction(inputId) {
    
    var text =document.getElementById(inputId).value;
    document.getElementById("myTextarea").value=text;
}
</script>






你好



再见
函数myFunction（inputId）{
var text=document.getElementById（inputId）.value；
document.getElementById（“myTextarea”）.value=text；
}

您可以从学习JavaScript开始：
具有相同id的两个输入不是正确的HTML，id在页面上应该是唯一的。
试试这个：

<textarea id="myTextarea">
</textarea><br>

<input id="text1" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('text1')">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('text2')">Gooodbye</button>


<script>
function myFunction(inputId) {
    
    var text = document.getElementById(inputId).value;
    document.getElementById("myTextarea").value=text;
}
</script>






你好



再见
函数myFunction（inputId）{
var text=document.getElementById（inputId）.value；
document.getElementById（“myTextarea”）.value=text；
}
在JavaScript中，当您将相同的ID分配给两个不同的元素，然后尝试使用
document.getElementById（）
获取元素时，它将仅获取与ID名称匹配的第一个元素

因此，您可能可以为再见元素分配不同的ID。此外，您还可以使用不同的功能来处理两次不同的按钮单击

请查看下面的示例


console.log（document.getElementById（“text”）
注释：





你好



再见
函数hello（）{
var text=document.getElementById（“hello”）.value；
document.getElementById（“myTextarea”）.value=text；
}
函数再见（）{
var text=document.getElementById（“再见”）.value；
document.getElementById（“myTextarea”）.value=text；
}
使用id两次从来都不是一个好主意


函数myHelloFunction（）{
var text=document.getElementById（“hello按钮”）.value；
document.getElementById（“myTextarea”）.value=text；
};
函数myGoodbyeFunction（）{
var text=document.getElementById（“再见按钮”）.value；
document.getElementById（“myTextarea”）.value=text；
}






你好



Gooodbye
我建议学习JavaScript。有一本好书：在HTML中不能多次使用同一个ID<代码>文档.getElementById（“文本”）.value
将始终选择找到的第一个元素。您不能使用具有相同id的两个元素。id必须唯一并且只能使用一次。@Naida我实际上正在学习itI understant。感谢阅读更多信息或查看来自的文档