GetElementByID-Multiple IDs

Cela ne fonctionne pas, getElementById interrogera un seul élément par temps.

Vous pouvez utiliser document.querySelectorAll("#myCircle1, #myCircle2") pour les requêtes de plus d'un élément.

ES6 ou plus récent

Avec la nouvelle version de JavaScript, vous pouvez également convertir les résultats dans un tableau facilement transverse.

Exemple:

const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];

// Now you can use cool array prototypes
elementsArray.forEach(element => {
    console.log(element);
});

comment interroger une liste D'IDs dans ES6

un Autre moyen facile si vous avez un tableau d'Id est d'utiliser le langage pour construire votre requête, exemple:

const ids = ['myCircle1', 'myCircle2', 'myCircle3'];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));

Non, ça ne marchera pas.

document.getElementById() la méthode n'accepte qu'un seul argument.

cependant, vous pouvez toujours définir des classes aux éléments et utiliser getElementsByClassName() à la place. Une autre option pour les navigateurs modernes est d'utiliser querySelectorAll() méthode:

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");

getElementByID c'est exactement le - obtenir un élément par son id.

peut-être voulez-vous donner à ces éléments un circle classe et getElementsByClassName

document.getElementById() prend seulement un argument. Vous pouvez leur donner un nom de classe et d'utiliser getElementsByClassName() .

je suggère d'utiliser ES5 les méthodes de tableau:

["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document)           // Array of elements
.forEach(doStuff);

doStuff sera appelée une fois pour chaque élément, et recevra 3 arguments: l'élément, l'indice de l'élément à l'intérieur de la matrice d'éléments, et le tableau des éléments.

Je ne sais pas si quelque chose comme ça fonctionne en js, en PHP et en Python que j'utilise assez souvent c'est possible. Peut-être juste utiliser pour boucle comme:

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}

Vulgo a la bonne idée sur ce fil. Je crois que sa solution est la plus facile du groupe, bien que sa réponse aurait pu être un peu plus approfondie. Voici quelque chose qui a fonctionné pour moi. J'ai fourni un exemple.

<h1 id="hello1">Hello World</h1>
<h2 id="hello2">Random</h2>
<button id="click">Click To Hide</button>

<script>

  document.getElementById('click').addEventListener('click', function(){
    doStuff();
  });

  function doStuff() {
    for(var i=1; i<=2; i++){
        var el = document.getElementById("hello" + i);
        el.style.display = 'none';
    }
  }

</script>

évidemment, il suffit de changer les entiers dans la boucle for pour tenir compte de tous les éléments que vous ciblez, qui dans cet exemple était 2.

La meilleure façon de le faire, est de définir une fonction, et lui passer un paramètre du nom de L'ID que vous voulez saisir dans le DOM, puis à chaque fois que vous voulez saisir un ID et le stocker dans un tableau, alors vous pouvez appeler la fonction

<p id="testing">Demo test!</p>

function grabbingId(element){
    var storeId = document.getElementById(element);

    return storeId;
}


grabbingId("testing").syle.color = "red";

Vous pouvez utiliser quelque chose comme ce tableau de whit et pour boucle.

<p id='fisrt'>??????</p>
<p id='second'>??????</p>
<p id='third'>??????</p>
<p id='forth'>??????</p>
<p id='fifth'>??????</p>
<button id="change" onclick="changeColor()">color red</button>
<script>

    var ids = ['fisrt','second','third','forth','fifth'];

    function changeColor() {
        for (var i = 0; i < ids.length; i++) {
          document.getElementById(ids[i]).style.color='red';
 }
    }
</script>

Pour moi, travaillé flawles quelque chose comme ceci

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);

Utiliser jQuery ou similaire pour obtenir l'accès à la collection d'éléments dans une seule phrase. Bien sûr, vous devez mettre quelque chose comme ça dans la section "head" de votre html:

<script type='text/javascript' src='url/to/my/jquery.1.xx.yy.js' ...>

alors voici la magie:

.- Tout d'abord, disons que vous avez quelques divs avec IDs comme vous avez écrit, i.e.,

 ...some html...
 <div id='MyCircle1'>some_inner_html_tags</div>
 ...more html...
 <div id='MyCircle2'>more_html_tags_here</div>
 ...blabla...
 <div id='MyCircleN'>more_and_more_tags_again</div>
 ...zzz...

.- Avec ce "sort" jQuery retournera une collection d'objets représentant tous les éléments div avec IDs contenant la chaîne entière "myCircle" partout:

 $("div[id*='myCircle']")

C'est tout! Notez que vous vous débarrassez des détails comme le suffixe numérique, que vous pouvez manipuler toutes les divs en une seule phrase, les animer... Voilá!

 $("div[id*='myCircle']").addClass("myCircleDivClass").hide().fadeIn(1000);

prouvez ceci dans la console de script de votre navigateur (appuyez sur F12) maintenant!

Vous pouvez le faire avec document.getElementByID voilà comment.

function dostuff (var here) {
  if(add statment here) {
  document.getElementById('First ID'));
  document.getElementById('Second ID'));
  }
}

Là vous allez! xD