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

Question

What is wrong with this script ? 这个脚本有什么问题？

 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 pp"; 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/ http://jsfiddle.net/6xsro2cj/

Answer 1

There is no problem with your code. 您的代码没有问题。 But in jsfiddle, to make it work globally, you should use specify load type = No wrap, otherwise the script will be loaded in onLoad or DOM ready which make it is not available for your onchange call. 但是在jsfiddle中，要使其在全局范围内工作，应使用指定的load type = No wrap，否则脚本将被加载到onLoad或DOM中，这使得该脚本不可用于onchange调用。 Just updated your fiddle with "No wrap" option on the JS window section. 刚刚用JS窗口部分的“无包装”选项更新了小提琴。

Updated: 更新：

Full code 完整代码

<!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

Explanation 说明

If you want to make the onChange work in jsFiddle, you will have to make your script work globally. 如果要在jsFiddle中使onChange工作，则必须使脚本在全局范围内工作。 You will either have to change the load type of the Javascript part of the jsFiddle to wrap at the end of the head or body tag. 您将不得不更改jsFiddle的Javascript部分的加载类型，以包装在head或body标签的末尾。

Solution 解

See the 'load type' selectbox in the picture below to achieve this in the future: 请参阅下图中的“负载类型”选择框，以实现将来的效果：

Answer 3

To work this answer in your Local file and scripts tag at the end of it or change the option in jsfiddle as to no wrap - bottom of body me http://jsfiddle.net/6xsro2cj/10/ 要在其末尾的本地文件和脚本标签中解决此问题，或将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 个解决方案

解决方案1
1 已采纳 2018-12-14 15:22:32

解决方案2
0 2018-12-14 15:29:10

解决方案3
0 2018-12-14 15:40:58

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2018-12-14 15:22:32

解决方案2 0 2018-12-14 15:29:10

解决方案3 0 2018-12-14 15:40:58

解决方案1
1 已采纳 2018-12-14 15:22:32

解决方案2
0 2018-12-14 15:29:10

解决方案3
0 2018-12-14 15:40:58