Javascript在google，firefox中工作但在IE9中没有

时间：2015-07-22 12:13:23

标签： javascript html null internet-explorer-9 undefined

这是一个简单的彩票随机发生器，它适用于谷歌Chrome，Firefox。但它在Internet Explorer 9中不起作用。

当我在IE9中使用调试功能时，它说我的HTML中的myFunction()为null或undefined。我是新的编码程序，与IE一起工作，所以任何类型的帮助将不胜感激。

<!DOCTYPE htlm>
<html>

    <title>LOTTERY</title>
    <head>
    <script>

    function myFunction()
    {

        var myElement = document.getElementById("pwbx");
        myElement.value = Math.floor(Math.random() * 11);

        var myElement = document.getElementById("pwbx1");
        myElement.value = Math.floor(Math.random() * 11);

        var myElement = document.getElementById("pwbx2");
        myElement.value = Math.floor(Math.random() * 11);

        var myElement = document.getElementById("pwbx3");
        myElement.value = Math.floor(Math.random() * 11);

        var myElement = document.getElementById("pwbx4");
        myElement.value = Math.floor(Math.random() * 11);

        var myElement = document.getElementById("pwbx5");
        myElement.value = Math.floor(Math.random() * 11);

    };

    </script>
    <style>
   .firenze {height: 100px; width: 300px;} .baltimore {border-radius: 11px;}   
   .baltimore{padding-left: 11px !important; padding-top: 11px !important} 
   .baltimore{height: 133px; width: 387px !important;} 
   .baltimore{border: solid 1px black !important;}  
   .como {border: solid 1px black !important;} 
   .como {height: 53px !important; width: 343px !important;} 
   .como {padding-left: 33px !important; padding-top: 18px !important}   
   .foxtrot1 {width: 130px !important;} .foxtrot1 {text-align: center !important;}    
   .echo1 {padding-left: 111px !important; padding-top: 7px !important; }  
   .jessie {padding-top: 63px !important;}   
   .como li {display: inline-block !important; vertical-align: top !important; float: left !important;}  
   .como li {margin: 3 !important;}  .bravo {padding-left: 1px !important;} .bravo {font-size: 18px;} 
   .delta {border: solid 1px black !important;} .delta {height: 13px; width: 27px !important;} 
   .delta {padding-bottom: 13px;}  .tango {padding-left: 1px !important;} .tango {font-size: 18px;} 
   .yankee {border: solid 1px black !important;} .yankee {height : 13px !important; width: 27px !important;} 
   .yankee {padding-bottom: 13px;}  .sierra {padding-left: 1px !important;} .sierra {font-size: 18px;} 
   .uniform {border: solid 1px black !important;} .uniform {height: 13px !important; width: 27px !important;} 
   .uniform {padding-bottom: 13px;}  .lima {padding-left: 1px !important;} .lima {font-size: 18px;} 
   .hotel {border: solid 1px black !important;} .hotel {height: 13px !important; width: 27px !important;} .hotel {padding-bottom: 13px;}  
   .romeo {padding-left: 1px !important;} .romeo {font-size: 18px;} .oscar {border: solid 1px black !important;} 
   .oscar {height: 13px !important; width: 27px !important;} .oscar {padding-bottom: 13px;}  .zulu {padding-left: 1px !important;} 
   .zulu {font-size: 18px;} .golf {border: solid 1px black !important;} .golf {height: 13px !important; width: 27px !important;} 
   .golf {padding-bottom: 13px;} .power{font-weight: bold; font-size: 17px;} .power {padding-top: 4px;} 
    </style>
    </head>
    <body>

    <div class = "firenze"> 
     <div class = "baltimore">
      <ul style="list-style-type: none" id = "dis" class = "como">  
        <li class = "delta"><output class = "bravo" type = "text" id = "pwbx"></output></li>
        <li class = "yankee"><output class = "tango" type = "text" id = "pwbx1"></output></li>
        <li class = "uniform"><output class = "sierra" type = "text" id = "pwbx2"></output></li>
        <li class = "hotel"><output class = "lima" type = "text" id = "pwbx3"></output></li>
        <li class = "oscar"><output class = "romeo" type = "text" id = "pwbx4"></output></li>
        <li>Power Ball:</li>
        <li class = "golf"><output class = "zulu" type = "text" id = "pwbx5"></output></li>
     </ul>
     <span class = "echo1"><input onclick = "myFunction();" value="Generate" type="submit" class = "foxtrot1"></span>

     </div>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

输出标签是HTML5，可能不适用于IE9。 您需要使用HTML5 Shim来添加向后兼容性。

这是在jQuery中工作：

