-1

我目前正在编写一个计算器，它分为两个部分。第一部分是一个文本框，它接受一个字符串（用户输入的一个活动）。第二部分由 4 个文本框组成。每个文本框都需要一个数字作为输入。在计算器的第二部分，计算器文本框标记为天、小时、分钟和秒。计算器的目的是确定活动完成后的金额。活动和代码的公式如下所示。

MoneyMadeDuringActivity = (NumOfDays * days) + (NumOfHours * hours) + (NumOfMinutes * minutes) + (NumOfSeconds * seconds)

    $(document).ready(function () {

  /**
   * VARIABLES
  ***/
  var activity = $('#txtActivity').text();
  var c = new Calculator();

  var days = $('#txtDays').text();
  var hours = $('#txtHours').text();
  var minutes = $('#txtMinutes').text();
  var seconds = $('#txtSeconds').text();

  var MoneyMadeDuringActivity = (days * c.per_day) + (hours + c.per_hour) + (minutes * c.per_minute) + (seconds * c.per_second);


  function listen(event, elem, func) {
    if (elem.addEventListener) {
      elem.addEventListener(event, func, false);
    } else if (elem.attachEvent) {
      var r = elem.attachEvent("on"+event, func);
      return r;
    }
  }

  listen("click", $("#btnCalculate"), (function() {
    $("#CalcOutput").text(
      "In the time it takes me to " + activity + ",<br />" + "Barack Obama makes " + "$" + MoneyMadeDuringActivity
    );
  });

});

我的问题是让输出工作。我无法显示任何东西。我有一个 id="CalcOutput" 的 div 标签，所以我不知道为什么它不能正确显示。请帮忙。

4

1 回答 1

0

我看到您正在尝试使用 text 方法插入 html，这是错误的，您可以使用 html 方法。

$("#CalcOutput").html(
      "In the time it takes me to " + activity + ",<br />Barack Obama makes $" + MoneyMadeDuringActivity
    );

编辑

这种方式对我有用。

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script>
      //mocking up your Calculator class
      function Calculator(){
        this.per_day = 345665;
        this.per_hour = 67845;
        this.per_minute = 1234;
        this.per_second = 789;
      }

      $(document).ready(function () {

        function calculate(){
          var activity = $('#txtActivity').val();
          var c = new Calculator();

          var days = +$('#txtDays').val();
          var hours = +$('#txtHours').val();
          var minutes = +$('#txtMinutes').val();
          var seconds = +$('#txtSeconds').val();

          var MoneyMadeDuringActivity = (days * c.per_day) + (hours + c.per_hour) + (minutes * c.per_minute) + (seconds * c.per_second);

          $("#CalcOutput").html(
            "In the time it takes me to " + activity + ",<br />Barack Obama makes $" + MoneyMadeDuringActivity
          );
        }


        $("#btnCalculate").click(function() {
          calculate();
        });

      });

    </script>
  </head>
  <body>
    activity:
    <input type='text' id='txtActivity' value='foobar' /><br/>
    days:
    <input type='text' id='txtDays' value='3'/><br/>
    hours:
    <input type='text' id='txtHours' value='12'/><br/>
    minutes:
    <input type='text' id='txtMinutes' value='34'/><br/>
    seconds:
    <input type='text' id='txtSeconds' value='37' /><br/>
    <button id='btnCalculate'>Calculate</button><br>
    <div id="CalcOutput"></div>
  </body>
 </html>
于 2012-10-13T02:09:48.527 回答