外部JavaScript和下拉菜單不正確地在瀏覽器中呈現

我試圖做一個下拉菜單，調用使用外部JavaScript函數/文件，並根據用戶的選擇交替圖片，但出於某種原因，圖片不會改變。下拉菜單以及默認圖像顯示，因爲該圖像是硬編碼的，但圖像沒有改變。這是我第一次使用JavaScript，所以我確信它充滿了錯誤，但任何幫助將不勝感激。我真的不知道我在做什麼外部JavaScript和下拉菜單不正確地在瀏覽器中呈現

下面是HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>All Seasons</title> 
    </head> 
    <body> 
    <script src = "allseasons.js"></script> 
    <img id="myimage" src="winter.jpg" alt="current season." /> 
    <select name="seasons"> 
    <option> 
     Winter 
     <button onclick="changepic('winter')"></button> 
    </option> 
    <option> 
     Spring 
     <button onclick="changepic('spring')"></button> 
    </option> 
    <option> 
     Summer 
     <button onclick="changepic('summer')"></button> 
    </option> 
    <option> 
     Fall 
     <button onclick="changepic('fall')"></button> 
    </option> 
    </select> 
</body> 
</html>

這裏是JavaScript：

function changepic(season){ 
    switch (season){ 
     case 'winter': document.getElementById('myimage').src='winter.jpg'; 
     break; 

     case 'spring': document.getElementById('myimage').src='spring.jpg'; 
     break; 

     case 'summer': document.getElementById('myimage').src='summer.jpg'; 
     break; 

     case 'fall': document.getElementById('myimage').src='fall.jpg'; 
     break; 
    }

來源

2017-10-04 Noah210012

你'img'沒有myimage'的'的ID。你需要給它一個像'' –

@ShekharChikara我固定，但它仍然沒有切換圖像 – Noah210012

它是有<head></head>

裏面你 <script>代碼的最佳實踐

以原生的Javascript你可以這樣做：

function changepic(season) { 
 
    switch (season) { 
 
    case 'winter': document.getElementById('myimage').src='https://s1.postimg.org/40ndqhnyfv/image.jpg'; 
 
    break; 
 
\t \t \t \t 
 
    case 'spring': document.getElementById('myimage').src='https://s1.postimg.org/85iz2llc8b/image.jpg'; 
 
    break; 
 

 
    case 'summer': document.getElementById('myimage').src='https://s1.postimg.org/40ndqhnyfv/image.jpg'; 
 
    break; 
 

 
    case 'fall': document.getElementById('myimage').src='https://s1.postimg.org/85iz2llc8b/image.jpg'; 
 
    break;  
 
    } 
 

 
    console.log('Current image is : ' + document.getElementById('myimage').src); 
 
}

<img id="myimage" src="https://s1.postimg.org/40ndqhnyfv/image.jpg" id="myimage"/> 
 
<select name="seasons" onChange="changepic(this.value)"> 
 
    <option value="winter">Winter</option> 
 
    <option value="spring">Spring</option> 
 
    <option value="summer">Summer</option> 
 
    <option value="fall">Fall</option> 
 
</select>

確保圖像在與腳本相同的文件夾，或者如果他們在另一個目錄的路徑是正確的

來源

2017-10-04 18:48:03

非常感謝你@Chrysovalantis Koutsoumpos！但照片仍然沒有改變。所有文件都在相同的目錄中並具有相同的擴展名。有什麼我們失蹤？ – Noah210012

我已經更新了一些原始圖像的代碼，以證明這是正常工作。你的圖片有問題。確保名稱和結尾都是正確的或使用完整路徑 –

Got it！我必須按照您的建議移動腳本標記。我真的不能完全謝謝你的幫助！ – Noah210012

把一個選擇下拉選項按鈕內不建議這樣的事情。您應該在select元素上聽取change()事件並在那裏處理。在更改功能中，您可以通過將value屬性添加到所有選項，輕鬆訪問在下拉列表中選擇的option。

所以與change事件的代碼看起來像下面 -

$(document).ready(function() { 
 
    $('#seasonsDropdown').change(function() { 
 
    var seasonValue = document.getElementById('seasonsDropdown').value; 
 
    switch(seasonValue) { 
 
     case 'winter': document.getElementById('myimage').src='winter.jpg'; 
 
     break; 
 

 
     case 'spring': document.getElementById('myimage').src='spring.jpg'; 
 
     break; 
 

 
     case 'summer': document.getElementById('myimage').src='summer.jpg'; 
 
     break; 
 

 
     case 'fall': document.getElementById('myimage').src='fall.jpg'; 
 
     break; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src = "allseasons.js"></script> 
 
<img id="myimage" src="winter.jpg" alt="current season." /> 
 
<select name="seasons" id="seasonsDropdown"> 
 
    <option value="winter">Winter</option> 
 
    <option value="spring">Spring</option> 
 
    <option value="summer">Summer</option> 
 
    <option value="fall">Fall</option> 
 
</select>

來源

2017-10-04 18:55:33

外部JavaScript和下拉菜單不正確地在瀏覽器中呈現

回答

相關問題