外部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;
    }

最好的做法是在<head></head>

中使用<script>标签

使用本机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>

确保图像与脚本在同一文件夹中，或者如果它们在另一个目录中，则该路径是正确的

不建议将按钮放入选择的下拉选项中。您应该在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>

相关内容

最新更新

热门标签：