IE7ではJavascriptエラーが発生しますが、Firefoxでは表示されません

単純な効果のためにJavascriptを書いています。ドロップダウンが選択されると、選択されたものに応じて一連のオプションが表示されます。これはFirefoxでうまくいきますが、Internet Explorereでテストするとかなり美味しくはありませんでした。それは失敗しました。何が役に立つのか、不明なランタイムエラーです。ですから、セットアップ用のHTML（簡略化）があります。簡単なもの：IE7ではJavascriptエラーが発生しますが、Firefoxでは表示されません

<form> 
    <ul> 
     <li> 
     <label class="description" for="request_type">Type of request </label> 
     <div> 
      <select onchange="vrf.VRDescChange(this.value)" name="request_type"> 
       <option value="" selected="selected"></option> 
       <option value="Business Trip">Business Trip</option>  
      </select> 
     </div> 
     </li> 
     <span id="otheroptions"> 
     <li> 
      <input type="text" id="Name"></input> 
     </li> 
     </span> 
    </ul> 
</form>

注：「vrf」は正しくインスタンス化されています。ページがロードされると、 "request_type"ドロップダウンから何かが選択されるまで、 "otheroptions"スパンが隠されます。

VRFunctions.prototype.VRDescChange = function(value) {  
    if (value === "Business Trip") { 
     document.getElementById("otheroptions").style.display = "block"; 
    } 
}

あなたが見ることができるように、私はJavascriptのプロトタイプを使用しています：だから、ここに（再び、単純化された）のJavascriptのコードです。これには何か関係がありますか？どのような成果が最も有用でしょう。

出典

2009-07-15 Peter

このメッセージはエラーメッセージです。 – Tyler

さらにコードが必要です： – nlaq

メッセージは "Unknown Runtime Error"で、コードは0です。また、これはIE7です。 – Peter

IEでFirebug Liteをデバッグしようとしましたか？（http://getfirebug.com/lite.html）

出典

2009-07-15 20:11:57 Nelson

vrf.VRDescChange(this.form)

上記の行は、FirefoxとIEでは異なる動作をしていると思います。

は

<select onchange="vrf.VRDescChange(this)" name="request_type">

にあなたのSELECTを変更し、これはJS使用

：

VRFunctions.prototype.VRDescChange = function(el) {  
    if(el.options[el.selectedIndex].value === "Business Trip") { 
     document.getElementById("otheroptions").style.display = "block"; 
    } 
}

私はあなたが目立たないようにあなたのイベントハンドラをアタッチすることができますどのようにルックアップするためにあなたをアドバイスします。

EDIT：

固定コード。

EDIT：

ここで 'VRF' の値とは何ですか？あなたはselect要素のonChangeハンドラでVRDescChangeを呼び出すときに、関数でselect要素を参照するために行くときに、なぜあなたはthis.formを渡している（Working Demo）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } 
#otheroptions { display: none; } 
</style> 

<script> 
function handleChange(el) 
{ 
    var value = el.options[el.selectedIndex].value; 
    document.getElementById("otheroptions").style.display = value === '' ? 'none' : 'block'; 
} 

</script> 
</head> 
<body> 
    <p>Hello from JS Bin</p> 
    <p id="hello"></p> 
<form> 
    <ul> 
     <li> 
     <label class="description" for="request_type">Type of request </label> 
     <div> 
      <select onchange="handleChange(this)" name="request_type"> 
       <option value="" selected="selected"></option> 
       <option value="Business Trip">Business Trip</option>  
      </select> 
     </div> 
     </li> 
     <span id="otheroptions"> 
     <li> 
      <input type="text" id="Name"></input> 
     </li> 
     </span> 
    </ul> 
</form> 
</body> 
</html>

出典

2009-07-15 20:13:21 SolutionYogi

これが当てはまる場合は、なぜFirefoxでうまく機能しないのですか？ this.formは明らかに何かを返す。 – Peter

生のDOM知識が錆びています。「これは現在の要素を参照しています。 IEとFirefoxでは 'this.form'の動作が異なっていると思います。いずれの場合でも、フォームを渡す代わりに、選択オブジェクト自体を渡して値をチェックすることができます。 – SolutionYogi

また、これは問題を解決しませんでした。 – Peter

：

このコードを試してみてください

if(form.request_type.value === "Business Trip") {

確かに、をVRDescChangeの引数としての代わりに渡すのがより理にかなっていますあなたの問題はspan要素に「ブロック」の表示スタイルを設定することに関連している可能性が

var rt; //Set this to reference the request_type select element 
var selectedvalue = rt.options[rt.selectedIndex].value;

出典

2009-07-15 20:13:50

：onChangeハンドラも

、使用する選択された値を取得するためで。私は、IEがどんな要素にどのようなスタイルが設定されているかについて非常に精通していることを覚えているようです。

は「インライン」に表示スタイルを変えてみて、それがまだ文句を言うかどうかを確認：

document.getElementById("otheroptions").style.display = "inline";

出典

2009-07-15 20:27:44

そこに運がありません。私はこのエラーが少なくともJavaScriptを使っているように感じています。エラーはjavascriptエラーです。その結果、IEはコードの実行を拒否します。 – Peter

あなたの例では、IE7でうまく動作します。私の推測では、他にもいくつかの問題があります。私はあなたのVRFunctionsオブジェクトを調べます。

<script> 
    (function(){ 
     VRFunctions = function(){}; 
     VRFunctions.prototype.VRDescChange = function(value) {  
     if (value === "Business Trip") { 
      document.getElementById("otheroptions").style.display = "block"; 
     } 
     }; 
    vrf = new VRFunctions(); 

    }()); 
</script> 

<form> 
    <ul> 
     <li> 
     <label class="description" for="request_type">Type of request </label> 
     <div> 
      <select onchange="vrf.VRDescChange(this.value)" name="request_type"> 
       <option value="" selected="selected"></option> 
       <option value="Business Trip">Business Trip</option>  
      </select> 
     </div> 
     </li> 
     <span id="otheroptions" style="display:none"> 
     <li> 
      <input type="text" id="Name"></input> 
     </li> 
     </span> 
    </ul> 
</form>

出典

2009-07-15 20:47:00 illvm

IE7ではJavascriptエラーが発生しますが、Firefoxでは表示されません

答えて

関連する問題