Question

我的js无法与我的html文件一起使用。那怎么办如果我打开html页面，我只会看到文本输入，但结果却看不到

function computeLoan() {
	var amount = document.getElementById('amount').value;
	var interest_rate = document.getElementById('interest_rate').value;
	var months = document.getElementById('months').value;
	var interest = (amount * (interest_rate* .01)) / months;
	var payment = ((amount / months) + interest).toFixed(2);
	payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
	document.getElementById('payment').innerHTML = "Monthly Payment =$"+payment; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="calc.js"></script>
</head>
<body>
	<p>Loan Amount: $<input id="amount" type="number" min="1" max="10000" onchange="computeLoan()"></p>
	<p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()"></p>
	<p>Months: <input id="Months" type="number" min="1" max="72" value="1" step="1" onchange="computeLoan()"></p>
	<h2 id="payment"></h2>
</body>
</html>

Answer 1

您好像打错了文字（您说的是Months而不是HTML中的months）。如果您解决了该问题，它应该可以工作。

function computeLoan() {
	var amount = document.getElementById('amount').value;
	var interest_rate = document.getElementById('interest_rate').value;
	var months = document.getElementById('months').value;
	var interest = (amount * (interest_rate* .01)) / months;
	var payment = ((amount / months) + interest).toFixed(2);
	payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
	document.getElementById('payment').innerHTML = "Monthly Payment =$"+payment; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="calc.js"></script>
</head>
<body>
	<p>Loan Amount: $<input id="amount" type="number" min="1" max="10000" onchange="computeLoan()"></p>
	<p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()"></p>
	<p>Months: <input id="months" type="number" min="1" max="72" value="1" step="1" onchange="computeLoan()"></p>
	<h2 id="payment"></h2>
</body>
</html>

Answer 2

您的代码中有两个问题：

首先：错字

您将document.getElementById('Months')输错了document.getElementById('months')

第二：未调用函数

我不确定您是否在calc.js文件中调用了该函数，但是从您的示例中，您仅声明了该函数而忘记了调用它。

您只需添加computedLoad()即可调用它。

工作代码：

function computeLoan() {
  var amount = document.getElementById('amount').value;
  var interest_rate = document.getElementById('interest_rate').value;

  // PROBLEM HERE
  // var months = document.getElementById('months').value;

  // CORRECTED
  var months = document.getElementById('Months').value;

  var interest = (amount * (interest_rate* .01)) / months;
  var payment = ((amount / months) + interest).toFixed(2);
  
  payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
  
  document.getElementById('payment').innerHTML = "Monthly Payment =$"+payment; 
}


// ADD THIS
computeLoan();

<p>Loan Amount: $<input id="amount" type="number" min="1" max="10000" onchange="computeLoan()"></p>
<p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()"></p>
<p>Months: <input id="Months" type="number" min="1" max="72" value="1" step="1" onchange="computeLoan()"></p>
<h2 id="payment"></h2>

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <p>Loan Amount: $<input id="amount" type="number" min="1" max="10000" onchange="computeLoan()"></p>
    <p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()"></p>
    <p>Months: <input id="months" type="number" min="1" max="72" value="1" step="1" onchange="computeLoan()"></p>
    <h2 id="payment"></h2>
</body>
<!-- it should be lower -->
<script src="calc.js"></script>

</html>

document.getElementById可能找不到您的ID，请在源代码底部写上

Answer 4

您使用了Months而不是months（应该是document.getElementById("Months")而不是document.getElementById("months")）-记住元素id是区分大小写的。另外，我建议将onkeyup事件与onchange一起使用，该事件仅在元素失去焦点（如果键入）时才触发。这样，将在您键入或使用向上和向下箭头更改输入框中的值时计算结果。要在页面加载时查看结果，请在页面加载时调用该函数。

function computeLoan() {
	var amount = document.getElementById('amount').value;
	var interest_rate = document.getElementById('interest_rate').value;
	var months = document.getElementById('Months').value;
	var interest = (amount * (interest_rate* .01)) / months;
	var payment = ((amount / months) + interest).toFixed(2);
	payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
	document.getElementById('payment').innerHTML = "Monthly Payment =$"+payment; 
}
window.onload= function(){
 computeLoan();
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="calc.js"></script>
</head>
<body>
	<p>Loan Amount: $<input id="amount" type="number" min="1" max="10000" onkeyup="computeLoan()" onchange="computeLoan()"></p>
	<p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onkeyup="computeLoan()" onchange="computeLoan()"></p>
	<p>Months: <input id="Months" type="number" min="1" max="72" value="1" step="1" onkeyup="computeLoan()" onchange="computeLoan()"></p>
	<h2 id="payment"></h2>
</body>
</html>

如何连接我的html和js文件？

4 个答案: