使用 JavaScript 计算给定用户特定输入的方程式答案

【问题标题】：calculating an equation given a certain input from a user with JavaScript使用 JavaScript 计算给定用户特定输入的方程式
【发布时间】：2023-01-15 10:25:32
【问题描述】：

JavaScript 新手在这里。我的任务是使用给定的方程式计算用户的每月付款。我无法从用户那里获取值。

const loanAmount = document.getElementById('loan-amount');
const loanYears = document.getElementById('loan-years');
const loanRate = document.getElementById('loan-Rate');
const span = document.querySelector('span');
const form = document.getElementById("calc-form");


form.addEventListener("submit", function (e) {
    e.preventDefault();
console.log('hello')

    makeLogo();
  
  });



  function makeLogo(loanAmount, loanYears, loanRate) {
    const principle = loanAmount.value 
    const n = loanYears.value * 12;
    const i = loanRate.value / 12;


const monthylPayment = (principle* i)/1-(1+ i)** -(n);

span.innerText = monthylPayment;
  }

这是我到目前为止所拥有的，并且在 makeLogo 函数中的变量出现错误。

【问题讨论】：

我建议您首先解析输入的值，然后将这些值用作 makeLogo() 的参数，然后返回值并分配给您的 span.innerText 这与当前让您的函数处理元素本身不同。它应该使调试更容易。
脚本在正文底部
错误消息 = appTwo.js:19 Uncaught TypeError: 无法在 HTMLFormElement 的 makeLogo (appTwo.js:19:34) 读取未定义的属性（读取“值”）。<anonymous> (appTwo.js:12:5) makeLogo @ appTwo.js:19（匿名）@appTwo.js:12
function makeLogo(loanAmount, loanYears, loanRate) 这意味着该函数需要 3 个参数，并且由于您在调用 makeLogo(); 时没有传递任何参数，因此它们都是未定义的。要让函数使用全局变量，请删除参数：function makeLogo()。

标签： javascript math user-input

【解决方案1】：

将输入、计算和渲染分离到单独的函数中是个好主意。尽量保持功能尽可能简单。您将需要重新评估您的每月成本计算器，但这里有一个工作示例，它接受输入、计算然后呈现到表单字段中。

document.getElementById("calc-form").addEventListener('submit', (e) => {
    e.preventDefault();
    var loanAmount = document.getElementById('loan-amount').value;
    console.log(loanAmount);
    var loanYears = document.getElementById('loan-years').value;
    var loanRate = document.getElementById('loan-rate').value;
    
    var monthlyPayment = makeLogo( loanAmount, loanYears, loanRate );    
    console.log(monthlyPayment);
    // the monthly has now been calculated, simply put it where you'd like
    var calculated = document.getElementById('calculated');    
    calculated.value = monthlyPayment;
    
    var totalRepayment = document.getElementById('totalRepayment');    
    totalRepayment.value = monthlyPayment * ( loanYears * 12 );
    
} );
  
function makeLogo( principle, loanYears, loanRate) {
  var n = loanYears * 12;
  var i = loanRate / 12;
  var result = ( principle * i) / 1 - ( 1 + i )**-( n );
  return result;
}

<html>
<form action='submit' id ='calc-form'>
Loan Amount:<input id ='loan-amount'></input><BR/>
Loan Years:<input id='loan-years'></input><BR/>
Loan Rate:<input id='loan-rate'></input><BR/>
<input type='submit'>
</form>
<span id='span-output'>
Monthly Payment :<input id='calculated' readonly><BR/>
Total Re-Payment :<input id='totalRepayment' readonly>
</span>
</html>

【讨论】：

【解决方案2】：

您看到的错误可能是因为 makeLogo 函数试图访问 loanAmount、loanYears 和 loanRate 变量的值属性。不过，它们是 DOM 元素而不是它们的值。

您可以通过在将 DOM 元素传递给函数之前访问 DOM 元素的 value 属性来解决此问题，如下所示：

form.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log('hello')
    const principle = loanAmount.value;
    const n = loanYears.value * 12;
    const i = loanRate.value / 12;
    makeLogo(principle, n, i);
});

function makeLogo(principle, n, i) {
    const monthylPayment = (principle* i)/1-(1+ i)** -(n);
    span.innerText = monthylPayment;
}

这样，makeLogo 函数接收输入字段的值作为参数并可以正确执行计算。此外，通过执行以下操作检查每个元素的值，确保从用户那里获得正确的输入：

console.log(loanAmount.value,loanYears.value,loanRate.value)

并检查它们是否是您期望的值。

【讨论】：