html - Javascript working in google, firefox but not in IE9 -


this simple lottery random generator, works in google chrome, firefox. not work in internet explorer 9.

when use debugging feature in ie9 says myfunction() in html null or undefined. new coding programs work ie, kind of appreciated.

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

the output tag html5 , wont work on ie9. need use html5 shim add backwards compatibility.

here working in 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); } 

you add hidden input fields , set form submit instead.

tested , working on ie9.

https://jsfiddle.net/abku3ns1/


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -