Changing value of textarea using onclick function

Question

I am new to Javascript. I can not change value of textarea when I press Goodbye button. But When I click hello it is working fine! Can you help to change the value of textarea when it is pressed the second time.

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

Your goodbye and hello input fields has the same id - that when call your myFunction the text variable will always be the value of your first input.

You have to use different ids for each input the you can handle click events separately for each button.

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

You cannot have two elements with the same ID. This is why it does not work.

You will want something like this;

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

You should have different id's for different inputs. It's a bad practice to have same ID for all the elements.

<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>

You can start from learning JavaScript: https://javascript.info/

Answer 4

Two inputs with the same id is not a correct HTML, ids should be uniques on a page. Try this:

<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

In JavaScript when you assign the same ID to two different elements and then try to fetch an element using document.getElementById() it will fetch only the first element that matches the ID name.

So, you can probably assign a different ID to the goodbye element. Also, you can have different functions to handle two different button clicks.

Please check out the example below.

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

It's never a good idea to use an id twice. If you call document.getElementById("some-id") the browser will return the first element it finds. So the browser will never return the goodbye button.

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>