使用多个按钮和javascript更改图像

我有另一个stackoverflow问题的代码，可以使用multiple SELECT和javascript更改图像：

函数swapImage（）{
var image=document.getElementById（“imageToSwap”）；
var color=document.getElementById（“color”）.value；
var size=document.getElementById（“size”）.value；
image.src=“img/”+大小+”颜色；
};

红色
绿色
小的
大的
你可以像下面这样做。它的作品很好，它的初学者可以理解

var color = 'Red';
var size = 'Green';

function changeColor(newColor) {
    color = newColor;
    updateImage();
}

function changeSize(newSize) {
    size = newSize;
    updateImage();
}

function updateImage(){
    var image = document.getElementById("imageToSwap");
    image.src = "img/" + size + "_" + color;
};

<img id="imageToSwap" src="img/red.png">

<div>
  <button value="red.png" onClick="changeColor('Red')">Red</button>
  <button value="green.png" onClick="changeColor('Green')">Green</button>
</div>

<div>
  <button value="small" onClick="changeSize('Small')">Small</button>
  <button value="large" onClick="changeSize('Large')">Large</button>
</div>

var color='Red'；
变量大小='绿色'；
函数changeColor（newColor）{
颜色=新颜色；
updateImage（）；
}
函数changeSize（newSize）{
大小=新闻大小；
updateImage（）；
}
函数updateImage（）{
var image=document.getElementById（“imageToSwap”）；
image.src=“img/”+大小+”颜色；
};
红色
绿色
小的
大的
您可以通过按钮实现与

这里我调用了每个按钮的函数
onclick
。这些按钮位于
div
内，id为
color
和
size
。将id属性作为颜色和大小的更改


var color='red.png'//默认值
变量大小='小'//默认值
功能交换图像（obj）{
var image=document.getElementById（“imageToSwap”）；
if（obj.parentElement.getAttribute（'id'）==“color”）{
color=obj.getAttribute（'value'）
}
if（obj.parentElement.getAttribute（'id'）=“大小”）{
size=obj.getAttribute（'value'）
}
image.src=“img/”+大小+”颜色；
};

红色
绿色
小的
大的
非常感谢您！！非常感谢你！！