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

Question

我試圖制作一個下拉菜單，該菜單使用外部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;
    }

Answer 1

最好的做法是將<script>標記放在<head></head>

使用本機Javascript，您可以這樣做：

 function changepic(season) { switch (season) { case 'winter': document.getElementById('myimage').src='https://s1.postimg.org/40ndqhnyfv/image.jpg'; break; 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>

確保圖像與腳本位於同一文件夾中，或者它們位於路徑正確的另一個目錄中

Answer 2

不建議將按鈕放在選擇下拉選項內。 您應該在select元素上偵聽change（）事件，並在那里進行處理。 里面的變化功能，就可以輕松搞定訪問option加入下拉選擇的value屬性的所有選項。

因此，帶有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>

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

問題描述

2 個解決方案

解決方案1
2 已采納 2017-10-04 18:48:03

解決方案2
1 2017-10-04 18:55:33

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

問題描述

2 個解決方案

解決方案1 2 已采納 2017-10-04 18:48:03

解決方案2 1 2017-10-04 18:55:33

解決方案1
2 已采納 2017-10-04 18:48:03

解決方案2
1 2017-10-04 18:55:33