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.
Comments
Post a Comment