为什么我的 JavaScript switch 语句不起作用？

Question

我正在尝试制作一个制作马里奥赛车 Wii 许可证的网站。出于某种原因，switch 语句总是显示小马里奥的图片，即使我 select 一个不同的角色。这是一个正在进行的项目，这就是它看起来没有完成的原因。这是我的代码：

$(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">&#9733;</option>
       <option id = "star2" value = "star2">&#9733;&#9733;</option>
       <option id = "star3" value = "star3">&#9733;&#9733;&#9733;</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>

Answer 1

您需要将其包装到事件处理程序中，并获取选定的值，如下所示：

$('#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";
    }


 });

Show log

为什么我的 JavaScript switch 语句不起作用？

Why does my JavaScript switch statement not work?

html

javascript

jquery

switch-statement