使用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語句從下拉列表選擇中更改圖像

回答

相關問題