у меня есть проблема в моем коде JavaScript функции Onchange ()

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

Объяснение

Если вы хотите, чтобы onChange работал в jsFiddle, вам нужно будет заставить ваш скрипт работать глобально.Вам придется либо изменить тип загрузки Javascript-части jsFiddle для переноса в конце тега head или body.

Решение

См. Окно выбора типа нагрузки на рисунке ниже, чтобы добиться этого в будущем:

Answer 2

Чтобы обработать этот ответ в своем теге Local file и scripts в конце, или измените параметр в jsfiddle на no wrap - bottom of body me 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>

Answer 3

Нет проблем с вашим кодом.Но в jsfiddle, чтобы он работал глобально, вы должны использовать указать load load = No wrap, иначе скрипт будет загружен в onLoad или DOM ready, что сделает его недоступным для вашего вызова 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>