GetElementByID - Multiple IDs

Question

doStuff document getElementById  myCircle1   myCircle2   myCircle3   myCircle4       This doesn t work  so do I need a comma or semi-colon to make this work

User · Answer

document getElementById   only takes one argument  You can give them a class name and use getElementsByClassName

User · Answer

here is the solution if     document getElementById  73536573   value        amp  amp    document getElementById  1081743273   value        amp  amp    document getElementById  357118391   value        amp  amp    document getElementById  1238321094   value        amp  amp    document getElementById  1118122010   value             code

User · Answer

For me worked flawles something like this  doStuff       document getElementById  myCircle1          document getElementById  myCircle2          document getElementById  myCircle3          document getElementById  myCircle4

User · Answer

This will not work  getElementById will query only one element by time   You can use document querySelectorAll   myCircle1   myCircle2   for querying more then one element   ES6 or newer  With the new version of the JavaScript  you can also convert the results into an array to easily transverse it   Example   const elementsList   document querySelectorAll   myCircle1   myCircle2    const elementsArray       elementsList       Now you can use cool array prototypes elementsArray forEach element   gt        console log element         How to query a list of IDs in ES6  Another easy way if you have an array of IDs is to use the language to build your query  example   const ids     myCircle1    myCircle2    myCircle3    const elements   document querySelectorAll ids map id   gt      id    join

User · Answer

You can do it with document getElementByID   Here is how   function dostuff  var here      if add statment here      document getElementById  First ID       document getElementById  Second ID             There you go  xD

User · Answer

You can use something like this whit array and for loop    lt p id  fisrt  gt        lt  p gt   lt p id  second  gt        lt  p gt   lt p id  third  gt        lt  p gt   lt p id  forth  gt        lt  p gt   lt p id  fifth  gt        lt  p gt   lt button id  change  onclick  changeColor    gt color red lt  button gt   lt script gt       var ids     fisrt   second   third   forth   fifth         function changeColor             for  var i   0  i  lt  ids length  i                document getElementById ids i   style color  red             lt  script gt

User · Answer

No  it won t work   document getElementById   method accepts only one argument   However  you may always set classes to the elements and use getElementsByClassName   instead  Another option for modern browsers is to use querySelectorAll   method   document querySelectorAll   myCircle1   myCircle2   myCircle3   myCircle4

User · Answer

Vulgo has the right idea on this thread  I believe his solution is the easiest of the bunch  although his answer could have been a little more in-depth  Here is something that worked for me  I have provided an example    lt h1 id  hello1  gt Hello World lt  h1 gt   lt h2 id  hello2  gt Random lt  h2 gt   lt button id  click  gt Click To Hide lt  button gt    lt script gt     document getElementById  click   addEventListener  click   function        doStuff             function doStuff         for var i 1  i lt  2  i             var el   document getElementById  hello    i           el style display    none               lt  script gt    Obviously just change the integers in the for loop to account for however many elements you are targeting  which in this example was 2

User · Answer

Dunno if something like this works in js  in PHP and Python which i use quite often it is possible  Maybe just use for loop like    function doStuff        for i 1  i lt  4  i             var i   document getElementById  myCiricle  i

User · Answer

As stated by jfriend00       document getElementById   only supports one name at a time and only returns a single node not an array of nodes    However  here s some example code I created which you can give one or a comma separated list of id s  It will give you one or many elements in an array  If there are any errors  it will return an array with an Error as the only entry   function safelyGetElementsByIds ids       if typeof ids      string   return new Error  ids must be a comma seperated string of ids or a single id string        ids   ids split           let elements           for let i 0  len   ids length  i lt len  i             const currId   ids i           const currElement    document getElementById currId     new Error currId     is not an HTML Element             if currElement instanceof Error  return  currElement           elements push currElement              return elements     safelyGetElementsByIds  realId1      returns   lt HTML Element gt   safelyGetElementsByIds  fakeId1      returns  Error   fakeId1 is not an HTML Element  safelyGetElementsByIds  realId1    realId2    realId3      returns   lt HTML Element gt   lt HTML Element gt   lt HTML Element gt   safelyGetElementsByIds  realId1    realId2    fakeId3      returns  Error   fakeId3 is not an HTML Element

User · Answer

Use jQuery or similar to get access to the collection of elements in only one sentence  Of course  you need to put something like this in your html s  head  section      lt script type  text javascript  src  url to my jquery 1 xx yy js      gt     So here is the magic    - First of all let s supose that you have some divs with IDs as you wrote  i e         some html      lt div id  MyCircle1  gt some inner html tags lt  div gt      more html      lt div id  MyCircle2  gt more html tags here lt  div gt      blabla      lt div id  MyCircleN  gt more and more tags again lt  div gt      zzz        - With this  spell  jQuery will return a collection of objects representing  all div elements with IDs containing the entire string  myCircle  anywhere        div id   myCircle        This is all  Note that you get rid of details like the numeric suffix  that you can manipulate all the divs in a single sentence  animate them    Voil          div id   myCircle     addClass  myCircleDivClass   hide   fadeIn 1000      Prove this in your browser s script console  press F12  right now

User · Answer

document getElementById   only supports one name at a time and only returns a single node not an array of nodes   You have several different options    You could implement your own function that takes multiple ids and returns multiple elements  You could use document querySelectorAll   that allows you to specify multiple ids in a CSS selector string   You could put a common class names on all those nodes and use document getElementsByClassName   with a single class name    Examples of each option   doStuff document querySelectorAll   myCircle1   myCircle2   myCircle3   myCircle4       or      put a common class on each object doStuff document getElementsByClassName  circles       or   function getElementsById ids        var idList   ids split           var results       item      for  var i   0  i  lt  idList length  i              item   document getElementById idList i            if  item                results push item                       return results      doStuff getElementsById  myCircle1 myCircle2 myCircle3 myCircle4

User · Answer

getElementByID is exactly that - get an element by id   Maybe you want to give those elements a circle class and getElementsByClassName

User · Answer

I suggest using ES5 array methods     myCircle1   myCircle2   myCircle3   myCircle4      Array of IDs  map document getElementById  document               Array of elements  forEach doStuff     Then doStuff will be called once for each element  and will receive 3 arguments  the element  the index of the element inside the array of elements  and the array of elements

User · Answer

The best way to do it  is to define a function  and pass it a parameter of the ID s name that you want to grab from the DOM  then every time you want to grab an ID and store it inside an array  then you can call the function   lt p id  testing  gt Demo test  lt  p gt   function grabbingId element       var storeId   document getElementById element        return storeId      grabbingId  testing   syle color    red

[javascript] GetElementByID - Multiple IDs

Examples related to javascript

Examples related to arrays

Examples related to get

Examples related to element

Examples related to document