如何在使用 javascript 更改 select 上的选项时更改图像
[英]How to change image while i change the option on select using javascript
问题描述
here is my code which is not working.
这是我的代码，它不起作用。
<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="type-1-red" class="attached enabled">type 1 red</option>
<option value="type-1-rose-glod" class="attached enabled">type 1 rose glod</option>
<option value="type-2-red" class="attached enabled">type 2 red</option>
<option value="type-2-rose-glod" class="attached enabled">type 2 rose glod</option>
</select>
<img id="image-custom" src="https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-3.jpg" height="auto" width="20%">
<script>
var colorUrlMap = {
"type-1-red": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-3.jpg_640x640-3.jpg",
"type-1-rose-glod": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-2.jpg_640x640-2.jpg",
"type-2-red": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-1.jpg_640x640-1.jpg",
"type-2-rose-glod": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging.jpg_640x640.jpg"
};
document.getElementById('pa_color').addEventListener('onchange', function() {
document.getElementById('image-custom').src = colorUrlMap[this.value];
}
</script>
Can anyone tell me what is wrong with my code?谁能告诉我我的代码有什么问题？ Or can anyone solve it?或者任何人都可以解决它？
1 个解决方案
解决方案1
0 已采纳 2020-06-10 19:28:58
The best thing you can do for yourself in debugging problems is to look at the error messages.在调试问题时，您可以为自己做的最好的事情就是查看错误消息。 Running your code there is a clear error that says you are missing a ) after argument list.运行您的代码有一个明确的错误，表明您在参数列表之后缺少) 。 Your first problem is you are missing a closing ) after calling .addEventListener() .您的第一个问题是您在调用.addEventListener() ) Your second problem is instead of onchange you need to be using change when calling .addEventListener() .您的第二个问题是调用.addEventListener()时需要使用change而不是onchange 。
var colorUrlMap = { "type-1-red": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-3.jpg_640x640-3.jpg", "type-1-rose-glod": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-2.jpg_640x640-2.jpg", "type-2-red": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-1.jpg_640x640-1.jpg", "type-2-rose-glod": "https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging.jpg_640x640.jpg" }; document.getElementById('pa_color').addEventListener('change', function() { document.getElementById('image-custom').src = colorUrlMap[this.value]; })
<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="type-1-red" class="attached enabled">type 1 red</option> <option value="type-1-rose-glod" class="attached enabled">type 1 rose glod</option> <option value="type-2-red" class="attached enabled">type 2 red</option> <option value="type-2-rose-glod" class="attached enabled">type 2 rose glod</option> </select> <img id="image-custom" src="https://sparklesection.com/wp-content/uploads/2020/06/Portable-LED-Makeup-Mirror-Adjustable-Lighted-Mini-Circular-Travel-Sensing-Lighting-Cosmetic-Mirror-Wireless-USB-Charging-3.jpg" height="auto" width="20%">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
更改图像时更改选择选项的 JavaScript - JavaScript to change select option when changing image
选择更改选项时更改图像 - Change image on change option in select
如何使用JavaScript更改HTML选择选项项 - How to change HTML select option items using javascript
创建选项时如何更改选项的背景图像？ - How can I change the background-image of an option while creating it?
使用ASP且没有JavaScript时选择/选项/更改值？ - Select/Option/value on change using ASP and no JavaScript?
使用javascript在选择下拉菜单中更改选项 - Change option in select drop down using javascript
使用javascript更改默认的“选择”选项 - Change the default Select option using javascript
我怎样才能改变颜色<select>标签依赖于选择的选项（使用纯 JavaScript）？ - How can I change the color of the <select> Tag dependent on the option chosen (using pure JavaScript)?
如何在javascript中更改select标签选项？ - How to change the select tag option in javascript?
如何使用javascript更改图像？ - How do I change an image using javascript?
相关标签