CODEWITHSUNDEEP
javascript
user11168999
user11168999

Reputation:

copy text from divs with same id to input onclick

So today i have decided to learn javascript and try something that seem simple. . But i'm stuck and can't work out why this don't work.

I'm trying to copy the text from divs with same ids onclick to an input but it always copy's the first divs text into the input and not the div i clicked.

Any ideas how i could fix this?

function copyToInput(elementId) {
  var getText = document.getElementById(elementId).innerText;
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = getText;
}
<div class="hud-chat-message" id="message" onclick="copyToInput('message');"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message" onclick="copyToInput('message');"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message" onclick="copyToInput('message');"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Upvotes: 0

Views: 198

Answers (5)

Ehsan
Ehsan

Reputation: 12969

ID must be unique, in your case id is not unique so when document.getElementById(elementId) see first id that matchs message , takes it and does not continue to search( so get first div always).

your code does not require a ID, use of this. this refer to div that click on it.

function copyToInput(elementId) {
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = elementId.innerText ;
}
<div class="hud-chat-message" id="message" onclick="copyToInput(this);"> SOME TEXT HERE </div><hr>
<div class="hud-chat-message" id="message" onclick="copyToInput(this);"> SOME MORE TEXT HERE </div><hr>
<div class="hud-chat-message" id="message" onclick="copyToInput(this);"> EVEN MORE TEXT HERE </div><hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Upvotes: 0

Aniket G
Aniket G

Reputation: 3512

Use the following code. All your elements must have unique ID's. In your code, the only reason it uses the first one is because the first one it the one it would use (since you can only have 1 ID, and the code assumes you only have 1 ID). Just give the 3 elements different IDs. 

function copyToInput(elementId) {
  var getText = document.getElementById(elementId).innerText;
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = getText;
}
<div class="hud-chat-message" id="message1" onclick="copyToInput('message1');"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message2" onclick="copyToInput('message2');"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message3" onclick="copyToInput('message3');"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Upvotes: 0

Ravi Teja
Ravi Teja

Reputation: 659

Try This:






    function copyToInput(elementId) {
  var getText = document.getElementById(elementId).innerText;
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = getText;
}


    <div class="hud-chat-message" id="message" onclick="copyToInput('message');"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message2" onclick="copyToInput('message2');"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message1" onclick="copyToInput('message1');"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

Never use same id for elements instead use same class . You can pass the whole element in the onclick function and get its text in the function

function copyToInput(elementId) {
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = elementId.innerText;
}
<div class="hud-chat-message message"  onclick="copyToInput(this);"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message message" onclick="copyToInput(this);"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message message"  onclick="copyToInput(this);"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Upvotes: 1

Steven Stark
Steven Stark

Reputation: 1259

Two div's can not share an id. You can share class', however, but id's are unique identifiers.

https://www.w3schools.com/tags/att_id.asp

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Upvotes: 0

Related Questions