我正在努力建立一个制作Mario Kart Wii许可证的网站。出于某种原因，即使我选择了不同的角色，switch语句也会始终显示Baby Mario的图片。这是一个正在进行中的项目，这就是它看起来没有完成的原因。这是我的代码：
$(document).ready(function(){
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
var name = document.getElementById("name");
var favRace = document.getElementById("favRace");
var bgrnd = document.getElementById("bgrnd");
var favChar = document.getElementById("favChar");
switch (favChar.value) {
case "Yoshi":
img = document.getElementById("yoshi");
break;
case "Baby Luigi":
img = document.getElementById("baby_luigi");
break;
case "Baby Daisy":
img = document.getElementById("baby_daisy");
break;
case "Baby Peach":
img = document.getElementById("baby_peach");
break;
case "Baby Mario":
img = document.getElementById("baby_mario");
break;
default:
img = "NULL";
}
$("#create").click(function(){
drawText("Name: " + name.value, 75, 10);
drawText("Favorite Race: " + favRace.value, 75, 20);
drawImg(img, 0, 0, 62, 72);
canvas.style.background = bgrnd.value;
document.getElementById("mainCanvas").style.display = "block";
});
function drawRect(x, y) {
ctx.fillStyle = "green";
ctx.fillRect(x, y, 8, 5);
}
function drawText(text, x, y) {
ctx.fillStyle = "black";
ctx.font = "9px Arial";
ctx.fillText(text, x, y);
}
function drawImg(img, x, y, width, height) {
ctx.drawImage(img, x, y, width, height);
ctx.strokeRect(x, y, width + 4, height + 4);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
}
});@font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#mainCanvas {
height: 300px;
width: 530px;
border: 2px solid black;
display: none;
}
.img {
display: none;
}
header {
background: -linear-gradient(#EEEEEE, #DDDDDD);
background: -webkit-linear-gradient(#EEEEEE, #DDDDDD);
height: 50px;
margin: -.6%;
padding: 10px;
}
#title {
font-family: Bandits;
font-size: 55px;
color: #585858;
}
body {
background-color: rgb(134, 170, 230);
}
fieldset {
width: 60%;
text-align: left;
}
.yellow {
color: yellow;
}
#license {
border: 2px solid black;
border-radius: 5px;
}<!DOCTYPE HTML>
<HTML lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "description" content = "Create Mario Kart Wii Licenses!">
<meta name = "author" content = "Adam Oates">
<meta name = "title" content = "Mario Kart Wii">
<title title = "Mario Kart Wii | License Maker">
Mario Kart Wii | License Maker
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.js"></script>
<script type = "text/javascript" src = "main.js"></script>
</head>
<body>
<header>
<div id = "title">
MKWii License Maker
</div>
</header><br><br><br><br>
<section>
<div align = "center">
<form action = "" method = "post">
<fieldset>
Name: <input type = "text" id = "name" placeholder = "Name"><br><br>
Favorite Race: <input type = "text" id = "favRace" placeholder = "Favorite Race"><br><br>
Overall Ranking: <select id = "ranking">
<option id = "e" value = "e">E</option>
<option id = "d" value = "d">D</option>
<option id = "c" value = "c">C</option>
<option id = "b" value = "b">B</option>
<option id = "a" value = "a">A</option>
<option id = "star1" value = "star1">★</option>
<option id = "star2" value = "star2">★★</option>
<option id = "star3" value = "star3">★★★</option>
</select><br><br>
Versus Points: <select id = "vrPoints">
<option id = "1000+" value = "1000+">1000+</option>
<option id = "2000+" value = "2000+">2000+</option>
<option id = "3000+" value = "3000+">3000+</option>
<option id = "4000+" value = "4000+">4000+</option>
<option id = "5000+" value = "5000+">5000+</option>
<option id = "6000+" value = "6000+">6000+</option>
<option id = "7000+" value = "7000+">7000+</option>
<option id = "8000+" value = "8000+">8000+</option>
<option id = "9000+" value = "9000+">9000+</option>
</select><br><br>
Favorite Character: <select id = "favChar">
<option value = "Baby Mario" id = "bm">Baby Mario</option>
<option value = "Baby Luigi" id = "bl">Baby Luigi</option>
<option value = "Baby Peach" id = "bp">Baby Peach</option>
<option value = "Baby Daisy" id = "bd">Baby Daisy</option>
<option value = "Toad" id = "toad">Toad</option>
<option value = "Toadette" id = "tdet">Toadette</option>
<option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
<option value = "Dry Bones" id = "db">Dry Bones</option>
<option value = "Mario" id = "mro">Mario</option>
<option value = "Luigi" id = "lgi">Luigi</option>
<option value = "Peach" id = "pch">Peach</option>
<option value = "Daisy" id = "dsy">Daisy</option>
<option value = "Yoshi" id = "ysh">Yoshi</option>
<option value = "Birdo" id = "bdo">Birdo</option>
<option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
<option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
<option value = "Wario" id = "wro">Wario</option>
<option value = "Waluigi" id = "wlgi">Waluigi</option>
<option value = "Donkey Kong" id = "dk">Donkey Kong</option>
<option value = "Bowser" id = "bwr">Bowser</option>
<option value = "King Boo" id = "kboo">King Boo</option>
<option value = "Rosalina" id = "rlna">Rosalina</option>
<option value = "Funkey Kong" id = "fk">Funkey Kong</option>
<option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
</select><br><br>
Secondary Character: <select id = "secChar">
<option value = "Baby Mario" id = "bm">Baby Mario</option>
<option value = "Baby Luigi" id = "bl">Baby Luigi</option>
<option value = "Baby Peach" id = "bp">Baby Peach</option>
<option value = "Baby Daisy" id = "bd">Baby Daisy</option>
<option value = "Toad" id = "toad">Toad</option>
<option value = "Toadette" id = "tdet">Toadette</option>
<option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
<option value = "Dry Bones" id = "db">Dry Bones</option>
<option value = "Mario" id = "mro">Mario</option>
<option value = "Luigi" id = "lgi">Luigi</option>
<option value = "Peach" id = "pch">Peach</option>
<option value = "Daisy" id = "dsy">Daisy</option>
<option value = "Yoshi" id = "ysh">Yoshi</option>
<option value = "Birdo" id = "bdo">Birdo</option>
<option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
<option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
<option value = "Wario" id = "wro">Wario</option>
<option value = "Waluigi" id = "wlgi">Waluigi</option>
<option value = "Donkey Kong" id = "dk">Donkey Kong</option>
<option value = "Bowser" id = "bwr">Bowser</option>
<option value = "King Boo" id = "kboo">King Boo</option>
<option value = "Rosalina" id = "rlna">Rosalina</option>
<option value = "Funkey Kong" id = "fk">Funkey Kong</option>
<option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
</select><br><br>
Vehichle Used For Favorite Character: <select id = "favKart">
<optgroup label = "Light Weight">
<option value = "Standard Kart S" id = "sks">Standard Kart S</option>
<option value = "Booster Seat" id = "bseat">Booster Seat</option>
<option value = "Mini Beast" id = "mb">Mini Beast</option>
<option value = "Cheap Charger" id = "cc">Cheap Charger</option>
<option value = "Tiny Titan" id = "tt">Tiny Titan</option>
<option value = "Blue Falcon" id = "bf">Blue Falcon</option>
<option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
<option value = "Bullet Bike" id = "bb">Bullet Bike</option>
<option value = "Bit Bike" id = "bitb">Bit Bike</option>
<option value = "Quacker" id = "qkr">Quacker</option>
<option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
<option value = "Jet Bubble" id = "jb">Jet Bubble</option>
<optgroup label = "Medium Weight">
<option value = "Standard Kart M" id = "skm">Standard Kart M</option>
<option value = "Classic Dragster" id = "cd">Classic Dragster</option>
<option value = "Wild Wing" id = "ww">Wild Wing</option>
<option value = "Super Blooper" id = "sb">Super Blooper</option>
<option value = "Daytripper" id = "dtrp">Daytripper</option>
<option value = "Sprinter" id = "sprnt">Sprinter</option>
<option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
<option value = "Mach Bike" id = "machb">Mach Bike</option>
<option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
<option value = "Zip Zip" id = "zip">Zip Zip</option>
<option value = "Sneakster" id = "sneak">Sneakster</option>
<option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
<optgroup label = "Heavy Weight">
<option value = "Standard Kart L" id = "skl">Standard Kart L</option>
<option value = "Offroader" id = "offrdr">Offroader</option>
<option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
<option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
<option value = "Jetsetter" id = "jetstr">Jetsetter</option>
<option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
<option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
<option value = "Flame Runner" id = "frner">Flame Runner</option>
<option value = "Wario Bike" id = "wrobike">Wario Bike</option>
<option value = "Shooting Star" id = "shstr">Shooting Star</option>
<option value = "Spear" id = "spear">Spear</option>
<option value = "Phantom" id = "phntm">Phantom</option>
</select><br><br>
Vehichle Used For Secondary Character: <select id = "favKart">
<optgroup label = "Light Weight">
<option value = "Standard Kart S" id = "sks">Standard Kart S</option>
<option value = "Booster Seat" id = "bseat">Booster Seat</option>
<option value = "Mini Beast" id = "mb">Mini Beast</option>
<option value = "Cheap Charger" id = "cc">Cheap Charger</option>
<option value = "Tiny Titan" id = "tt">Tiny Titan</option>
<option value = "Blue Falcon" id = "bf">Blue Falcon</option>
<option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
<option value = "Bullet Bike" id = "bb">Bullet Bike</option>
<option value = "Bit Bike" id = "bitb">Bit Bike</option>
<option value = "Quacker" id = "qkr">Quacker</option>
<option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
<option value = "Jet Bubble" id = "jb">Jet Bubble</option>
<optgroup label = "Medium Weight">
<option value = "Standard Kart M" id = "skm">Standard Kart M</option>
<option value = "Classic Dragster" id = "cd">Classic Dragster</option>
<option value = "Wild Wing" id = "ww">Wild Wing</option>
<option value = "Super Blooper" id = "sb">Super Blooper</option>
<option value = "Daytripper" id = "dtrp">Daytripper</option>
<option value = "Sprinter" id = "sprnt">Sprinter</option>
<option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
<option value = "Mach Bike" id = "machb">Mach Bike</option>
<option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
<option value = "Zip Zip" id = "zip">Zip Zip</option>
<option value = "Sneakster" id = "sneak">Sneakster</option>
<option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
<optgroup label = "Heavy Weight">
<option value = "Standard Kart L" id = "skl">Standard Kart L</option>
<option value = "Offroader" id = "offrdr">Offroader</option>
<option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
<option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
<option value = "Jetsetter" id = "jetstr">Jetsetter</option>
<option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
<option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
<option value = "Flame Runner" id = "frner">Flame Runner</option>
<option value = "Wario Bike" id = "wrobike">Wario Bike</option>
<option value = "Shooting Star" id = "shstr">Shooting Star</option>
<option value = "Spear" id = "spear">Spear</option>
<option value = "Phantom" id = "phntm">Phantom</option>
</select><br><br>
License Color: <select id = "bgrnd">
<option value = "blue" id = "blue">Blue</option>
<option value = "red" id = "red">Red</option>
<option value = "white" id = "white">White</option>
<option value = "green" id = "green">Green</option>
<option value = "navy" id = "navy">Navy Blue</option>
</select><br><br>
<input type = "button" id = "create" value = "Create License">
</fieldset>
</form><br><br><br>
<canvas id = "mainCanvas"></canvas>
</div>
<img src = "images/yoshi.png" id = "yoshi" class = "img">
<img src = "images/baby_mario.png" id = "baby_mario" class = "img">
<img src = "images/baby_luigi.png" id = "baby_luigi" class = "img">
<img src = "images/baby_daisy.png" id = "baby_daisy" class = "img">
<img src = "images/baby_peach.png" id = "baby_peach" class = "img">
</section>
<footer>
</footer>
</body>
</HTML>
答案 0 :(得分：2)
您需要将其包装到事件处理程序中，并获取所选值，如下所示：
$('#favChar').change(function(){
var favChar = document.getElementById("favChar");
var favorite = favChar.options[favChar.selectedIndex].value;
switch (favorite) {
case "Yoshi":
img = document.getElementById("yoshi");
break;
case "Baby Luigi":
img = document.getElementById("baby_luigi");
break;
case "Baby Daisy":
img = document.getElementById("baby_daisy");
break;
case "Baby Peach":
img = document.getElementById("baby_peach");
break;
case "Baby Mario":
img = document.getElementById("baby_mario");
break;
default:
img = "NULL";
}
});