在IE7中获取Javascript错误但在Firefox中没有

时间：2022-11-11 22:20:27

Okay, so I'm writing some Javascript for a simple effect: when a drop down gets selected, a series of options will appear, depending on which one is chosen. This works great in Firefox, but when I went to test it on Internet Explorere, things weren't so pretty. It failed with, what is oh so helpful, and unknown runtime error. So, here is the HTML (simplified) for the setup. Pretty simple stuff:

好的,所以我正在编写一些简单的Javascript:当选择下拉菜单时,会出现一系列选项,具体取决于选择哪一个。这在Firefox中运行得很好,但是当我去Internet Explorere上测试它时,情况并不那么漂亮。它失败了,什么是如此有用,以及未知的运行时错误。所以,这里是设置的HTML(简化)。非常简单的东西:

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

A note: "vrf" is properly instantiated. When the page loads, the "otheroptions" span is hidden, until something gets selected from the "request_type" drop down. So, here is the code for the Javascript (again, simplified):

注意:“vrf”已正确实例化。页面加载时,隐藏“otheroptions”范围,直到从“request_type”下拉列表中选择某些内容。所以,这是Javascript的代码(再次,简化):

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

As you can see, I'm using Prototypes for the Javascript. Could this have something to do with it? Any elightenment would be most helpful.

如您所见,我正在使用Prototypes作为Javascript。这可能与它有关吗?任何改善都是最有帮助的。

5 个解决方案

#1

Have you tried Firebug Lite to debug it in IE? (http://getfirebug.com/lite.html)

你有没有尝试过Firebug Lite在IE中调试它? (http://getfirebug.com/lite.html)

#2

When you call VRDescChange in the select element's onChange handler, why are you passing this.form when you then go on to reference the select element in the function:

当您在select元素的onChange处理程序中调用VRDescChange时,为什么在继续引用函数中的select元素时传递this.form:

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

Surely it would make more sense to pass this as the argument to VRDescChange instead of this.form in the onChange handler

当然,将此作为参数传递给VRDescChange而不是onChange处理程序中的this.form更有意义

Also, to get the selected value you want to use:

此外,要获取要使用的选定值:

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

#3

Your problem may be related to setting a display style of "block" on a span element. I seem to remember that IE gets very finicky about what styles get set on which elements.

您的问题可能与在span元素上设置“块”的显示样式有关。我似乎记得IE对于哪些样式设置哪些元素非常挑剔。

Try changing the display style to "inline" and see if it still complains:

尝试将显示样式更改为“内联”,看看它是否仍然抱怨:

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

#4

vrf.VRDescChange(this.form)

I think above line is behaving differently in Firefox and in IE.

我认为上面的行在Firefox和IE中表现不同。

Change your SELECT to

将SELECT更改为

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

And use this JS:

并使用这个JS:

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

I would advice you to look up how you can attach your event handlers unobtrusively.

我建议你查看如何不引人注意地附加你的事件处理程序。

EDIT:

Fixed code.

EDIT:

What is the value of 'vrf' here?

这里'vrf'的价值是多少?

Try this code: (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>

#5

Your example works just fine in IE7. My guess is there is some other issue. I would look at your VRFunctions object.

你的例子在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>

#1

Have you tried Firebug Lite to debug it in IE? (http://getfirebug.com/lite.html)

你有没有尝试过Firebug Lite在IE中调试它? (http://getfirebug.com/lite.html)

#2

When you call VRDescChange in the select element's onChange handler, why are you passing this.form when you then go on to reference the select element in the function:

当您在select元素的onChange处理程序中调用VRDescChange时,为什么在继续引用函数中的select元素时传递this.form:

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

Surely it would make more sense to pass this as the argument to VRDescChange instead of this.form in the onChange handler

当然,将此作为参数传递给VRDescChange而不是onChange处理程序中的this.form更有意义

Also, to get the selected value you want to use:

此外,要获取要使用的选定值:

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

#3

Your problem may be related to setting a display style of "block" on a span element. I seem to remember that IE gets very finicky about what styles get set on which elements.

您的问题可能与在span元素上设置“块”的显示样式有关。我似乎记得IE对于哪些样式设置哪些元素非常挑剔。

Try changing the display style to "inline" and see if it still complains:

尝试将显示样式更改为“内联”,看看它是否仍然抱怨:

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

#4

vrf.VRDescChange(this.form)

I think above line is behaving differently in Firefox and in IE.

我认为上面的行在Firefox和IE中表现不同。

Change your SELECT to

将SELECT更改为

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

And use this JS:

并使用这个JS:

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

I would advice you to look up how you can attach your event handlers unobtrusively.

我建议你查看如何不引人注意地附加你的事件处理程序。

EDIT:

Fixed code.

EDIT:

What is the value of 'vrf' here?

这里'vrf'的价值是多少?

Try this code: (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>

#5

Your example works just fine in IE7. My guess is there is some other issue. I would look at your VRFunctions object.

你的例子在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>
标签：

相关文章