I need write a function called that takes in one argument, which is a list of elements. In the list of elements there's ONE element that has an ID,but I don't know what's the ID called. The function should change the inner text of the element to be the value of the ID. Example:

<div><div/>
<div><div/>
<div><div/>
<div id="special"><div/>
<div><div/>

let divs = querySelectorAll('div')
findId(divs)

What it should do :

<div><div/>
<div><div/>
<div><div/>
<div id="special">special<div/>
<div><div/>

I have tried using innerhtml but I do not know how to go about doing it,as the id is unknown.
Please help out.

I need write a function called that takes in one argument, which is a list of elements. In the list of elements there's ONE element that has an ID,but I don't know what's the ID called. The function should change the inner text of the element to be the value of the ID. Example:

<div><div/>
<div><div/>
<div><div/>
<div id="special"><div/>
<div><div/>

let divs = querySelectorAll('div')
findId(divs)

What it should do :

<div><div/>
<div><div/>
<div><div/>
<div id="special">special<div/>
<div><div/>

I have tried using innerhtml but I do not know how to go about doing it,as the id is unknown.
Please help out.

• javascript

5 Answers 5

Something like this;

function change(divs){
  divs.forEach((div) => {
    if(div.id){
      div.innerHTML = div.id;
    }
  })
}

let divs = document.querySelectorAll('div');
change(divs);

<div></div>
<div id="special"></div>
<div></div>
<div></div>

To determine if the element has an ID, you can just use the hasAttribute() method:

// Array.prototype.slice.call() is an easy way to turn the NodeList document.querySelector returns into an array.
const divs = Array.prototype.slice.call(document.querySelectorAll('div'));

const haveIds = divs.filter(element =>
  element.hasAttribute('id')
);

console.log(haveIds);

<div>A</div>
<div>B</div>
<div id="me">C</div>
<div>D</div>
<div id="me-too">E</div>

Alternatively, you can also use querySelector itself to determine it as well:

const withIds = document.querySelectorAll('div[id]');

console.log(withIds);

<div>A</div>
<div>B</div>
<div id="me">C</div>
<div>D</div>
<div id="me-too">E</div>

That [id] part basically means "if it has the attribute ID".

Regardless which method you choose, then you just loop through and set the innerText to their ID:

const withIds = Array.prototype.slice.call(document.querySelectorAll('div[id]'));

withIds.forEach(element => element.innerText = element.id);

<div>A</div>
<div>B</div>
<div id="me">C</div>
<div>D</div>
<div id="me-too">E</div>

modern syntax:

let divs = document.body.querySelectorAll("div");
for (const div of divs) {
  if (div.hasAttribute("id")) {
    const id = div.id;
    div.innerHTML = id;
  }
}

Iterate through list of elements and check them by css selector: .matches('div[id]'). Use textContent of found one.

let divs = document.querySelectorAll('div');
let result = findId(divs);
console.log(result);


function findId(list) {
    for (var i = 0; i < list.length; i++) {
      if (list[i].matches('div[id]')) {
        return list[i].textContent;
      }
    }
    return null;
}

const theDivs = document.querySelectorAll('div');

if (theDivs) {
  theDivs.forEach(function(el) {

  if (el.id) {
    el.innerHTML = el.id;
  }

  });
} else {
  alert('Sorry, no divs found buddy');
}

div {
  padding: 1rem;
  border: lightgray 1px dotted;
  width: 10rem;
}

<div></div>
<div></div>
<div id="special"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>