Question

我的作业是使用javascript switch语句创建一个显示图像和下拉列表的网页。编写代码，以便在下拉列表中进行选择时，页面上的图像将更改以反映选择，并且警报框将显示所选图像的唯一消息。我创建了switch case语句，每个case之间有一个中断。最后一种情况是默认情况下，它有自己的警报消息。我宣布了一个全局变量。在body部分中，我给出了每个选项的select元素id和值。您将在switch case语句上方看到一个注释掉的函数，因为它不起作用。没有其他情况或他们的警报显示。但代码部分有效。页面图像和下拉列表显示。我似乎无法改变图像并显示警告框。我昨天和今天至少待了二十个小时。我可以使用一些帮助。建议？从昨天开始，我尝试在函数和交换机中使用多个参数。发生的情况是警报框停止显示或进入默认状态。我正在考虑改变页面内容的答案，即下拉列表中的图像可能是在表单中。我尝试了document.getElementById（“pic”）。value并在函数和开关中使用它，但它没有用。所以我很难过。这是我的变化。如果有人能给我一些提示，我会很感激。就像我说的一切都有效，除了页面内容在交换机中没有变化。

这是链接http://ciswebs.smc.edu/cis54/tyson_schweidel/SwitchSunGuy.htm 和代码：

代码部分是包含switch case语句的javascript。正文部分包含选择元素，即下拉菜单。 var inobj，sunPic; function changepic（inobj，sunPic）{

 switch (inobj){

 case "0":
    sunPic ="1";
    alert("Please make a selection or go back to bed.");
    break;

  case "1":
    document.getElementById("pic").innerHTML = 2;
    alert("I am glad you are happy.");
    break;

  case "2":
   sunPic ="3";
    alert("I am sorry you are sad.");
    break;

  case "3":
   sunPic= "4";
    alert("It is great you are feeling cool.");
    break;

  case "4":
   sunPic= "5";
    alert("I hope you get past that soon.");
    break;
  default:
    alert("You need to fix something!");
    break;
  }
  } 


  </script>
</head>
<body>
<img src="items/Sun0.jpg" id="pic" alt="A funny face with question mark above.">
<p> Make selection to change the image.</p>
<form name = "sunPic" action="">
<select name="sunPic" onChange="changepic(this.value);">
<option  alt="funny face" value="0">Select</option>
<option  alt="happy face" value="1">Happy</option>
<option  alt="sad face"   value="2">Sad</option>
<option  alt="cool face"  value="3">Cool</option>
<option  alt="puzzled face" value="4">Unsure</option>
</select>
</form>
</body>
<html>

Answer 1

由于这是家庭作业，我会给你一个提示，让你思考。什么是用户改变的价值。你现在身体上有变化，但它应该在哪里呢？

Answer 2

我修复了下面的选择 - 我没有改变它以制作不同的图片（因为你没有给网址）。我会把它的一部分给你 - 但也许这会有助于挫败感。注意：页面上只能有一个给定值的id。

这是工作小提琴：http://jsfiddle.net/KdebH/

<img src="items/Sun0.jpg" id="pic" alt="A funny face with question mark above.">
<p> Make selection to change the image.</p>
<select onChange="changepic(this.value);">
    <option  alt="funny face" value="0">Select</option>
    <option  alt="happy face" value="1">Happy</option>
    <option  alt="sad face"   value="2">Sad</option>
    <option  alt="cool face"  value="3">Cool</option>
    <option  alt="puzzled face" value="4">Unsure</option>
</select>


function changepic(inobj) {


    switch (inobj) {

    case "0":
        sunPicture = 1;
        alert("Please make a selection or go back to bed.");
        break;

    case "1":
        sunPicture = 2;
        alert("I am glad you are happy.");
        break;

    case "2":
        sunPicture = 3;
        alert("I am sorry you are sad.");
        break;

    case "3":
        sunPicture = 4;
        alert("It is great you are feeling cool.");
        break;

    case "4":
        sunPicture = 5;
        alert("I hope you get past that soon.");
        break;
    default:
        alert("You need to fix something!");
        break;
    }


}

后续步骤：

为交换机中的每个案例添加代码

在dom中找到图像
将src属性更改为指向新图像。

然后你就完成了。

使用switch case语句从下拉列表选择中更改图像

2 个答案: