通过在下拉列表中选择来更改图像

Question

所以，我为Kancolle制作了一个点击式的fangame（如Cookie Clicker）。我对脚本语言和东西有点新，所以我一直在使用指南等，但我想做一些非常具体的事情，并且在不同方面组合多个教程是行不通的。

我将包含目前为止的代码。我正在使用html，css和javascript进行游戏。我还有更多想要补充的内容，但我现在正在做一件事。

我目前正在尝试做什么;在页面右侧的旁边部分，有一个图像。我希望这个图像可以通过下拉列表进行更改，因此玩家可以使用下拉列表（我将放置在图像正上方）来选择他们想要在侧面显示哪个角色CG。我还希望此功能包含可解锁的内容;例如在某些级别解锁新的cgs。

这些功能非常具体，而且我对编码很新，以至于我在确定如何处理它时遇到了很多麻烦。

我知道如何制作一个删除列表，并且可以将图像放在一边，但老实说我不知道​​如何通过单击选项来更改图像。这听起来很简单，我必须错过一些明显的东西，但我努力尝试，出于某种原因，我必须弄乱一些基本的东西，因为我尝试了很多次和方法，但我有点不知道在哪里甚至开始。帮助制作可解锁的内容也会受到赞赏，但我认为如果我努力尝试，我可以解决它（代码中的其他问题，我无法正确测试）。

如果我提出愚蠢的问题提前抱歉，我有一个学习障碍，并且有一种思考问题的方式，当事情以其他方式运作时，对他人来说显而易见的事情有时很难立即理解

这是代码。我现在所拥有的功能（至少在我的浏览器中），虽然我有很多功能需要添加。我尝试更改代码以进行下拉选择是如此多样和错误而且我迷失了，以至于我觉得他们在这里会非常有帮助。

此外，如果您有任何关于如何改进我目前所做的工作的提示，我们将不胜感激！

提前谢谢！

＆＃13;

＆＃13;

var fuel = 0;
function fuelClick(number){
    fuel = fuel + number;
    document.getElementById("fuel").innerHTML = fuel;
};

var ammo = 0;
function ammoClick(number){
    ammo = ammo + number;
    document.getElementById("ammo").innerHTML = ammo;
};

var steel = 0;
function steelClick(number){
    steel = steel + number;
    document.getElementById("steel").innerHTML = steel;
};

var bauxite = 0;
function bauxiteClick(number){
    bauxite = bauxite + number;
    document.getElementById("bauxite").innerHTML = bauxite;
};

var cursors = 0;
function buyCursor(){
    var cursorCost = Math.floor(10 * Math.pow(1.1,cursors)); 
    if(fuel >= cursorCost)if(ammo >= cursorCost)if(steel >= cursorCost)if(bauxite >= cursorCost){ 
        cursors = cursors + 1; 
    	fuel = fuel - cursorCost;
		ammo = ammo - cursorCost;
		steel = steel - cursorCost;
		bauxite = bauxite - cursorCost; 
        document.getElementById('cursors').innerHTML = cursors; 
        document.getElementById('fuel').innerHTML = fuel; 
		document.getElementById('ammo').innerHTML = ammo;
		document.getElementById('steel').innerHTML = steel;
		document.getElementById('bauxite').innerHTML = bauxite;
    };
    var nextCost = Math.floor(10 * Math.pow(1.1,cursors));       
    document.getElementById('cursorCost').innerHTML = nextCost;  
};

var fubuki = 0;
function buyFubuki(){
	var fubukiCost = Math.floor(50 * Math.pow(1.5,fubuki));
	if(fuel >= fubukiCost){
		fubuki = fubuki + 1;
		fuel = fuel - fubukiCost;
		document.getElementById('fubuki').innerHTML = fubuki;
		document.getElementById('fuel').innerHTML = fuel;
	};
	var nextCost = Math.floor(50 * Math.pow(1.5,fubuki));
	document.getElementById('fubukiCost').innerHTML = nextCost;
};

var atago = 0;
function buyAtago(){
	var atagoCost = Math.floor(100 * Math.pow(1.5,atago));
	if(ammo >= atagoCost){
		atago = atago + 1;
		ammo = ammo - atagoCost;
		document.getElementById('atago').innerHTML = atago;
		document.getElementById('ammo').innerHTML = ammo;
	};
	var nextCost = Math.floor(100 * Math.pow(1.5,atago));
	document.getElementById('atagoCost').innerHTML = nextCost;
};

var ryuujou = 0;
function buyRyuujou(){
	var ryuujouCost = Math.floor(250 * Math.pow(1.5,ryuujou));
	if(bauxite >= ryuujouCost){
		ryuujou = ryuujou + 1;
		bauxite = bauxite - ryuujouCost;
		document.getElementById('ryuujou').innerHTML = ryuujou;
		document.getElementById('bauxite').innerHTML = bauxite;
	};
	var nextCost = Math.floor(250 * Math.pow(1.5,ryuujou));
	document.getElementById('ryuujouCost').innerHTML = nextCost;
};

var i168 = 0;
function buyI168(){
	var i168Cost = Math.floor(500 * Math.pow(1.5,i168));
	if(steel >= i168Cost){
		i168 = i168 + 1;
		steel = steel - i168Cost;
		document.getElementById('i168').innerHTML = i168;
		document.getElementById('steel').innerHTML = steel;
	};
	var nextCost = Math.floor(500 * Math.pow(1.5,i168));
	document.getElementById('i168Cost').innerHTML = nextCost;
};