<div class = "firenze"> 
<div class = "baltimore">
    <ul style="list-style-type: none" id = "dis" class = "como">    
        <li id = "delta" class = "delta"></li>
        <li id = "yankee" class = "yankee"></li>
        <li id = "uniform" class = "uniform"></li>
        <li id = "hotel" class = "hotel"></li>
        <li id = "oscar" class = "oscar"></li>
        <li>Power Ball:</li>
        <li id="golf" class = "golf"></li>
    </ul>

        <span class = "echo1"><input value="Generate" type="button" class = "foxtrot1" id="foxtrot1"></span>

</div>

</div>

JS 

$("#foxtrot1").click(function(){  
        $("#delta").html(randomToTwo());
        $("#yankee").html(randomToTwo());
        $("#uniform").html(randomToTwo()); 
        $("#hotel").html(randomToTwo()); 
        $("#oscar").html(randomToTwo());
        $("#golf").html(randomToTwo());
});

function randomToTwo() {    
    return Math.floor(Math.random() * 11);
}

然后，您可以添加隐藏的输入字段，然后为表单提交设置。

测试并使用IE9。

https://jsfiddle.net/abku3ns1/

答案 1 :(得分：0)

我将故障缩小到设定值。尝试使用.innerHTML而不是.value。此外，标题应该在Head内，你的doctype有拼写错误（IE将这一切指向我！）。每当你有一堆重复的任务时，尝试使用循环结构。我已经更正了代码，这在IE 11中有效。所以希望它也适用于IE 9。

<!DOCTYPE html>
<html>
    <head>
    <title>LOTTERY</title>
    <script>
    function myFunction()
    {
        for(i = 0; i < 6; i++)
        {
            var id = "pwbx" + (i);
            document.getElementById(id).innerHTML = Math.floor(Math.random() * 11);
        }
    }
    </script>
    <style>
        .firenze {height: 100px; width: 300px;} .baltimore {border-radius: 11px;}   
       .baltimore{padding-left: 11px !important; padding-top: 11px !important} 
       .baltimore{height: 133px; width: 387px !important;} 
       .baltimore{border: solid 1px black !important;}  
       .como {border: solid 1px black !important;} 
       .como {height: 53px !important; width: 343px !important;} 
       .como {padding-left: 33px !important; padding-top: 18px !important}   
       .foxtrot1 {width: 130px !important;} .foxtrot1 {text-align: center !important;}    
       .echo1 {padding-left: 111px !important; padding-top: 7px !important; }  
       .jessie {padding-top: 63px !important;}   
       .como li {display: inline-block !important; vertical-align: top !important; float: left !important;}  
       .como li {margin: 3 !important;}  .bravo {padding-left: 1px !important;} .bravo {font-size: 18px;} 
       .delta {border: solid 1px black !important;} .delta {height: 13px; width: 27px !important;} 
       .delta {padding-bottom: 13px;}  .tango {padding-left: 1px !important;} .tango {font-size: 18px;} 
       .yankee {border: solid 1px black !important;} .yankee {height : 13px !important; width: 27px !important;} 
       .yankee {padding-bottom: 13px;}  .sierra {padding-left: 1px !important;} .sierra {font-size: 18px;} 
       .uniform {border: solid 1px black !important;} .uniform {height: 13px !important; width: 27px !important;} 
       .uniform {padding-bottom: 13px;}  .lima {padding-left: 1px !important;} .lima {font-size: 18px;} 
       .hotel {border: solid 1px black !important;} .hotel {height: 13px !important; width: 27px !important;} .hotel {padding-bottom: 13px;}  
       .romeo {padding-left: 1px !important;} .romeo {font-size: 18px;} .oscar {border: solid 1px black !important;} 
       .oscar {height: 13px !important; width: 27px !important;} .oscar {padding-bottom: 13px;}  .zulu {padding-left: 1px !important;} 
       .zulu {font-size: 18px;} .golf {border: solid 1px black !important;} .golf {height: 13px !important; width: 27px !important;} 
       .golf {padding-bottom: 13px;} .power{font-weight: bold; font-size: 17px;} .power {padding-top: 4px;} 
    </style>
</head>
<body>
    <div class = "firenze"> 
        <div class = "baltimore">
            <ul style="list-style-type: none" id = "dis" class = "como">    
                <li class = "delta"><output class = "bravo" type = "text" id = "pwbx0"></output></li>
                <li class = "yankee"><output class = "tango" type = "text" id = "pwbx1"></output></li>
                <li class = "uniform"><output class = "sierra" type = "text" id = "pwbx2"></output></li>
                <li class = "hotel"><output class = "lima" type = "text" id = "pwbx3"></output></li>
                <li class = "oscar"><output class = "romeo" type = "text" id = "pwbx4"></output></li>
                <li>Power Ball:</li>
                <li class = "golf"><output class = "zulu" type = "text" id = "pwbx5"></output></li>
            </ul>
            <span class = "echo1"><input onclick = "myFunction()" value="Generate" type="submit" class = "foxtrot1"></span>
        </div>
    </div>
</body>
</html>
相关问题
最新问题