Home/ Questions/Q 5957419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T18:23:52+00:00

I can’t seem to get the answer to display beneath the calculator using innerHTML.

  • 0

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&amp;Store_Code=LTSO&amp;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 Commuter 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&amp;Store_Code=LTSO&amp;Product_Code=LADOTDMP1&amp;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&amp;Store_Code=LTSO&amp;Product_Code=DTB1&amp;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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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");
    • 0