var hayasui = 0;
function buyHayasui(){
	var hayasuiCost = Math.floor(1000 * Math.pow(1.5,hayasui));
	if(fuel >= hayasuiCost)if(ammo >= hayasuiCost)if(bauxite >= hayasuiCost)if(steel >= hayasuiCost){
		hayasui = hayasui + 1;
		fuel = fuel - hayasuiCost;
		ammo = ammo - hayasuiCost;
		bauxite = bauxite - hayasuiCost;
		steel = steel - hayasuiCost;
		document.getElementById('hayasui').innerHTML = hayasui;
		document.getElementById('fuel').innerHTML = fuel;
		document.getElementById('ammo').innerHTML = ammo;
		document.getElementById('bauxite').innerHTML = bauxite;
		document.getElementById('steel').innerHTML = steel;
	};
	var nextCost = Math.floor(1000 * Math.pow(1.5,hayasui));
	document.getElementById('hayasuiCost').innerHTML = nextCost;
};

window.setInterval(function(){
	
	fuelClick(cursors + (fubuki * 5) + (hayasui * 5));
	ammoClick(cursors + (atago * 5) + (hayasui * 5));
	steelClick(cursors + (i168 * 5) + (hayasui * 5));
	bauxiteClick(cursors + (ryuujou * 5) + (hayasui * 5));
	
}, 1000);

＆＃13;

body {
    background-image: url("http://imgur.com/9NR5X19.png");
	background-repeat: no-repeat;
	font-family: 'Courgette', cursive;
	color: white
	}

header {
	text-align:center;
	padding:5px;
	font-size:40px;
	}
	
nav {
	text-align:center;
	padding:5px;
	font-size:25px;
	}
	
section {
	float:left;
	text-align:center;
	padding:5px;
	}
	
article {
	float:left;
	text-align:center;
	padding:5px;
	font-size:20px;
	}
	
#tablewrapper {
	position:relative;
	}
	
#tablescroll {
	height:400px;
	overflow:auto;  
	margin-top:20px;
	}
	
aside {
	float:left;
	text-align:center;
	padding:5px;
	}
	
footer {
	text-align:center;
	padding:5px;
	font-size:30px;
	clear:both;
	}

＆＃13;

<html>

	<head>
		<link rel="stylesheet" type="text/css" href="interface6.css" />
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Courgette" />
	</head>
	
	<body>
	
	<header>
	Kantai Clicker
	</header>
	
	<nav>
	<img src="http://i.imgur.com/SKSVcKP.png"></img><span id="fuel">0</span>
	<img src="http://i.imgur.com/3DmM3nL.png"></img><span id="ammo">0</span>
	<img src="http://i.imgur.com/6Fc3m2k.png"></img><span id="steel">0</span>
	<img src="http://i.imgur.com/oyRQ8yQ.png"></img><span id="bauxite">0</span>
	</nav>
	
	<section>
	<button	style="border:none; background-color:transparent;" onclick="fuelClick(1);ammoClick(1); steelClick(1); bauxiteClick(1)"><img src="http://i.imgur.com/NHoSDfB.png" style="width:527px;height:400px;"></img></button>
	</section>
	
	<article>
	<div id="tablewrapper">
	<div id="tablescroll">
	Information Section<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	blah blah blah<br>
	Cursors: <span id="cursors">0</span> Cost: <span id="cursorCost">10</span> <img src="http://i.imgur.com/SKSVcKP.png"></img> <img src="http://i.imgur.com/3DmM3nL.png"></img> <img src="http://i.imgur.com/6Fc3m2k.png"></img> <img src="http://i.imgur.com/oyRQ8yQ.png"></img>
	<br>
	<button onclick="buyCursor()">Buy Cursor</button>
	<br>
	Fubuki: <span id="fubuki">0</span> Cost: <span id="fubukiCost">50</span> <img src="http://i.imgur.com/SKSVcKP.png"></img>
	<br>
	<button onclick="buyFubuki()">Buy Fubuki</button>
	<br>
	Atago: <span id="atago">0</span> Cost: <span id="atagoCost">100</span> <img src="http://i.imgur.com/3DmM3nL.png"></img>
	<br>
	<button onclick="buyAtago()">Buy Atago</button>
	<br>
	Ryuujou: <span id="ryuujou">0</span> Cost: <span id="ryuujouCost">250</span> <img src="http://i.imgur.com/oyRQ8yQ.png"></img>
	<br>
	<button onclick="buyRyuujou()">Buy Ryuujou</button>
	<br>
	I-168: <span id="i168">0</span> Cost: <span id="i168Cost">500</span> <img src="http://i.imgur.com/6Fc3m2k.png"></img>
	<br>
	<button onclick="buyI168()">Buy I-168</button>
	<br>
	Hayasui: <span id="hayasui">0</span> Cost: <span id="hayasuiCost">1000</span> <img src="http://i.imgur.com/SKSVcKP.png"></img> <img src="http://i.imgur.com/3DmM3nL.png"></img> <img src="http://i.imgur.com/6Fc3m2k.png"></img> <img src="http://i.imgur.com/oyRQ8yQ.png"></img>
	<br>
	<button onclick="buyHayasui()">Buy Hayasui</button>
	</div>
	</div>
	</article>
	
	<aside>
	<img src="http://i.imgur.com/6u96uVs.png" style="width:284px;height:500px;"></img>
	</aside>
	
	<footer>
	Version Alpha
	</footer>
	
	<script type="text/javascript" src="main6.js"></script>
	
	</body>
	
</html>

＆＃13;

＆＃13;

＆＃13;