Question

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

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
    );
  });

});

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

Answer 1

我看到你试图用文本方法插入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>

需要JavaScript计算器帮助

1 个答案: