Javascript getElementById based on ID formed using fixed name and input number

Question

I am trying to create ID dynamically in the HTML object and use of getElementById() in my javascript to access the HTML input value based on the button I clicked and insert into their respective HTML Select list.

My HTML snippets:

<input type="text" id="addDesc1"><input type="button" value="Add" onclick="addDescText(1)"> 
<input type="text" id="addDesc2"><input type="button" value="Add" onclick="addDescText(2)">
....
....
<select id="desc1">....</select>
<select id="desc2">....</select>

My javascript snippets:

function addDescText(id) {
    var descText = document.getElementById("addDesc".concat(id)).value;
    var selList = document.getElementById("desc".concat(id));
    ....
    ....
    some javascript to add the respective description to their respective select list
    ....
}

don't use "desc".concat(id). Do either "desc" + id , or `desc${id}` — pbialy
– pbialy, Commented Dec 10, 2019 at 14:37
document.getElementById("addDesc"+id) or with es2015's template variables like document.getElementById(addDesc${id}) — Jai
– Jai, Commented Dec 10, 2019 at 14:37
You could do this by getting the element that performed the click (this will be available through the event argument). Then once you have that getting the other elements can be done using accessing adjacent siblings. — Phil Cooper
– Phil Cooper, Commented Dec 10, 2019 at 14:40

Mamun · Accepted Answer · 2019-12-10 14:42:09Z

1

concat() is an array method, you can not use that on string. Simply use + to concatenate the parameter with the string.

Demo:

function addDescText(id) {
  var descText = document.getElementById("addDesc"+id).value;
  var selList = document.getElementById("desc"+id);

  console.log(descText);
  console.log(selList);
}

<input type="text" id="addDesc1"><input type="button" value="Add" onclick="addDescText(1)"> 
<input type="text" id="addDesc2"><input type="button" value="Add" onclick="addDescText(2)">

<select id="desc1">....</select>
<select id="desc2">....</select>

answered Dec 10, 2019 at 14:42

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koh C Over a year ago

I tried that earlier but it did not worked.. I had tried again and confirmed it did not worked for the 2nd or 3rd "Add" button. The first one will work.

line-o · Accepted Answer · 2019-12-10 14:51:20Z

I would encourage you to make use of the event parameter that is passed to all event handlers (on-click-event in your case) and add that handler programmatically.

A possible solution would be

HTML

  <input type="text" id="text1">
  <input type="button" value="Add" class="add-desc-button" data-target="1">

JS

// get all buttons
let allButtons = document.querySelectorAll('.add-desc-button')

// add event handler
for (let i=0; i<allButtons.length; i++) {
  allButtons[i].addEventHandler('click', addDescriptionHandler)
}

// event handler
function addDescriptionHandler(event) {
   // retrieve the number you passed in before like this
   let number = event.target.getAttribute('data-target')
   // ... your code here
}

Collectives™ on Stack Overflow

Javascript getElementById based on ID formed using fixed name and input number

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related