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

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

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

的代码部分是JavaScript的含有开关case语句。正文部分包含选择元素，它是下拉菜单。 var inobj，sunPic; 功能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>

来源

2011-10-22 swydell

我修正了下面的选择 - 我没有改变它做出不同的图片（因为你没有给网址）。我会把它的一部分给你 - 但也许这将有助于挫败感。注意：页面上只能有一个给定值的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属性。

然后你就完成了。

来源

2011-10-22 23:30:12 Hogan

我可以在这方面多用一点帮助。当我在函数中创建多个参数时，代码仍然有效，我仍然可以切换警报框。但是当我在交换机中放置多个参数（我认为它是方法）时，警报框会变为默认值。所有的代码仍然有效。在任何情况下，我仍然无法获取页面内容。我正在阅读事件处理程序，但是这只是关于如果语句和我似乎无法将其翻译为切换case语句应用程序。 – swydell

您不需要该功能或开关的多个参数。 – Hogan

我在回答下一步时加了一些提示。 – Hogan

由于这是家庭作业，我会给你一个提示，将让你的思维。什么是用户改变价值。你目前身上有交换，但实际上应该在哪里？

来源

2011-10-22 23:17:18

只是有点更多的帮助：onchange处理程序应该以不同的方式调用 - 这里是一个例子：http://www.devguru.com/technologies/ecmascript/quickref/evhan_onchange.html – deviousdodo

我把它放在select元素中，但什么都没有发生。我真的不知道该把它放在哪里。用户正在改变选项的值。当选择的时候，这是值的变化。 – swydell

我在想，从我刚才读到的onchange是从函数参数中调用的。但我没有一个函数参数。我得做更多的研究。我喜欢你的答案。这让我想到。 – swydell

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

回答

相关问题