1

for my different elements i have the same class tag with only different ending. My html elements;

id="inner-main-container-one"
id="inner-main-container-two"
id="inner-main-container-three"

My code define in js is:

var content = document.getElementByID('inner-main-container-one');
var contentone = document.getElementByID('inner-main-container-two');
var contenttwo = document.getElementByID('inner-main-container-three');

How can i determine the unique id with one define ? Like this:

var content = document.getElementByID('inner-main-container-%%');
isherwood
  • 58,414
  • 16
  • 114
  • 157
DirtyyyDan
  • 85
  • 7
  • 1
    That's not a class _or_ a tag. It's an ID attribute. – isherwood Nov 02 '21 at 19:14
  • 1
    Why would you want to do that? You'd have to run a loop over an array of suffixes. – isherwood Nov 02 '21 at 19:14
  • Chick this answer. https://stackoverflow.com/questions/6061760/document-getelementbyid-regex – Zrelli Majdi Nov 02 '21 at 19:16
  • If you're going to use numbers, then use *numbers* - `inner-main-container-1`. That way you can loop through them (`for(i=0...`). – Paul Nov 02 '21 at 19:18
  • Okay, I have now built a loop and I get all the elements out. Unfortunately, I cannot execute an instruction with button.onclick when the element is clicked? – DirtyyyDan Nov 02 '21 at 20:25

1 Answers1

2

You can do this with document.querySelectorAll and attribute selectors.

const content = document.querySelectorAll('[id|=inner-main-container]');
RyanDay
  • 1,856
  • 16
  • 23
  • Thanks for your answer. Do I have to make adjustments to the HTML element? The output of content is namely empty. – DirtyyyDan Nov 02 '21 at 20:13
  • 1
    How can i use it to check if some ID got clicked ? I have always queried this for individual objects with content.onclick. - but it doesnt function. – DirtyyyDan Nov 02 '21 at 20:20
  • Use the [forEach](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach) on the NodeList. `content.forEach((node, index) => { node.onclick = ... })` – RyanDay Nov 02 '21 at 20:24
  • I dont know, exactly whats wrong `const content = document.querySelectorAll('[id|=inner-main-container-button]'); content.forEach((node, index) => { node.onclick = function(){ console.log('clicked'); } });` And i have different divs: `
    `
     – DirtyyyDan Nov 02 '21 at 20:31
  • 1
    You changed the order of the words in the `id` from your original post. So you need to update your selector: `[id|=main-inner-container-button]`. – RyanDay Nov 02 '21 at 20:36
  • Thanks But now I have a similar problem. After clicking one of these elements I also want to make sure that the className is queried exactly from the clicked element & I can change this if a certain className applies. Code: `const button = document.querySelectorAll('[id|=main-inner-container-button]'); const content = document.querySelectorAll('[id|=main-inner-container-inner]') button.forEach((node, index) => { node.onclick = function(){ if(content.className.contains('open')) { console.log('open'); } } });` Cannot read property of undefined (reading 'contains') – DirtyyyDan Nov 02 '21 at 21:07
  • 1
    `content` refers to the entire [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList). In your forEach function, the first argument refers to the individual node. So you'll want `if (node.className.contains('open')) { ...` – RyanDay Nov 02 '21 at 21:15
  • Okay, but the error still the same: Uncaught TypeError: node.className.contains is not a function `button.forEach((node, index) => { node.onclick = function(){ if(node.className.contains('open')) { console.log('open');` – DirtyyyDan Nov 02 '21 at 21:27
  • okay i got now a way. But how can i check, if the `node.className` contains open or not and attach open to the className ? `if(node.className === '[id|=main-inner-container-button open]') { node.className= '[id|=main-inner-container-button]'; } else { node.className='[id|=main-inner-container-button open]'; }` – DirtyyyDan Nov 02 '21 at 21:46
  • Okay, I have now resolved all issues and it works as expected. Thank you again! – DirtyyyDan Nov 02 '21 at 22:25