使用 onclick function 更改 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 名稱匹配的第一個元素。

因此，您可以為 goodbye 元素分配不同的 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 絕不是一個好主意。 如果您調用 document.getElementById("some-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>