Javascript innerHTML not writing to document
I can't seem to get the answer to display beneath the calculator using innerHTML. I previously had this working with alert boxes , but ideally I'd like to write directly to the document so I can include links and formatting.
I used the method below successfully with a slightly less complex script that did not include a select menu (see working code at bottom). Apart from a different id for the display area, this appears to be the only difference.
I ran this through firebug and it appears that all the calculations are being performed, and the script only falls down when it comes time to display the results.
I'm still pretty green at javascript and I'm learning as I go, so any detail you can provide would be most helpful.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!-- Begin CE MP Savings Calc script
function doMath3() {
var one = parseInt(document.theForm3.elements[0].value);
var two = parseInt(document.theForm3.elements[1].value);
var three = one * two;
var z4yearlyCash = three * 4.25 * 12;
var z3yearlyCash = three * 3.75 * 12;
var z2yearlyCash = three * 3 * 12;
var z1yearlyCash = three * 2.5 * 12;
var baseyearlyCash = three * 1.5 * 12;
var selection = document.getElementsByName("zone")[0].value;
var answerCEMP = document.getElementById("answerCEMP");
if (document.theForm3.elements[0].value == ""){
alert("Please enter the number of days a month you commute on Commuter Express.")
}
if (document.theForm3.elements[1].value == ""){
alert("Please enter the number of times you board a Commuter Express daily.")
}
if(one > 31){
alert("Come now, no month has " + one + " days! Please try again.");
}
else if(selection == "z4"){
var prodZ4 = z4yearlyCash - 1680;
if(prodZ4 > 0){
answerCemp.innerHTML="<div class='answerbox'><p>If you pay cash, your yearly expense is $" + z4yearlyCash + ".<br>Commuter Express Zone 4 Monthly Passes cost $1680 per year, <strong>a yearly savings of $" + prodZ4 + "<\/strong><br><strong><a href='http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=LTSO&Category_Code=MP4'>Buy a Commuter Express Monthly Pass now.<\/a><\/strong><\/p><\/div>";
}
else if(prodZ4 <= 0){
answerCemp.innerHTML="<div class='answerbox'><p>Looks like you don't ride Commut开发者_如何学Cer Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. <strong><a href='#triptickets'>Try the Trip Tickets Calculator below.<\/a><\/strong><\/p><\/div>";
}
}
else if(selection == "z3"){
var prodZ3 = z3yearlyCash - 1488;
if(prodZ3 > 0){
alert("If you pay cash, your yearly expense is $" + z3yearlyCash + ". Commuter Express Zone 3 Monthly Passes cost $1488 per year, a yearly savings of $" + prodZ3 + ".");
}
else if(prodZ3 <= 0){
alert("Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. Try the Trip Tickets Calculator below.");
}
}
else if(selection == "z2"){
var prodZ2 = z2yearlyCash - 1200;
if(prodZ2 > 0){
alert("If you pay cash, your yearly expense is $" + z2yearlyCash + ". Commuter Express Zone 2 Monthly Passes cost $1200 per year, a yearly savings of $" + prodZ2 + ".");
}
else if(prodZ2 <= 0){
alert("Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. Try the Trip Tickets Calculator below.");
}
}
else if(selection == "z1"){
var prodZ1 = z1yearlyCash - 960;
if(prodZ1 > 0){
alert("If you pay cash, your yearly expense is $" + z1yearlyCash + ". Commuter Express Zone 1 Monthly Passes cost $960 per year, a yearly savings of $" + prodZ1 + ".");
}
else if(prodZ1 <= 0){
alert("Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. Try the Trip Tickets Calculator below.");
}
}
else if(selection == "Base"){
var prodBase = baseyearlyCash - 684;
if(prodBase > 0){
alert("If you pay cash, your yearly expense is $" + baseyearlyCash + ". Commuter Express Base Monthly Passes cost $684 per year, a yearly savings of $" + prodBase + ".");
}
else if(prodBase <= 0){
alert("Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. Try the Trip Tickets Calculator below.");
}
}
}
// End CE MP Savings Calc script -->
</script>
</head>
<body>
<div class="calcform">
<form name="theForm3">
<h2><a name="cemp" id="cemp"></a>You Do the Math: Commuter Express Monthly Pass Vs. Cash</h2>
<div class="formrow-calc">
<div class="calcform-col1">
<label for="trips-cemp">Daily boardings on Commuter Express Bus*:</label>
<input type="text" id="trips-cemp">
</div>
</div>
<div class="formrow-calc">
<div class="calcform-col1">
<label for="days-cemp">Days you ride Commuter Express <strong>per month</strong>:</label>
<input type="text" id="days-cemp"></div>
</div>
<div class="formrow-calc">
<div class="calcform-col1">
<label for="choosezone">Choose Zone:</label>
<select name="zone" id="choosezone">
<option value="Base">Base</option>
<option value="z1">Zone 1</option>
<option value="z2">Zone 2</option>
<option value="z3">Zone 3</option>
<option value="z4">Zone 4</option>
</select>
</div>
</div>
<div class="clear"></div>
<div align="center">
<button type="submit" onclick="doMath3(); return false;" class="btn-submit"><img src="img/btn_savings.png" alt="Show My Yearly Savings"></button>
</div>
</form>
<div id="answerCemp"></div>
</div>
</body>
</html>
Here is the code that is working:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!-- Begin DASH MP Savings Calc script
function doMath2() {
var one = eval(document.theForm.elements[0].value);
var two = eval(document.theForm.elements[1].value);
var three = one * two;
var yearlyCash = three * .5 * 12;
var prod = yearlyCash - 216;
var answer=document.getElementById("answer")
if (document.theForm.elements[0].value == ""){
alert("Please enter the number of days a month you ride DASH.");
}
if (document.theForm.elements[1].value == ""){
alert("Please enter the number of times you board a DASH bus daily.");
}
if (one > 31){
alert("Come now, no month has " + one + " days! Please try again.");
}
else {
if(prod > 0){
answer.innerHTML="<div class=answerbox><p>If you pay cash, your yearly expense is $" + yearlyCash + ".<br>DASH Monthly Passes cost $216 per year, <strong>a yearly savings of $" + prod + "<\/strong>.<br><strong><a href=http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=PROD&Store_Code=LTSO&Product_Code=LADOTDMP1&Category_Code=MP4>Buy a DASH Monthly Pass now.<\/strong><\/a><\/p><\/div>";
}
else if(prod <= 0){
answer.innerHTML="<div class=answerbox><p>Looks like you don't ride DASH often enough to benefit from purchasing a Monthly Pass. However, you may benefit from the convenience of <strong><a href=http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=PROD&Store_Code=LTSO&Product_Code=DTB1&Category_Code=DTB>DASH Ticket Books.<\/a><\/strong><\/p><\/div>";
}
}
}
// End DASH MP Savings Calc script -->
</script>
</head>
<body>
<div class="calcform">
<form name="theForm" action="#">
<h2>You Do the Math: DASH Monthly Pass Vs. Cash</h2>
<div class="formrow-calc">
<div class="calcform-col1">
<label for="trips-dash">Daily boardings on DASH bus*:</label>
<input type="text" name="trips" id="trips-dash">
</div>
</div><div class="calcform-col1">
<label for="days-dash">Number of days <strong>per month</strong> you ride DASH:</label>
<input type="text" name="days" id="days-dash">
</div>
<div class="clear"></div>
<div align="center">
<button type="submit" onclick="doMath2(); return false;" class="btn-submit">
<img src="img/btn_savings.png" alt="Show My Yearly Savings">
</button>
</div>
</form>
<div id="answer"></div>
</div>
</body>
</html>
In your working script you have answer instead of answerCEMP. And you do define it:
var answer = document.getElementById("answer");
You left that part out of your failing script. Also, you are using name on the div instead of id. Use id. Change your html:
<div id="answerCEMP"></div>
And define answerCEMP in your javascript:
var answerCEMP = document.getElementById("answerCEMP");
I'm still pretty green at javascript and I'm learning as I go, so any detail you can provide would be most helpful.
My advice especially for novice javascript programmers is to use a javascript framework. For novice programmers I think the very popular jquery will be very satisfying.
but ideally I'd like to write directly to the document so I can include links and formatting.
Jquery can do this very easily using html(). I would like to point out that using eval() can be very dangerous.
I ran this through firebug and it appears that all the calculations are being performed, and the script only falls down when it comes time to display the results.
I am just going to append a simple value to the dom using jquery as an example. When you press button I am going to change the text => http://jsfiddle.net/WVXhD/
加载中,请稍侯......
精彩评论