Блог

Главная - Вопросы по программированию - Простой Тест на Калькуляторе

Простой Тест на Калькуляторе

#javascript #html #calculator

Вопрос:

Когда я обрабатываю свой код в браузере, все, что я получаю, это:

введите описание изображения здесь

Я использую следующий код, который работает не так, как предполагалось:

 function compute() {
    p=document.getElementById("principal").value;
    r=document.getElementById("rate").value;
    n=document.getElementById("years").value;
    result=document.getElementById("result");
    result.innerHTML="If you deposit "   p   ",";
    result.innerHTML="at an interest rate of "   r   ".";
    result.innerHTML="in the year "   (newDate - n);
    result.innerHTML="You will receive an amount of "   (p*n*r/100)   ",";

}

Комментарии:

1. и что это должно показывать? выполняется ли вообще эта функция?

2. кроме того, вы каждый раз перезаписываете значение с result.innerHTML= помощью ….

3. Не делайте математику со строками, рано или поздно она вас укусит, и создайте единственную строку для innerHTML набора.

Ответ №1:

При небольшом количестве модификаций функция вычисления должна работать очень хорошо.

Изменения:

  • Убедитесь, что все наши входные значения преобразованы в числа.
  • Создайте элемент вывода результата (id=»результат») для отображения результатов.
  • Добавьте вывод в строку результата, затем назначьте его элементу результата innerHTML.
  • Создайте getFutureValue функцию, чтобы получить общую сумму через n лет.
 function getFutureValue(principal, interestRatePercent, termYears) {
    return principal*Math.pow(1   interestRatePercent/100, termYears);
}

function showResult(result) { 
    document.getElementById("result").innerHTML = resu<
}

function compute() {
    // Ensure all values are _numbers_
    p = Number(document.getElementById("principal").value);
    r = Number(document.getElementById("rate").value);
    n = Number(document.getElementById("years").value);
   
    const newDate = new Date();
    newDate.setFullYear(newDate.getFullYear()   n);
    let result = "If you deposit $"   p   ", ";
    result  = "at an interest rate of "   r   "%, ";
    result  = "in the year "   (newDate.getFullYear());
    result  = ", you will receive an amount of $"   getFutureValue(p, r, n).toFixed(2);
    showResult(result);

}
compute() 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    
<form class="p-3">
  <div class="mb-3">
    <label for="principal" class="form-label" >Amount</label>
    <input type="number" class="form-control" id="principal" value="1000">
  </div>
  <div class="mb-3">
    <label for="rate" class="form-label">Interest Rate</label>
    <input type="number" class="form-control" id="rate" value="3.5">
  </div>
  <div class="mb-3">
    <label for="years" class="form-label">No. of Years</label>
    <input type="number" class="form-control" id="years" value="25">
  </div>
  <button  type="button" class="btn btn-primary" onclick="compute()">Compute Interest</button>
  <div class="mb-3 mt-4">
    <label for="result" class="form-label">Result</label>
    <p id="result"></p>
  </div>
</form>

Ответ №2:

Попробуйте это

 function getresult() {
    var result = '';
    result  = 'If you deposit:P'  
        'at an interest rate of R'  
        'in the year Y'  
        'You will receive an amount of R';
    document.getElementById("result").innerHTML = resu<
}
Метки: