-1

現在、2 つのセクションに分かれた電卓をプログラミングしています。最初のセクションは、文字列 (ユーザーが入力したアクティビティ) を受け取るテキスト ボックスです。2 番目のセクションは 4 つのテキスト ボックスで構成されます。各テキストボックスには、入力として数値が必要です。電卓の 2 番目のセクションでは、電卓のテキスト ボックスに日、時間、分、秒のラベルが付けられています。計算機の目的は、活動が完了した後の金額を決定することです。アクティビティとコードの式を以下に示します。

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

テキスト メソッドで 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 に答える