javascript - 可点击的下拉列表图像

Question

所以，我在这里想做的是制作一个点击游戏。我希望可以从下拉列表中选择敌人，然后您可以单击您选择的任何敌人来添加到您的资源中(本游戏有四个)。但是，当我使用此代码时，可点击的图像将不会显示。有没有更有效的方法来做到这一点？这是我正在处理的部分的 HTML 和 Javascript(其他部分已经过测试以确保它们有效)。它引用的图像位于同一文件夹中，并且 onclick 函数已经编写，并且使用非下拉列表图像进行了测试并工作。下拉列表适用于不可点击的图像。当我把它们放在一起时，它们似乎不起作用。

function changeE(){
	var dropdownList = document.getElementById('changeEid');
	var selectedIndex = dropdownList.selectedIndex;
	var selectedValue = dropdownList.options[selectedIndex].value;
	
	var enemyDiv = document.getElementById('enemyHere');
	switch(selectedValue){
		case 'DestroyerPrincess':
			enemydiv.innerHTML = '<img src="B1-DestroyerPrincess.png" width="445px" height="590px" onclick="fuelClick(1);ammoClick(1); steelClick(1); bauxiteClick(1)">';
			break;
		case 'LightCruiserDemon':
			enemydiv.innerHTML = '<img src="B2-LightCruiserDemon.png" width="424px" height="616px" onclick="fuelClick(1);ammoClick(1); steelClick(1); bauxiteClick(1)">';
			break;
			}
	};

	Enemy
	<select id="changeEid" onclick="javascript:changeE();">
		<option value="DestroyerPrincess">Destroyer Princess</option>
		<option value="LightCruiserDemon">Light Cruiser Demon</option>
		</select>
	<div id="enemyHere">
	</div>

Answer 1

这只是一个错字。在代码的 JavaScript 部分，将 enemydiv.innerHTML 替换为 enemyDiv.innerHTML

function changeE(){
    var dropdownList = document.getElementById('changeEid');
    var selectedIndex = dropdownList.selectedIndex;
    var selectedValue = dropdownList.options[selectedIndex].value;

    var enemyDiv = document.getElementById('enemyHere');
    switch(selectedValue){
        case 'DestroyerPrincess':
            enemyDiv.innerHTML = '<img src="B1-DestroyerPrincess.png" width="445px" height="590px" onclick="fuelClick(1);ammoClick(1); steelClick(1); bauxiteClick(1)">';
            break;
        case 'LightCruiserDemon':
            enemyDiv.innerHTML = '<img src="B2-LightCruiserDemon.png" width="424px" height="616px" onclick="fuelClick(1);ammoClick(1); steelClick(1); bauxiteClick(1)">';
            break;
            }
    };