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

Если я жестко закодирую переменную с информацией, которую я хочу, она возвращает значение правильно.

Мой код выглядит так:

<html>  
    <head>
    <title>Compounding interest in javascript</title>
    </head>
    <body>
    <script type="text/javascript">
    var term = 0;
    var interest = 0; 
    var contribution = 0; 
    var balance = 0;

    function calcValue(){

        term = document.getElementById("numOfMonths");
        interest = (document.getElementById("interestRate")/100) / 12;
        contribution = document.getElementById("amountPerMonth");

        for (i=0;i<(term+1);i++){
            balance = (balance + contribution) * (1 + interest);

                var rounded = Math.round( balance * 100 ) / 100;
                document.getElementById("#finalValue").value = rounded;
        }
    }


    </script>
    <form>
        <h3  id="amountPerMonth">Enter Amount You Would Like To Set Aside Per Month</h3>
        <input type="text">
        <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
        <input type="text" id="numOfMonths">
        <h3 id="interestRate">Enter Your Interest Rate</h3>
        <input type="text">
        <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
        <input type="text" id="finalValue">
    </form>
    </body>
    </html>

Спасибо за вашу помощь!

1
Tyson L. 19 Дек 2015 в 21:33

4 ответа

Лучший ответ

Это несколько проблем с вашим кодом.

  1. document.getElementById ("id") извлечет элемент DOM. Чтобы получить значение, вам нужно использовать document.getElementById ("id").

  2. Атрибуты "id" должны быть установлены на элементах ввода вместо h3, потому что вы обращаетесь к document.getElementById ("amountPerMonth"). Value, а атрибут "value" применяется для таких элементов, как input, а не для заголовков и т. Д.

  3. document.getElementById - это функция javascript, и вам нужно передать строку в качестве атрибута. Передача "#id" будет искать элемент с идентификатором как "#id". Вы, кажется, путаете jQuery с Javascript здесь. В jQuery это будет $ ("# id").

  4. В цикле for у вас есть (term + 1), где term на самом деле является строкой. Таким образом, «1» будет добавлено к строке, в результате чего цикл for будет выполняться неверное количество раз. Поэтому правильное использование parseInt и parseFloat должно быть сделано.

После этих изменений ваша программа должна работать как положено.

Это исправленный код.

<html>  
<head>
<title>Compounding interest in javascript</title>
</head>
<body>
<script type="text/javascript">
var term = 0, interest = 0, contribution = 0, balance = 0;

function calcValue(){
    var rounded;
    term = parseInt(document.getElementById("numOfMonths").value, 10);
    interest = (parseFloat(document.getElementById("interestRate").value, 10)/100) / 12;
    contribution = parseFloat(document.getElementById("amountPerMonth").value, 10);

    for (i=0;i<(term+1);i++){
        balance = (balance + contribution) * (1 + interest);

            rounded = Math.round( balance * 100 ) / 100;                
    }
    document.getElementById("finalValue").value = rounded; 
}


</script>
<form>
    <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
    <input type="text" id="amountPerMonth">
    <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
    <input type="text" id="numOfMonths">
    <h3>Enter Your Interest Rate</h3>
    <input type="text" id="interestRate">
    <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
    <input type="text" id="finalValue">
</form>
</body>
</html>
1
swathis 19 Дек 2015 в 19:01

Вот решение вашей проблемы: HTML:

<form>
<label for="amountPerMonth">Enter Amount You Would Like To Set Aside Per Month</label>
    <input type="text" name="amountPerMonth" id="amountPerMonth"/>
    <br/><br/>
    <label for="numOfMonths">Enter The Number Of Months Before You Plan To Withdraw</label>
    <input type="text" name="numOfMonths" id="numOfMonths"/><br/><br/>
    <label for="interestRate">Enter Your Interest Rate</label>
    <input type="text" name="interestRate" id="interestRate"/><br/><br/>
    <input type="button" id="calcButton" value="Calculate"/>
    <br/><br/>
    <input type="text" name="finalValue" id="finalValue"/>
