使用 onclick 函数更改 textarea 的值

Question

我是 Javascript 新手。当我按下 Goodbye 按钮时，我无法更改 textarea 的值。但是当我点击你好它工作正常！第二次按下时，你能帮忙改变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>

Answer 1

您的goodbye 和hello 输入字段具有相同的id - 当调用您的myFunction 时，text 变量将始终是您的第一个input 的值。

您必须为每个 input 使用不同的 ID，您可以为每个按钮分别处理 click 事件。

function handleHelloClick() {
  var text = document.getElementById("text-hello").value;
  setTextarea(text);
}

function handleGoodbyeClick() {
  var text = document.getElementById("text-goodbye").value;
  setTextarea(text);
}

function setTextarea(text) {
  document.getElementById("myTextarea").value = text;
}

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

<input id="text-hello" type="text" value="Hello" name="text" /><br />
<button type="button" onclick="handleHelloClick()">hello</button><br />

<input id="text-goodbye" type="text" value="Goodbye" name="text" /><br />
<button type="button" onclick="handleGoodbyeClick()">Gooodbye</button>

Answer 2

您不能有两个具有相同 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>

Answer 3

对于不同的输入，您应该有不同的 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>

你可以从学习 JavaScript 开始：https://javascript.info/

Answer 4

具有相同 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>

Answer 5

在 JavaScript 中，当您将相同的 ID 分配给两个不同的元素，然后尝试使用 document.getElementById() 获取元素时，它将仅获取与 ID 名称匹配的第一个元素。

因此，您可以为再见元素分配不同的 ID。此外，您可以使用不同的函数来处理两个不同的按钮点击。

请查看下面的示例。

console.log(document.getElementById("text"));

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

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


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

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

Answer 6

两次使用 id 绝不是一个好主意。

function myHelloFunction() {
    var text =document.getElementById("hello-button").value;
    document.getElementById("myTextarea").value=text;
};
  function myGoodbyeFunction() {
    var text =document.getElementById("goodbye-button").value;
    document.getElementById("myTextarea").value=text;
}

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

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