CODEWITHSUNDEEP
javascripthtml
Aman
Aman

Reputation: 417

Continuously changing id of div based on button click

I need to change the ID of a div based on the buttons being clicked. This is what my buttons look like:

var id; // global variable
holding = "holder";
var counter = 1;

function sendData(valueId) {
  id = valueId;
  if (counter <= 1) {
    document.getElementById(holding).setAttribute("id", id);
    counter++;
    holding = id;
  } else {
    document.getElementById(holding).setAttribute("id", id);
    holding = id;
  }
  console.log(holding);
  console.log(id);
}
<button id="republic" onclick="sendData('republic')">Republic</button>
<button id="ndtv" onclick="sendData('ndtv')">NDTV</button>
<button id="cnnnews18" onclick="sendData('cnnnews18')">CNN</button>

My div to be targeted is just an empty, <div id="holder"></div>. However, when I try to run this I see the div change the first time but it remains on the same ID for every other click. How can I fix this?

Upvotes: 0

Views: 676

Answers (3)

Raf Vost&#233;
Raf Vost&#233;

Reputation: 128

The trouble is that when you press one of the buttons, you're creating multiple elements with the same id. The "holder" div will be assigned the id of one of the buttons.

Ids are meant to be unique. When this isn't the case, the behavior of getElementById is undefined, so the browser likely just returns the first element it finds that qualifies. In your example, this will be one of your buttons, rather than the "holder" div.

To get the code to work, make sure the ids of your buttons and the valueId variables in your code are different.

Bladeski's suggestion to use

const holding = document.getElementById('holder');

is great. But you should also make sure the ids in your document stay unique, just to conform to the HTML standard and avoid any other undefined behavior.

Upvotes: 1

deepakchethan
deepakchethan

Reputation: 5600

You need to remove the ids from the buttons.

  <button onclick="sendData('republic')">Republic</button>
  <button onclick="sendData('ndtv')">NDTV</button>
  <button onclick="sendData('cnnnews18')">CNN</button>

The first click only one element with id 'holder' would be available in dom. But in the next we would have two since both div and button would have republic/ndtv/cnnnews18 and getElementById returns the button and this goes on.

But instead of this having the reference holder div at root would be a better approach. The code would be:

var id; // global variable
holding = document.getElementById('holder');
var counter = 1;

function sendData(valueId) {
  id = valueId;
  if (counter <= 1) {
    holding.setAttribute("id", id);
    counter++;
  } else {
    holding.setAttribute("id", id);
  }
  console.log(id);
}

Upvotes: 1

Bladeski
Bladeski

Reputation: 386

Create a reference to the 'holding' div in a constant and the use this for changing the attribute. For example, at the start of the code:

const holding = document.getElementById('holder');

Then, whenever you need to update the element, use: holding.setAttribute(...);

This also happens to be more efficient as it means that the DOM is not being queried every time the element needs to be accessed since the holding constant provides a direct reference to it.

Upvotes: 1

Related Questions