</form>

JQuery:

var term = 0;
var interest = 0; 
var contribution = 0; 
var balance = 0;
var i=0;
var rounded=0;

$('#calcButton').click(function(){
term = parseInt($("#numOfMonths").val());
    interest = (parseInt($("#interestRate").val())/100) / 12;
    contribution = parseInt($("#amountPerMonth").val());

    for (i=0;i<(term+1);i++){
        balance = (balance + contribution) * (1 + interest);

            var rounded = Math.round( balance * 100 ) / 100;
            $("#finalValue").val(rounded);
    }
});

И вот скрипка для этого:

https://jsfiddle.net/2cg2kncn/

0
Abhishek Singh 19 Дек 2015 в 19:05

Есть несколько вещей, которые вы можете улучшить в своем коде:

  1. Переменные, которые вы используете в конкретном методе, должны быть объявлены внутри метода.

  2. document.getElementById ("id") возвращает объект DOM, поэтому вы должны использовать ".value", чтобы получить значение текстового поля.

  3. Вместо записи is = "ount PerMonth "и id =" Процентная ставка "с <h3> вы должны написать это в поле <input>, чтобы вы могли получить из него значение. Другой мудрый document.getElementById не будет работать.

  4. Как только вы получите окончательное значение баланса, вы можете назначить его вне цикла for.

Вот решение для вашего кода

    <html>
    <head>
    <title>Compounding interest in javascript</title>
    <script type="text/javascript">
    function calcValue() {
    var balance = 0;
    var term = document.getElementById("numOfMonths").value;
    var interest = (document.getElementById("interestRate").value / 100) / 12;
    var contribution = document.getElementById("amountPerMonth").value;

    for (i = 0; i < (term + 1); i++) {
    balance = (balance + contribution) * (1 + interest);
    }
    var rounded = Math.round(balance);
    document.getElementById("finalValue").value = rounded;
    }
    </script>
    </head>
    <body>
    <form>
    <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
    <input type="text" id="amountPerMonth">
    <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
    <input type="text" id="numOfMonths">
    <h3>Enter Your Interest Rate</h3>
    <input type="text" id="interestRate">
    <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()"> 
    <input type="text" id="finalValue">
    </form>
    </body>
    </html>
0
Mr Lister 27 Дек 2015 в 18:02

Вам нужно использовать .value, чтобы получить содержимое поля ввода. И вы должны использовать Number() для преобразования строкового ввода в число (вы также можете использовать parseInt() или parseFloat(), если вы хотите указать, к какому типу чисел его преобразовать).

И нет никакой причины помещать результат в поле вывода каждый раз через цикл, просто сделайте это один раз в конце.

Вы должны инициализировать balance в ноль каждый раз, когда вы вызываете функцию. В противном случае вы добавите вклады к предыдущему балансу.

Другая проблема в том, что у вас есть <h3 id="amountPerMonth"> и <h3 id="interestRate">. Идентификатор должен быть в <input>.

function calcValue() {
  var balance = 0;
  var term = Number(document.getElementById("numOfMonths").value);
  var interest = Number(document.getElementById("interestRate").value) / 100 / 12;
  var contribution = Number(document.getElementById("amountPerMonth").value);

  for (i = 0; i < (term + 1); i++) {
    balance = (balance + contribution) * (1 + interest);
  }
  var rounded = Math.round(balance * 100) / 100;
  document.getElementById("finalValue").value = rounded;
}
<form>
  <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
  <input type="text" id="amountPerMonth">
  <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
  <input type="text" id="numOfMonths">
  <h3>Enter Your Interest Rate</h3>
  <input type="text" id="interestRate">
  <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
  <input type="text" id="finalValue">
</form>

Кстати, вы знаете, что есть формула для вычисления сложных процентов, вам не нужно использовать цикл для этого, верно? См. Википедию

1
Barmar 19 Дек 2015 в 19:13