How to to display images according to id (Filters)

Question

I want to display images in a div according to select option (onclick = "DispImg()) I get 2 problem's

I store the images in array and I display all of theme and when you select an option it will automatically display the images that have the correct id .

and this is my script : I want to add to every image an id but the (setAttribute) method dosn't work and when you chose what id the script will display only the images that have the same id .

var imgArray = new Array();

var corp = document.getElementById('range_imgs');

imgArray[0] = new Image();
imgArray[0].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.futura-sciences.com%2Fsciences%2Fdefinitions%2Funivers-etoile-3730%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAD";
imgArray[0].setAttribute("id" , "2");


imgArray[1] = new Image();
imgArray[1].src = "https://www.google.com/url?sa=i&url=http%3A%2F%2Fvivre-marrakech.com%2Fblog%2Ffaire%2Fobserver-les-etoiles-a-marrakech%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAI";
imgArray[1].setAttribute("id" , "1");

imgArray[2] = new Image();
imgArray[2].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.numerama.com%2Fsciences%2F537548-au-lieu-detre-avalee-par-un-trou-noir-cette-etoile-sest-echappee-a-toute-vitesse.html&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAN";
imgArray[2].setAttribute("id" , "3");

imgArray[3] = new Image();
imgArray[3].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.geowiki.fr%2Findex.php%3Ftitle%3D%25C3%2589toile&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAS";
imgArray[3].setAttribute("id" , "2");

imgArray[4] = new Image();
imgArray[4].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.futura-sciences.com%2Fsciences%2Fquestions-reponses%2Fespace-quest-ce-quune-etoile-157%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAX";
imgArray[4].setAttribute("id" , "1");


  for(var i=0;i<imgArray.length;i++){
    var imges = document.createElement("img");
      imges.src = imgArray[i].src;
      imges.style.marginRight = "15px";
      corp.appendChild(imges);
  }

  function appFilter(ele){

      var pics = document.querySelectorAll("img");

          if(pics.id == "1"){

          }

  }

<form>
  <select id="allimgs" name="allimmages" >
      <option value="1et" onclick="appfilter(1)">img with id=1</option>
      <option value="2et" onclick="appfilter(2)">img with id=2</option>
      <option value="3et" onclick="appfilter(3)">img with id=3</option>
  </select>
</form>
<div id="range_imgs">
</div>

Thank you !!

Answer 1

I would not use id to store that value, because you are writing those to the DOM and all id properties must be unique. Use a helper attribute like data-id.

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.futura-sciences.com%2Fsciences%2Fdefinitions%2Funivers-etoile-3730%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAD";
imgArray[0].setAttribute("data-id", "2");

imgArray[1] = new Image();
imgArray[1].src = "https://www.google.com/url?sa=i&url=http%3A%2F%2Fvivre-marrakech.com%2Fblog%2Ffaire%2Fobserver-les-etoiles-a-marrakech%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAI";
imgArray[1].setAttribute("data-id", "1");

imgArray[2] = new Image();
imgArray[2].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.numerama.com%2Fsciences%2F537548-au-lieu-detre-avalee-par-un-trou-noir-cette-etoile-sest-echappee-a-toute-vitesse.html&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAN";
imgArray[2].setAttribute("data-id", "3");

imgArray[3] = new Image();
imgArray[3].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.geowiki.fr%2Findex.php%3Ftitle%3D%25C3%2589toile&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAS";
imgArray[3].setAttribute("data-id", "2");

imgArray[4] = new Image();
imgArray[4].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.futura-sciences.com%2Fsciences%2Fquestions-reponses%2Fespace-quest-ce-quune-etoile-157%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAX";
imgArray[4].setAttribute("data-id", "1");

const corp = document.getElementById('range_imgs');

// set margin
imgArray.forEach(
  img => img.style.setProperty("margin-right", "15px")
);

// append all to document
imgArray.forEach(
  img => corp.appendChild(img)
);

// hide/show functions
const hide = el => el.style.setProperty("display", "none");
const show = el => el.style.setProperty("display", "unset");

// get selected ID
const select = document.getElementById("allimgs");
const getSelectedId = () => select.options[select.selectedIndex].getAttribute("data-id");

// remove all images with non-selected IDs
const filterImages = () => document.querySelectorAll("#range_imgs > img").forEach(
  child => getSelectedId() == child.getAttribute("data-id") 
    ? show(child)
    : hide(child)
);

// run on pageload
window.addEventListener("load", filterImages);

<form>
  <select id="allimgs" name="allimmages" onchange="filterImages(this)">
    <option value="1et" data-id="1">img with id=1</option>
    <option value="2et" data-id="2">img with id=2</option>
    <option value="3et" data-id="3">img with id=3</option>
  </select>
</form>
<div id="range_imgs">
</div>

Answer 2

Instead of setAttribute you can replace with just .id but both should work fine

imgArray[x].id = x

your filter also won't work. replace with something like this

the pics variable is an array so pic.id won't work

var pics = document.querySelectorAll("img");
pics.forEach(function(pic) {
  if (pic.attr('id') == 2) {
    // do something
  }
})