Doubt with Script - Show image according to Selection

Asked

Viewed 103 times

3

I am trying to make a select that changes the image according to the selected one, but I have two types of select with their respective images that should appear according to the selection. The problem is that either I make them both select to change the image of a single type of select I make both select to change the two types of image. I would like each select to change its image respectively. How can I do that?

My code:

<script type="text/javascript">
/* URL of folder with images  */
var baseURL_OF_images = "./";
/* array of default image files */
var images =
      [ "bronze.png", "prata.png",
        "gold.png", "platina.png",
        "diamante.png" ]
function switchImage(imgNum){
  var x = parseInt(imgNum);
  var src = baseURL_OF_images
                + ( ( x < 0 ) ? "bronze.png": images[x] );
  document.getElementById("#AvatarImage").src = src;
  document.getElementById("#AvatarImage2").src = src;
  return true;
}
</script>

</head>
<body>
<img id="#AvatarImage" name="#AvatarImage" src="bronze.png" style="widht:200px;height:200px;"/>
<select id="#AvatarImage" onChange="switchImage(this.options[this.selectedIndex].value);">
  <option value="-1" selected="0">Bronze</option>
  <option value="1">Prata</option>
  <option value="2">Ouro</option>
  <option value="3">Platina</option>
  <option value="4">Diamante</option>

</select>

<img id="#AvatarImage2" name="#AvatarImage2" src="bronze.png" style="widht:200px;height:200px;"/>
<select id="#AvatarImage2" onChange="switchImage(this.options[this.selectedIndex].value);">
  <option value="-1" selected="0">Bronze</option>
  <option value="1">Prata</option>
  <option value="2">Ouro</option>
  <option value="3">Platina</option>
  <option value="4">Diamante</option>

</select>

javascript html script

2 answers

0


You can send in the function as argument which target will be.
Each tag should have its id, so I’ve changed the ids.
Stay like this.:

<script type="text/javascript">
/* URL of folder with images  */
var baseURL_OF_images = "./";
/* array of default image files */
var images =
      [ "bronze.png", "prata.png",
        "gold.png", "platina.png",
        "diamante.png" ]
function switchImage(imgNum,target){
  var x = parseInt(imgNum);
  var src = baseURL_OF_images
                + ( ( x < 0 ) ? "bronze.png": images[x] );
  document.getElementById("AvatarImage"+target).src = src;
  //document.getElementById("#AvatarImage2").src = src; Não é mais necessário
  return true;
}
</script>

</head>
<body>
<img id="AvatarImage" name="AvatarImage" src="bronze.png" style="widht:200px;height:200px;"/>
<select id="SelectAvatarImage" onChange="switchImage(this.options[this.selectedIndex].value,'');">
  <option value="-1" selected="0">Bronze</option>
  <option value="1">Prata</option>
  <option value="2">Ouro</option>
  <option value="3">Platina</option>
  <option value="4">Diamante</option>

</select>

<img id="AvatarImage2" name="#AvatarImage2" src="bronze.png" style="widht:200px;height:200px;"/>
<select id="SelectAvatarImage2" onChange="switchImage(this.options[this.selectedIndex].value,2);">
  <option value="-1" selected="0">Bronze</option>
  <option value="1">Prata</option>
  <option value="2">Ouro</option>
  <option value="3">Platina</option>
  <option value="4">Diamante</option>

</select>

0

All right buddy, thanks for the help!

<script type="text/javascript">
/* URL of folder with images  */
var baseURL_OF_images = "./";
/* array of default image files */
var images =
      [ "bronze.png", "prata.png",
        "gold.png", "platina.png",
        "diamante.png" ]
function switchImage(imgNum,target){
  var x = parseInt(imgNum);
  var src = baseURL_OF_images
                + ( ( x < 0 ) ? "bronze.png": images[x] );
  document.getElementById("AvatarImage"+target).src = src;
  //document.getElementById("#AvatarImage2").src = src; Não é mais necessário
  return true;
}
</script>

</head>
<body>
<img id="AvatarImage" name="AvatarImage" src="bronze.png" style="widht:200px;height:200px;"/>
<select id="SelectAvatarImage" onChange="switchImage(this.options[this.selectedIndex].value,'');">
  <option value="-1" selected="0">Bronze</option>
  <option value="1">Prata</option>
  <option value="2">Ouro</option>
  <option value="3">Platina</option>
  <option value="4">Diamante</option>

</select>

<img id="AvatarImage2" name="#AvatarImage2" src="bronze.png" style="widht:200px;height:200px;"/>
<select id="SelectAvatarImage2" onChange="switchImage(this.options[this.selectedIndex].value,2);">
  <option value="-1" selected="0">Bronze</option>
  <option value="1">Prata</option>
  <option value="2">Ouro</option>
  <option value="3">Platina</option>
  <option value="4">Diamante</option>

</select>

Browser other questions tagged javascript html script

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