Question

此脚本有什么问题？

function swapImage() {
  debugger

  var image = document.getElementById("imageToSwap");
  var dropd = document.getElementById("swapImg");
  image.src = dropd.options[dropd.selectedIndex].value;


  var model = document.getElementById("model");
  var heading = document.getElementById("heading3");
  var textGrey = document.getElementById("textGrey");
  var textGrey2 = document.getElementById("textGrey2");

  if (dropd.value == "http://placehold.it/150x150") {
    model.innerHTML = "A4";
    heading.innerHTML = "This text matches A4 model";
    textGrey.innerHTML = "kjhkjh we ewf kjikjkj we";
    textGrey2.innerHTML = "hf efjkj efe  edeeeeejm dff";
    return false;
  } else if (dropd.value == "http://placehold.it/350x150") {
    model.innerHTML = "A6";
    heading.innerHTML = "This text matches A6 model";
    textGrey.innerHTML = "xxx xxxxx xxxxx xxxx";
    textGrey2.innerHTML = "yy yyyy yyyy yy";
    return false;
  } else if (dropd.value == "http://placehold.it/350x250") {
    model.innerHTML = "A8";
    heading.innerHTML = "This text matches the A8 model";
    textGrey.innerHTML = "zzzz zzzzz";
    textGrey2.innerHTML = "pppp ppp pp p p";
    return false;
  }
}

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()">
  <option value="http://placehold.it/150x150">A4</option>
  <option value="http://placehold.it/350x150" selected="selected">A6</option>
  <option value="http://placehold.it/350x250">A8</option>
</select>
<br>
<br>

<div id="carbox">
  <h2 id="model" class="model">A6</h2>
  <img id="imageToSwap" src="http://placehold.it/350x150" width="544" height="203" style="margin-left:275px; margin-top:-82px" />

  <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p>
  </div>
</div>

http://jsfiddle.net/6xsro2cj/

Answer 1

您的代码没有问题。但是在jsfiddle中，要使其在全局范围内工作，应使用指定的load type = No wrap，否则脚本将被加载到onLoad或DOM中，这使得该脚本不可用于onchange调用。刚刚在JS窗口部分中使用“不包装”选项更新了小提琴。

已更新：

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">



  <style id="compiled-css" type="text/css">
      img {
         width: 200px;
      }
  </style>



</head>
<body>
    <select id="swapImg" name="model" class="modelSelect" onchange="swapImage()">
   <option value="http://placehold.it/150x150">A4</option>
<option value="http://placehold.it/350x150" selected="selected">A6</option>
<option value="http://placehold.it/350x250">A8</option>
</select>
<br>
<br>

<div id="carbox">
  <h2 id="model" class="model">A6</h2>
  <img id="imageToSwap" src="http://placehold.it/350x150" width="544" height="203" style="margin-left:275px; margin-top:-82px" />

  <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p>
  </div>
</div>


  <!-- TODO: JS script is be added here -->

  <script type="text/javascript">



function swapImage() {
  debugger
  var image = document.getElementById("imageToSwap");
  var dropd = document.getElementById("swapImg");
  image.src = dropd.options[dropd.selectedIndex].value;


  var model = document.getElementById("model");
  var heading = document.getElementById("heading3");
  var textGrey = document.getElementById("textGrey");
  var textGrey2 = document.getElementById("textGrey2");

  if (dropd.value == "http://placehold.it/150x150") {
    model.innerHTML = "A4";
    heading.innerHTML = "This text matches A4 model";
    textGrey.innerHTML = "kjhkjh we ewf kjikjkj we";
    textGrey2.innerHTML = "hf efjkj efe  edeeeeejm dff";
    return false;
  } else if (dropd.value == "http://placehold.it/350x150") {
    model.innerHTML = "A6";
    heading.innerHTML = "This text matches A6 model";
    textGrey.innerHTML = "xxx xxxxx xxxxx xxxx";
    textGrey2.innerHTML = "yy yyyy yyyy yy";
    return false;
  } else if (dropd.value == "http://placehold.it/350x250") {
    model.innerHTML = "A8";
    heading.innerHTML = "This text matches the A8 model";
    textGrey.innerHTML = "zzzz zzzzz";
    textGrey2.innerHTML = "pppp ppp pp p p";
    return false;
  }
}



</script>
</body>
</html>

Answer 2

说明

如果要在jsFiddle中使onChange工作，则必须使脚本在全局范围内工作。您将不得不更改jsFiddle的Javascript部分的加载类型，以包装在head或body标签的末尾。

解决方案

请参见下图中的“负载类型”选择框，以在将来实现此目的：

Answer 3

要在此文件的末尾的“本地文件和脚本”标记中处理此答案，或更改jsfiddle中针对no wrap - bottom of body我http://jsfiddle.net/6xsro2cj/10/的选项

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()">
   <option value="http://placehold.it/150x150">A4</option>
<option value="http://placehold.it/350x150" selected="selected">A6</option>
<option value="http://placehold.it/350x250">A8</option>
</select>
<br>
<br>

<div id="carbox">
  <h2 id="model" class="model">A6</h2>
  <img id="imageToSwap" src="http://placehold.it/350x150" width="544" height="203" style="margin-left:275px; margin-top:-82px" />

  <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p>
  </div>
</div>

<script>
function swapImage() {
  var image = document.getElementById("imageToSwap");
  var dropd = document.getElementById("swapImg");

  //-------this line is changed by me
  image.src = dropd.value;


  var model = document.getElementById("model");
  var heading = document.getElementById("heading3");
  var textGrey = document.getElementById("textGrey");
  var textGrey2 = document.getElementById("textGrey2");

  // a little bit improve comparison as dropd will be a node of html collections
  if (dropd.value == dropd[0].value) {
    model.innerHTML = "A4";
    heading.innerHTML = "This text matches A4 model";
    textGrey.innerHTML = "kjhkjh we ewf kjikjkj we";
    textGrey2.innerHTML = "hf efjkj efe  edeeeeejm dff";
    return false;
  } else if (dropd.value == dropd[1].value) {
    model.innerHTML = "A6";
    heading.innerHTML = "This text matches A6 model";
    textGrey.innerHTML = "xxx xxxxx xxxxx xxxx";
    textGrey2.innerHTML = "yy yyyy yyyy yy";
    return false;
  } else if (dropd.value == dropd[2].value) {
    model.innerHTML = "A8";
    heading.innerHTML = "This text matches the A8 model";
    textGrey.innerHTML = "zzzz zzzzz";
    textGrey2.innerHTML = "pppp ppp pp p p";
    return false;
  }
}

</script>

我的代码javascript函数onchange（）有问题

3 个答案: