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

Asked

Viewed 106 times

0

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

WITHOUT the function:

inserir a descrição da imagem aqui

WITH the function:

inserir a descrição da imagem aqui

Inspecting the elements I checked the following:

inserir a descrição da imagem aqui

My code:

function script

<script>
function myFunction() {
    var x = 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>

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

That’s how it works:

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

Thus não Works:

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

Edit

Just add that to Fernando’s answer and it worked for me

window.onload=function(){
       //código aqui
}
javascript html

2 answers

1

Come on.

Your problem happens because you replicate several equal Ids within the same page. The function refers to the ID by itself, does not know how to differentiate which of the Ids you want. The solution is to put the onchange() within the div of each page, and change its function JS to refer to 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 the onchange for the div that is around each page, put the value this as function parameter, and modify your code to find the ID inside that div only. I did the test here and it worked, try to do in your.

  • 2

    I did not vote against, but your answer is wrong, although it may work. A idshould be unique on the page.

  • Yes, I know it should, but in his case, as the page is replicated several times within the same window, there is no way to change all the Ids and make a different function for each page knowing that there is not necessarily a limit on the number of pages.

  • Okay, I edited the Ids for classes. Had not touched me that could have done it, since in his code were all Ids. Thanks for the fix.

  • 1

    Matheus, the downvote was mine because of the ids. I was going to comment here soon for the correction. Downvote removed now, but be aware because the querySelector takes only the first find, while the querySelectorAll takes all found elements, returning a NodeList. Then just make a loop and modify.

  • Fernando, in his case, really needs to be connected each select with each image, so the querySelector. You need to select one at a time. Thank you also for drawing my attention to this. It would be possible to do it this way you said, but I think it would be more work comparing the two lists, if it can be compared each element of each page separately.

  • I don’t want a select each page, just a select ho top to apply the image to all pages

  • 1

    I had understood that you wanted to link each one with each select. I will edit

  • Thank those who had time to try to solve the problem, Vlw @Máttheusspoo Sam

Show 3 more comments

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, use 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 attribute class to pick up 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">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
</div>

  • Excuse my ignorance, how does this code in my code?

  • 1

    No need to apologize, the site serves precisely to learn. I’m on the phone now, so I won’t be able to work well on the explanation, but you would need to use classes in the images and select them as in my example. When I’m near my PC I better formulate the explanation

  • You have to do something else in that code, I tested it here and it doesn’t work, I just copied it and pasted it, but nothing happens

  • 1

    Look this Jsfiddle and see if it helps you.

  • Dude worked perfectly fine! I only had to implement a line to solve an error that was occurring, but it was very show, I will edit your answer

  • 1

    Edit your question. Not my answer. My answer is to show the concept, unless I have some error in the concept.

  • 1

    The common thing is to put a EDIT at the end of your question with the adjustments you used of my answer to solve your problem.

  • Gave error in execution, I edited there, take a look

  • Your edit broke the example. As I said, it puts in your question the change of the code you made. So my answer serves to explain a concept and in your question have the concept applied.

  • I’m pulling the cut

  • 1

    I removed it, rest assured. I also edited my codes so that I looked more like what you need.

Show 6 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.