Проблемы InnerHTML с функцией Tip Calculator - PullRequest
Новая
       32

Проблемы InnerHTML с функцией Tip Calculator

0 голосов
/ 30 октября 2019

Я пытаюсь написать простой калькулятор чаевых для класса информатики, в котором я учусь. Он написан на HTML / JavaScript. Фактическая функция расчета чаевых написана на JavaScript. Мне сказали использовать innerHTML для отображения вывода функции в HTML. Итак, насколько я понимаю, innerHTML работает, записывая любое значение / переменную (в данном случае вывод моей функции) в контейнер HTML с определенным идентификатором.

Сначала я подумал, что это может быть только мой кодв неправильном порядке. Но я попытался переместить определение функции, и это не помогло. Я проверил, правильно ли введен идентификатор при извлечении переменных из HTML. Я много читал о похожих проблемах и не могу понять, что я делаю неправильно.

Так вот, где я определяю свою функцию и использую innerHTML для записи вывода. Функция определяется до фактического пользовательского ввода. 

function calculateTip(){
        var checkAmount = document.getElementById("amountBox").value;
        var percentTip = document.getElementById("tipBox").value;
        var tipTotal = checkAmount * (percentTip / 100);
        document.getElementById("tipVar").innerHTML = tipTotal;
}
<body>
    <P>
      Enter the check amount: 
          $<input type="numeric" id="amountBox" size=10 value="">
      <br>
      Tip percentage: 
          %<input type="numeric" id="tipBox" size=4 value="">

    </P>
    <input type="button" value="Calculate Tip"
    onclick="calculateTip();" >
                  
    <hr>
    <div id="tipVar"></div>

  </body>

Итак, я ожидаю, когда вы введете сумму чека и процент чаевых и нажмете кнопку «Рассчитать чаевые», она запустит функцию, и innerHTMLзаписать вывод функции на страницу в контейнере div. Однако, когда я нажимаю кнопку, похоже, ничего не происходит. Если у кого-то есть какая-либо помощь / руководство, я буду очень признателен.

Ответы [ 3 ]

1 голос
/ 30 октября 2019

У вас есть опечатка в коде:

use document.getElementById("tipVar").innerHTML = tipTotal;

Ваш код не работал, потому что tipVar не был определен, это идентификатор и его следует использовать как строку.

Я обновил фрагмент вопроса, и теперь он должен работать.

0 голосов
/ 30 октября 2019

Вы только что забыли кавычки на getElementById ("tipBox"); 

<html>
<body>
   <p> Enter the check amount:
   <input type="numeric" id="amountBox" size=10 value="">
<br>
Tip percentage: 
<input type="numeric" id="tipBox" size=4 value="">
</P>
<input type="button" value="Calculate Tip" onclick="calculateTip();">
    <hr>
    <div id="tipVar"></div>

<script>
function calculateTip(){
 var checkAmount = document.getElementById("amountBox").value;
 var percentTip = document.getElementById("tipBox").value;
 var tipTotal = checkAmount * (percentTip / 100);
 document.getElementById("tipVar").innerHTML = tipTotal;
}
</script>
  </body>
</html>
0 голосов
/ 30 октября 2019

Вы должны поместить "tipVar" в кавычки внутри вашей функции. В противном случае вместо него передается значение неопределенной переменной с именем tipVar, и он не находит элемента с этим идентификатором.

...