堆棧內存溢出
  簡體   English   中英

我的代碼javascript函數onchange（）有問題

[英]i have problem in my code javascript function onchange()

 原文  2018-12-14 15:02:08  8   3    javascript/ html5

問題描述

這個腳本有什么問題？ 

 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/

3 個解決方案

解決方案1
 1 已采納  2018-12-14 15:22:32

您的代碼沒有問題。 但是在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>

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

說明

如果要在jsFiddle中使onChange工作，則必須使腳本在全局范圍內工作。 您將不得不更改jsFiddle的Javascript部分的加載類型，以包裝在head或body標簽的末尾。

解

請參閱下圖中的“負載類型”選擇框，以實現將來的效果：

負載類型已更改

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

要在其末尾的本地文件和腳本標簽中解決此問題，或將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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我的 JavaScript 代碼以及 HTML 如何顯示它有問題 我在javascript中遇到問題 我的 JavaScript 秒表有問題 我的 JavaScript onClick 函數有問題 onchange事件不接受我的JavaScript代碼 如何在“onchange”功能中更改“onchange”操作 我的 javascript function 跳過了 jquery 代碼，是因為我必須將 ZD223E14Z524766 安裝到 Visual Studio 代碼中嗎？ 我的Javascript代碼有問題 我的JavaScript代碼正常運行，但我有錯誤。 我的javascript函數有問題嗎？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM