Невозможно получить значения из ввода через JavaScript

Я просто пытаюсь взять входные данные из html input полей. Проблема в том, что моя функция всегда оценивает входные данные на 0. Что я должен делать, чтобы мой код работал так, как я ожидал (чтобы вводить данные из полей и передавать их в мои функции javascript). Если есть ответы на вопросы, заданные ранее, пожалуйста, обратитесь.Невозможно получить значения из ввода через JavaScript

Пожалуйста, не предлагайте решения jQuery - я не могу следовать его полному синтаксису скобок.

P.S. Нули на тройной, просто для того, чтобы избежать NaNs. Ничего больше.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <strong>Data</strong> 
 
    <hr>Price: 
 
    <input type="text" id="price" value="0"> 
 
    <br>Prepay: 
 
    <input type="text" id="prepay" value="0"> 
 
    <br>Percent: 
 
    <input type="text" id="percent" value="0"> 
 
    <br>Month: 
 
    <input type="text" id="month" value="0" onchange="refactorTable('payment-plan')"> 
 
    <br> 
 

 
    <hr> 
 
    <strong>Table</strong> 
 

 
    <table id="payment-plan" border="1"> 
 
    <thead> 
 
     <tr> 
 
     <td>Month</td> 
 
     <td>Amount</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
    </table> 
 
    <script type="text/javascript"> 
 
    var Sum = parseInt(document.getElementById('price').value); 
 
    var PrePayment = parseInt(document.getElementById('prepay').value); 
 
    var Percent = parseInt(document.getElementById('percent').value); 
 
    var Month = parseInt(document.getElementById('month').value); 
 

 
    //console.log(Sum +" -- "+ PrePayment +" -- "+ Percent +" -- "+ Month); 
 

 
    function monthlyPaymentPlan(Sum, PrePayment, Percent, Month) { 
 

 
     var BigJohn = Sum - PrePayment; 
 
     //console.log(BigJohn); 
 
     var monthly = Math.ceil((BigJohn + BigJohn * Percent)/Month); 
 
     return Month > 0 ? monthly : 0; 
 

 
    } 
 

 
    function lastMonth(Sum, PrePayment, Percent, Month) { 
 
     return Month > 0 ? Sum - monthlyPaymentPlan(Sum, PrePayment, Percent, Month) * (Month - 1) : 0; 
 
    } 
 

 
    function refactorTable(tbl_id) { 
 
     var table = document.getElementById(tbl_id).getElementsByTagName('tbody')[0]; 
 
     table.innerHTML = ""; 
 
     var i = 0; 
 
     var rows = document.getElementById('month').value; 
 
     rows = parseInt(rows); 
 
     for (i = 0; i < rows - 1; i++) { 
 
     table.insertRow(-1).innerHTML = "<td>" + (i + 1) + "</td><td>" + monthlyPaymentPlan(Sum, PrePayment, Percent, Month) + "</td>"; 
 
     } 
 
     table.insertRow(-1).innerHTML = "<td>" + rows + "</td><td>" + lastMonth(Sum, PrePayment, Percent, Month) + "</td>"; 
 
    } 
 
    </script> 
 

 

 
</body> 
 

 
</html>

источник

2015-11-30 marmeladze

Вы читаете эти значения, прежде чем пользователь сможет их изменить. Вам нужно получить их, когда они вам понадобятся, т. Е. Когда вызывается 'refactorTable'. –

var Sum  = parseInt(document.getElementById('price').value);

Это не является определяющим функцию или макрос. Это одноразовый расчет числа, и, похоже, это произойдет, когда страница запустится. Таким образом, он никогда не изменится с первого значения (0).

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

источник

2015-11-30 14:16:23 Katana314

Это единственный способ сделать эти переменные реактивными? – marmeladze

Нет, но в конечном итоге получение правильного значения каждый раз, когда вы ссылаетесь на него, будет означать выполнение большей части вышеуказанной строки. Если вам нравится, вы можете получить 'document.getElementById ('price')' и сохранить его как 'SumElement' или' SumNode'; это будет фактическая * ссылка *, которая постоянно отражает фактический элемент ввода. Вы можете извлечь из него значение, и оно должно быть правильным каждый раз. – Katana314

Вам нужно получить значения во время вызова функции. Прямо сейчас вы получаете значения при загрузке страницы (что равно 0).

function refactorTable(tbl_id) { 
    var Sum  = parseInt(document.getElementById('price').value); 
    var PrePayment = parseInt(document.getElementById('prepay').value); 
    var Percent = parseInt(document.getElementById('percent').value); 
    var Month  = parseInt(document.getElementById('month').value); 

    var table = document.getElementById(tbl_id).getElementsByTagName('tbody')[0]; 
    table.innerHTML = ""; 
    var i=0; 
    var rows = document.getElementById('month').value; 
    rows = parseInt(rows); 
    for(i=0; i<rows-1; i++) { 
     table.insertRow(-1).innerHTML = "<td>" + (i+1) + "</td><td>" + monthlyPaymentPlan(Sum, PrePayment, Percent, Month) + "</td>"; 
    } 
    table.insertRow(-1).innerHTML = "<td>" + rows + "</td><td>" + lastMonth(Sum, PrePayment, Percent, Month) + "</td>"; 
}

источник

2015-11-30 14:16:25 nardnob

Я полностью пропустил этот момент, спасибо. – marmeladze

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

// Define the variables globally so they can be used in any function 
var Sum; 
var PrePayment; 
var Percent; 
var Month; 

// Call this function to set the values of the global variables. 
function getValues() { 
    Sum  = parseInt(document.getElementById('price').value); 
    PrePayment = parseInt(document.getElementById('prepay').value); 
    Percent = parseInt(document.getElementById('percent').value); 
    Month  = parseInt(document.getElementById('month').value); 
} 

// Call the getValues function first to set the values and then continue on 
// with your function calculations. 
function refactorTable(tbl_id) { 
    getValues(); 
    // Do the rest... 
}

источник

2015-11-30 14:17:02 Robbert

хороший трюк, спасибо. – marmeladze

Вам необходимо обновить значение входной переменной при изменении id = "month", чтобы вы могли обновить значение.

var Sum = ''; 
var PrePayment = ''; 
var Percent = ''; 
var Month = ''; 
function inputsval() { 
    Sum = parseInt(document.getElementById('price').value); 
    PrePayment = parseInt(document.getElementById('prepay').value); 
    Percent = parseInt(document.getElementById('percent').value); 
    Month = parseInt(document.getElementById('month').value); 
} 
function refactorTable(tbl_id) { 
    inputsval(); 
    //Your other code..... 
}

источник

2015-11-30 14:27:00

хороший трюк, спасибо. – marmeladze

Невозможно получить значения из ввода через JavaScript

ответ

Смежные вопросы