Javascript innerHTML不写入文档

时间:2011-05-26 23:51:42

标签: javascript innerhtml

我似乎无法使用innerHTML获得在计算器下方显示的答案。我以前使用过警报框,但理想情况下我想直接写入文档,以便我可以包含链接和格式。

我使用下面的方法成功地使用了一个稍微不那么复杂的脚本,该脚本不包含选择菜单(请参阅底部的工作代码)。除了显示区域的不同ID之外,这似乎是唯一的区别。

我通过firebug运行它,似乎正在执行所有计算,并且只有在显示结果时脚本才会失效。

我在javascript时仍然非常环保,而且我正在学习,所以你能提供的任何细节都会非常有用。

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

以下是正在运行的代码:

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

2 个答案:

答案 0 :(得分:2)

在您的工作脚本中,您有answer而不是answerCEMP。你定义它:

var answer = document.getElementById("answer");

您将该部分从失败的脚本中删除。此外,您在div上使用name而不是id。使用id。改变你的HTML:

<div id="answerCEMP"></div>

在javascript中定义answerCEMP

var answerCEMP = document.getElementById("answerCEMP");

答案 1 :(得分:0)

  

我在javascript上还是很绿   我正在学习,所以任何   你能提供的细节最多   有帮助的。

我对新手javascript程序员的建议是使用javascript框架。对于新手程序员,我认为非常受欢迎的jquery会非常令人满意。

  

但理想情况下我想直接写   到文档所以我可以包含链接   和格式化。

Jquery可以使用html()轻松完成此操作。我想指出using eval()可能非常危险。

  

我通过萤火虫和它跑了这个   似乎所有的计算都是   正在执行,只有脚本   到了时候才会倒下   显示结果。

我将使用jquery作为示例向dom追加一个简单的值。当你按下按钮我将改变文字=&gt; http://jsfiddle.net/WVXhD/