Javascript works in google, firefox, but not IE9
This is a simple random lottery generator, it works in google chrome, firefox. But it doesn't work in Internet Explorer 9.
When I use the debug feature in IE9, it says that myFunction()
in my HTML null
or undefined
. I'm new to coding programs that work with IE, so any help would be greatly 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>
+3
source to share
2 answers
The output tag is HTML5 and probably doesn't work in IE9. You will need to use HTML5 Shim to add backward compatibility.
Here it works 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);
}
Then you can add hidden input fields and then set for the form to submit.
Tested and working on IE9.
+1
source to share
I narrowed down the error to set the value. Try using .innerHTML instead of .value. Also, the title must be within a chapter and your doctype has a spelling error (IE pointed it all to me!). Try to use a loop structure whenever you have a bunch of repetitive tasks. I fixed the code and it works in IE 11. So hopefully it will work with IE 9 too.
<!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>
0
source to share