How can “e.target.id” be used as index in for loop?

Question

I'm looking at these lines in old javascript code:

tempIndex = window.event.srcElement.parentElement.id;
tempIndex = e.target.id;

tempindex is being used in this way in for loop:

for(var i = tempIndex; i < all.length; i++)

Noobie Understanding of id tag is must start with a letter

How can this be used in for loop?

Answer 1

If you were to do this properly and want to use the id as a value id suggest using data-attributes

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

 const elem = document.querySelector('div'); console.log(elem.id) // can be a number but cant be used in css console.log(elem.classList[0]) // can be a number but cant use in css // but you're right they cant be used as query selectors. try { console.log(document.getElementById('1'), 'but you can select with getElementById') console.log(document.querySelector('#1')) // cant select with id } catch (e) { console.log('failed to select') // "Error: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector. } try { console.log(document.querySelector('.1')) // cant select with id } catch (e) { console.log('failed to select') // "Error: Failed to execute 'querySelector' on 'Document': '.1' is not a valid selector. } 

 .1 { color: red; /* this wont do anything */ } #1 { color: blue; /* stil wont do nowt */ } 

 <div id="1" class="1">Hello, world.</div> 

Answer 2

If possible the value of IDs should have no other meaning than identifying a DOM element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

This attribute's value is an opaque string: this means that web author must not use it to convey any information.

If your HTML is a source for JavaScript functionality, you might be better off using data -attributes:

 var element = document.querySelector('[data-iterator]'); if (element) { var iterator = Number(element.getAttribute('data-iterator')); for(var i = 0; i < iterator; i++) { console.log(i); } } 

 <div id="something" data-iterator="20"> </div>