javascript - 使用选择显示来自对象的图像

Question

我如何使用 javascript 显示来自对象的图像而不是将图像链接放在值上，这里是演示 Demo Codepen

我这样做了，但我想要的是将它放在对象中，并且当用户从左到右选择并最终在一个 div 中求和时，每个选择都有一个价格。

function displayImage(elem) {
    var image = document.getElementById("canvas");
    image.src = elem.value;
}

function displayImages(elem) {
    var image = document.getElementById("canvass");
    image.src = elem.value;
}

function same() {
    if (document.getElementById("canvas").src ==
        document.getElementById("canvass").src) {
        document.getElementById('total').innerHTML = "13$";
    }
}
var silver = {
    image: 'https://lol-eloboosting.com/assets/images/divisions/1_3.png',
    price: 20
};
var gold = {
    image: 'https://lol-eloboosting.com/assets/images/divisions/2_1.png',
    price: 25
};
var platina = {
    image: 'https://lol-eloboosting.com/assets/images/divisions/3_1.png',
    price: 35
};
var platina = {
    image: 'https://lol-eloboosting.com/assets/images/divisions/4_1.png',
    price: 45
};

Answer 1

如果你能像下面那样做，你已经保存了图像 url 和文本 以显示在 object 中，现在你可以使用 if condition 沿事件监听器更改，如下所示，我没有将您的代码用于引用示例，您可以尝试类似的东西。

var one = {
	url : "https://via.placeholder.com/200/111/fff",
  txt : "Hey my value is one!!!"
};

var two = {
	url : "https://via.placeholder.com/200/ff1/fff",
  txt : "Hey my value is two!!!"
};

var three = {
	url : "https://via.placeholder.com/200/3f2/fff",
  txt : "Hey my value is three!!!"
};

var slt = document.querySelector("select");
var ig = document.querySelector("img");
var para = document.createElement("p");

slt.addEventListener("change",function(){
	if(this.value == 1){
  	ig.src = one.url;
    para.textContent = one.txt;
    document.body.append(para);
  }
  if(this.value == 2){
  	ig.src = two.url;
    para.textContent = two.txt;
    document.body.append(para);
  }
  if(this.value == 3){
  	ig.src = three.url;
    para.textContent = three.txt;
    document.body.append(para);
  }
});

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<img src="https://via.placeholder.com/200/111/fff">