Background image is not replicated on other pages when using onChange function

Navigation
0

I am trying to select a background image according to the selected option in a onChange function, but it happens that it (the image) is only applied on the first page if I NÃO use the function onChange to the address of the image shows on all pages normally, the problem occurs when implementing the select option and onChange function, it follows code and images with and without the function that I am using:

  

SEM function:

COMfunction:

  

Inspectingtheelements,Icheckedthefollowing:

Mycode:

  

functionscript

<script>functionmyFunction(){varx=document.getElementById("mySelect").value;
    document.getElementById("imagem").src = "img/gab" + x + ".png"
}
</script>
  

CSS 

    <style>
html { font-size: 12pt; 

}

.folha { align:center;background-color: #ccc; padding: 0.5em;


 }
.a4_vertical { width: 793px; height: 1122px;
    margin-left: auto;
    margin-right: auto;
 }
.a4_horizontal { width: 1122px; height: 793px; 
    margin-left: auto;
    margin-right: auto;
}

#container {
  display: inline-block;
  position: relative;
}

#container figcaption {
  position: absolute;
  top: 94px;
  left: 87px;
  color: black;
}
<title>FOLHA DE RESPOSTA</title>
</head>

<body>
  

Select with onChange 

<div align="center">
    <select id="mySelect" onchange="myFunction()">
      <option value="1">1 Questão
      <option value="2">2 Questões
      <option value="3">3 Questões
      <option value="4">4 Questões
    </select>

</div>
  

This is where I call the background image, if in place of id="image" I use src=... works but I need to use a select with onChange

How it works: 

   <div><img align="center" src="img/gab1.png" width="600px" height="auto" /></div>

So não Works: 

   <div><img align="center" id="imagem" width="600px" height="auto" /></div>
  

Edit

Just added this to Fernando's answer and it worked for me. 

window.onload=function(){
       //código aqui
}
    
asked by anonymous 25.09.2018 / 04:46

2 answers

1

Miguel, the concept of ID is to be an identifier, something unique that separates one thing from the rest.

If you want to have multiple elements with the same ID, then what you want is to identify a group of elements, not a single element.

To identify a group of elements, using classes is recommended.

See the difference: 

let imagens = document.getElementById("bg-page");
let select = document.querySelector("#select-gabarito");

select.addEventListener("change", function() {
	imagens.src = this.value;
});
.paginas {
  display: flex;
  flex-direction: column;
  background-color: #CCC;
}

#bg-page {
  margin: 10px auto;
  width: 210px;
  height: 297px;
  outline: 1px solid #888;
}
<select id="select-gabarito">
  <option value="https://via.placeholder.com/210x297/ff00ff/ffffff">#ff00ff</option>
  <option value="https://via.placeholder.com/210x297/00ffff/ffffff">#00ffff</option>
  <option value="https://via.placeholder.com/210x297/ff0000/ffffff">#ff0000</option>
  <option value="https://via.placeholder.com/210x297/00ff00/ffffff">#00ff00</option>
</select>

<hr>

<div class="paginas">
  <img src="https://via.placeholder.com/210x297/"id="bg-page">
  <img src="https://via.placeholder.com/210x297/"id="bg-page">
  <img src="https://via.placeholder.com/210x297/"id="bg-page">
</div>

Now using the class attribute to get a group of elements (see Document.querySelectorAll or Document.getElementsByClassName ). 

let imagens = document.querySelectorAll(".bg-page");
let select = document.querySelector("#select-gabarito");

select.addEventListener("change", function() {
	let novo_src = this.value;
	imagens.forEach(function(img) {
  	img.src = novo_src;
  });
});
.paginas {
  display: flex;
  flex-direction: column;
  background-color: #CCC;
}

.bg-page {
  margin: 10px auto;
  width: 210px;
  height: 297px;
  outline: 1px solid #888;
}
<select id="select-gabarito">
  <option value="https://via.placeholder.com/210x297/ff00ff/ffffff">#ff00ff</option>
  <option value="https://via.placeholder.com/210x297/00ffff/ffffff">#00ffff</option>
  <option value="https://via.placeholder.com/210x297/ff0000/ffffff">#ff0000</option>
  <option value="https://via.placeholder.com/210x297/00ff00/ffffff">#00ff00</option>
</select>

<hr>

<div class="paginas">
  <img src="https://via.placeholder.com/210x297/"class="bg-page"><imgsrc="https://via.placeholder.com/210x297/"class="bg-page"><imgsrc="https://via.placeholder.com/210x297/"class="bg-page">
</div>
    
25.09.2018 / 23:13
1

Come on.

Your problem happens because you replicate multiple equal IDs within the same page. The function refers to the ID itself, it does not know which of the IDs you want. The solution is to put onchange() within the div of each page, and change its JS function to refer to the class of that div, not the page. 

function myFunction(pagina) {
  var x = pagina.querySelector(".mySelect").value;
  pagina.querySelector(".imagem").src = "img/gab" + x + ".png";
}
<div onchange="myFunction(this)">
    <select class="mySelect">
     <option value="1">1 Questão
     <option value="2">2 Questões
     <option value="3">3 Questões
     <option value="4">4 Questões
    </select>
    <img class="imagem">
</div>
<div onchange="myFunction(this)">
     <select class="mySelect">
       <option value="1">1 Questão
       <option value="2">2 Questões
       <option value="3">3 Questões
       <option value="4">4 Questões
    </select>
    <img class="imagem">
</div>
<div onchange="myFunction(this)">
     <select class="mySelect">
       <option value="1">1 Questão
       <option value="2">2 Questões
       <option value="3">3 Questões
       <option value="4">4 Questões
    </select>
    <img class="imagem">
</div>

That is. You will change onchange to the div that is around each page, put this as the function parameter, and modify your code to find the ID within that div only. I did the test here and it worked, try doing it on your.

    
25.09.2018 / 22:59
How to capture form field with .htaccess? Override native HTML scroll