如何在javascript中使用onchange功能显示多张图片？
[英]How do you display multiple pictures with an onchange function in javascript?
问题描述
[Javascript][Html] I got several onchange functions via dropdown that show pictures... For Example: onchange A; 
[Javascript] [Html]我通过显示图片的下拉列表获得了几个onchange函数...例如：onchange A; onchange B; onchange B;
If i pick a picture from the onchange B function, the picture of A disappears... So how do you fix that? 如果我从onchange B功能中选择一张图片，A的图片就会消失......所以你如何解决这个问题呢？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-css/css/bootstrap.min.css">
<link rel="stylesheet" href="Style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="bootstrap-css/js/bootstrap.min.js"></script>
<script type="text/javascript">
function displayImage(elem1) {
var image1 = document.getElementById("body");
image1.src = elem1.value;}
function displayImage(elem2) {
var image2 = document.getElementById("buttons");
image2.src = elem2.value;}
function displayImage(elem3) {
var image3 = document.getElementById("Dpad");
image3.src = elem3.value;}
function displayImage(elem4) {
var image4 = document.getElementById("Sticks");
image4.src = elem4.value;}
function displayImage(elem5) {
var image5 = document.getElementById("Top");
image5.src = elem5.value;}
</script>
</head>
<body>
<img src="Bilder/Custom/EmptyBody.png" alt="EmptyBody" class="i0">
<img id="body" class="i1">
<img id="buttons" class="i1">
<img id="Dpad" class="i1">
<img id="Sticks" class="i1">
<img id="Top" class="i1">
<select name="imageList1" onchange="displayImage(this);">
<option value="Bilder/Custom/Body/BlackBody.png">Black</option>
<option value="Bilder/Custom/Body/BlueBody.png">Blue</option>
<option value="Bilder/Custom/Body/GreenBody.png">Green</option>
<option value="Bilder/Custom/Body/OrangeBody.png">Orange</option>
<option value="Bilder/Custom/Body/RedBody.png">Red</option>
<option value="Bilder/Custom/Body/WhiteBody.png">White</option>
<option value="Bilder/Custom/Body/YellowBody.png">Yellow</option>
<option value="Bilder/Custom/Body/RainbowBody.png">Rainbow</option>
</select>
<select name="imageList2" onchange="displayImage(this);">
<option value="Bilder/Custom/Buttons/StandardButtons.png">Standard</option>
<option value="Bilder/Custom/Buttons/360Buttons.png">360-Buttons</option>
</select>
<select name="imageList3" onchange="displayImage(this);">
<option value="Bilder/Custom/Dpad/BlackDPad.png">Black</option>
<option value="Bilder/Custom/Dpad/WhiteDPad.png">White</option>
</select>
<select name="imageList4" onchange="displayImage(this);">
<option value="Bilder/Custom/Sticks/BlackSticks.png">Black</option>
<option value="Bilder/Custom/Sticks/WhiteSticks.png">White</option>
</select>
<select name="imageList5" onchange="displayImage(this);">
<option value="Bilder/Custom/Top/BlackTop.png">Black</option>
<option value="Bilder/Custom/Top/BlueTop.png">Blue</option>
<option value="Bilder/Custom/Top/GreenTop.png">Green</option>
<option value="Bilder/Custom/Top/OrangeTop.png">Orange</option>
<option value="Bilder/Custom/Top/RedTop.png">Red</option>
<option value="Bilder/Custom/Top/WhiteTop.png">White</option>
<option value="Bilder/Custom/Top/YellowTop.png">Yellow</option>
</select>
</body>
</html>
3 个解决方案
解决方案1
0 2017-05-03 07:37:46
The problem is you have 5 functions with same name. 问题是你有5个同名的功能。 when you call displayImage() the script find the first función with this name 当你调用displayImage() ，脚本会找到第一个带有这个名字的函数
the solution is rename your functions 解决方案是重命名您的功能
Js not filter the name of params, only number of params Js不过滤params的名称，只有params的数量
Replace you id: like this 替换你的id：像这样
<html> <head> <script> function displayImage(elem){ var image1 = document.getElementById("body"); image1.src = elem1.value; } </script> </head> <body > <img src="img.jpg" alt="EmptyBody" class="i0"/> <img id="body" class="i1"/> <img id="buttons" class="i1"/> <img id="Dpad" class="i1"/> <img id="Sticks" class="i1"/> <img id="Top" class="i1"/> <select name="imageList1" onchange="displayImage(this);"> <option value="img.jpg">Black</option> <option value="img.jpg">Blue</option> <option value="img.jpg">Green</option> <option value="img.jpg">Orange</option> <option value="img.jpg">Red</option> <option value="img.jpg">White</option> <option value="img.jpg">Yellow</option> <option value="img.jpg">Rainbow</option> </select> <select name="imageList2" onchange="displayImage(this);"> <option value="img.jpg">Standard</option> <option value="img.jpg">360-Buttons</option> </select> <select name="imageList3" onchange="displayImage(this);"> <option value="img.jpg">Black</option> <option value="img.jpg">White</option> </select> <select name="imageList4" onchange="displayImage(this);"> <option value="img.jpg">Black</option> <option value="img.jpg">White</option> </select> <select name="imageList5" onchange="displayImage(this);"> <option value="img.jpg">Black</option> <option value="img.jpg">Blue</option> <option value="img.jpg">Green</option> <option value="img.jpg">Orange</option> <option value="img.jpg">Red</option> <option value="img.jpg">White</option> <option value="img.jpg">Yellow</option> </select> </body> </html>
解决方案2
0 已采纳 2017-05-03 07:38:39
Here's an example : 这是一个例子：
function displayImage(el,target) { var imageTarget = document.getElementById(target); imageTarget.src = el.value; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-css/css/bootstrap.min.css"> <link rel="stylesheet" href="Style.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="bootstrap-css/js/bootstrap.min.js"></script> </head> <body> <img src="Bilder/Custom/EmptyBody.png" alt="EmptyBody" class="i0"> <img id="body" class="i1"> <img id="buttons" class="i1"> <img id="Dpad" class="i1"> <img id="Sticks" class="i1"> <img id="Top" class="i1"> <select name="imageList1" onchange="displayImage(this,'body');"> <option value="Bilder/Custom/Body/BlackBody.png">Black</option> <option value="Bilder/Custom/Body/BlueBody.png">Blue</option> <option value="Bilder/Custom/Body/GreenBody.png">Green</option> <option value="Bilder/Custom/Body/OrangeBody.png">Orange</option> <option value="Bilder/Custom/Body/RedBody.png">Red</option> <option value="Bilder/Custom/Body/WhiteBody.png">White</option> <option value="Bilder/Custom/Body/YellowBody.png">Yellow</option> <option value="Bilder/Custom/Body/RainbowBody.png">Rainbow</option> </select> <select name="imageList2" onchange="displayImage(this,'buttons');"> <option value="Bilder/Custom/Buttons/StandardButtons.png">Standard</option> <option value="Bilder/Custom/Buttons/360Buttons.png">360-Buttons</option> </select> <select name="imageList3" onchange="displayImage(this,'Dpad');"> <option value="Bilder/Custom/Dpad/BlackDPad.png">Black</option> <option value="Bilder/Custom/Dpad/WhiteDPad.png">White</option> </select> <select name="imageList4" onchange="displayImage(this,'Sticks');"> <option value="Bilder/Custom/Sticks/BlackSticks.png">Black</option> <option value="Bilder/Custom/Sticks/WhiteSticks.png">White</option> </select> <select name="imageList5" onchange="displayImage(this,'Top');"> <option value="Bilder/Custom/Top/BlackTop.png">Black</option> <option value="Bilder/Custom/Top/BlueTop.png">Blue</option> <option value="Bilder/Custom/Top/GreenTop.png">Green</option> <option value="Bilder/Custom/Top/OrangeTop.png">Orange</option> <option value="Bilder/Custom/Top/RedTop.png">Red</option> <option value="Bilder/Custom/Top/WhiteTop.png">White</option> <option value="Bilder/Custom/Top/YellowTop.png">Yellow</option> </select> </body> </html>
解决方案3
0 2017-05-03 07:39:19
Here is no need to use same function for multiple time, you can use following code for this 这里不需要多次使用相同的功能，您可以使用以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-css/css/bootstrap.min.css">
<link rel="stylesheet" href="Style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="bootstrap-css/js/bootstrap.min.js"></script>
<script type="text/javascript">
function displayImage(elem1, elem2) {
var image1 = document.getElementById(elem2);
image1.src = elem1.value;
}
</script>
</head>
<body>
<img src="Bilder/Custom/EmptyBody.png" alt="EmptyBody" class="i0">
<img id="body" class="i1">
<img id="buttons" class="i1">
<img id="Dpad" class="i1">
<img id="Sticks" class="i1">
<img id="Top" class="i1">
<select name="imageList1" onchange="displayImage(this, 'body');">
<option value="Bilder/Custom/Body/BlackBody.png">Black</option>
<option value="Bilder/Custom/Body/BlueBody.png">Blue</option>
<option value="Bilder/Custom/Body/GreenBody.png">Green</option>
<option value="Bilder/Custom/Body/OrangeBody.png">Orange</option>
<option value="Bilder/Custom/Body/RedBody.png">Red</option>
<option value="Bilder/Custom/Body/WhiteBody.png">White</option>
<option value="Bilder/Custom/Body/YellowBody.png">Yellow</option>
<option value="Bilder/Custom/Body/RainbowBody.png">Rainbow</option>
</select>
<select name="imageList2" onchange="displayImage(this, 'buttons');">
<option value="Bilder/Custom/Buttons/StandardButtons.png">Standard</option>
<option value="Bilder/Custom/Buttons/360Buttons.png">360-Buttons</option>
</select>
<select name="imageList3" onchange="displayImage(this, 'Dpad');">
<option value="Bilder/Custom/Dpad/BlackDPad.png">Black</option>
<option value="Bilder/Custom/Dpad/WhiteDPad.png">White</option>
</select>
<select name="imageList4" onchange="displayImage(this, 'Sticks');">
<option value="Bilder/Custom/Sticks/BlackSticks.png">Black</option>
<option value="Bilder/Custom/Sticks/WhiteSticks.png">White</option>
</select>
<select name="imageList5" onchange="displayImage(this, 'Top');">
<option value="Bilder/Custom/Top/BlackTop.png">Black</option>
<option value="Bilder/Custom/Top/BlueTop.png">Blue</option>
<option value="Bilder/Custom/Top/GreenTop.png">Green</option>
<option value="Bilder/Custom/Top/OrangeTop.png">Orange</option>
<option value="Bilder/Custom/Top/RedTop.png">Red</option>
<option value="Bilder/Custom/Top/WhiteTop.png">White</option>
<option value="Bilder/Custom/Top/YellowTop.png">Yellow</option>
</select>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在JavaScript中显示多个堆叠在一起的图片 - How to display multiple pictures stacked on top of each other in JavaScript
你如何为javascript中的复选框创建onchange事件？ - How do you create onchange event for checkbox in javascript?
如何在Redux-Form中将prop传递给onChange函数？ - How do you pass a prop to an onChange function in Redux-Form?
如何使用一个Javascript函数将数组中多张图片的大小加倍 - How to double the size of multiple pictures in an array with one Javascript function
如何为具有多个框架的网页添加javascript函数？ - How do you add a javascript function to a webpage with multiple frames?
如何使用JavaScript激活onchange函数？ - How to activate the onchange function with JavaScript?
How do you display the output of a JavaScript function in an HTML element rather than a JavaScript alert? - How do you display the output of a JavaScript function in an HTML element rather than a JavaScript alert?
如何使图片交替闪烁 - How do you make pictures blink alternatively
您如何显示与Facebook一样快的图片？ - How do you show pictures as fast as Facebook?
javascript中通过onchange function传递多个参数 - Passing multiple parameters through onchange function in javascript
相关标签