dom元素显示问题

问题描述 投票：0回答：1

我尝试在单击“应用”后的范围内显示每月付款，甚至已经进行了测试，并且测试也不会打印出来并将代码放在自己的文件中，它应该显示该值。单击应用按钮时的 calc() 

function calc() {
  var downpayment = parseFloat(document.getElementById('down-payment').value);
  var price       = parseInt(document.getElementById('vehiclePrice').textContent.replace(/[^\d]/g, ''));
  var months      = parseInt(document.getElementById('months').value);
  var credit      = document.getElementById('credit').value;

  var interestRate;
  if (credit === 'bad') {
      interestRate = 0.12;
  } else if (credit === 'fair') {
      interestRate = 0.09;
  } else {
      interestRate = 0.075;
  }

  var loanAmount     = price - downpayment;
  var totalPayback   = loanAmount * (1 + interestRate);
  var monthlyPayment = totalPayback / months;

  document.getElementById('payment').textContent = `$${monthlyPayment.toFixed(2)}`;
};

const test = document.createElement('p');
test.textContent('it works');
document.body.appendChild(test);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estimate.css">
    <script src="paymentCalculator.js"></script>
</head>
<body>
    <header>Car<span>Guru</span></header>
    <div class="container">
        <h1>Monthly Payment Estimate Calculator</h1>
        <label for="downpayment">Down Payment</label>
        <input type="number" name="down-payment" id="down-payment">
        <h2><label for="price">Vehicle Price:</label>20,000</h2>
        <h4>
            <label for="months"months>Months</label>
            <select name="months" id="months"> -
                <option value="24">24</option>
                <option value="36">36</option>
                <option value="48">48</option>
                <option value="60">60</option>
                <option value="72">72</option>
                <option value="84">84</option>
            </select>
            
        </h4>
        <h3>
            <label for="credit-score">Credit raiting </label>
            <select name="credit-rating" id="credit">
                <option value="#">- </option>
                <option value="bad">Bad 0-590 Fico score </option>
                <option value="Fair">Fair 591-675 Fico score </option>
                <option value="Good">Good 676-800 Fico score </option>
            </select>
        </h3>
        <button id="calculatePayment">Apply</button>
        <span id="payment"></span>
    </div>
</body>
</html>

它应该显示该值。单击应用按钮时的 calc()

javascript html dom
1个回答
0
投票

textContent
不是函数

test.textContent = 'it works';

而不是

test.textContent('it works');

您正在查找 id 为 

vehiclePrice
的元素，该元素不存在，如果您尝试获取它，它将会中断 
textContent
。

这里我创建了一个 

span
元素，其 id 
vehiclePrice
为：

  <span id="vehiclePrice">20,000</span>

您还必须对

apply
按钮执行点击操作。您可以这样做：

const applyBtn = document.querySelector("#calculatePayment");
if (applyBtn) {
  applyBtn.addEventListener("click", calc);
}


function calc() {
  var downpayment = parseFloat(document.getElementById('down-payment').value);
  var price = parseInt(document.getElementById('vehiclePrice').textContent.replace(/[^\d]/g, ''));
  var months = parseInt(document.getElementById('months').value);
  var credit = document.getElementById('credit').value;

  var interestRate;
  if (credit === 'bad') {
    interestRate = 0.12;
  } else if (credit === 'fair') {
    interestRate = 0.09;
  } else {
    interestRate = 0.075;
  }

  var loanAmount = price - downpayment;
  var totalPayback = loanAmount * (1 + interestRate);
  var monthlyPayment = totalPayback / months;

  document.getElementById('payment').textContent = `$${monthlyPayment.toFixed(2)}`;
};

const test = document.createElement('p');
test.textContent = 'it works';
document.body.appendChild(test);

const applyBtn = document.querySelector("#calculatePayment");
if (applyBtn) {
  applyBtn.addEventListener("click", calc);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="estimate.css">
  <script src="paymentCalculator.js"></script>
</head>

<body>
  <header>Car<span>Guru</span></header>
  <div class="container">
    <h1>Monthly Payment Estimate Calculator</h1>
    <label for="downpayment">Down Payment</label>
    <input type="number" name="down-payment" id="down-payment">
    <h2><label for="price">Vehicle Price:</label>
      <span id="vehiclePrice">20,000</span>
    </h2>
    <h4>
      <label for="months" months>Months</label>
      <select name="months" id="months"> -
        <option value="24">24</option>
        <option value="36">36</option>
        <option value="48">48</option>
        <option value="60">60</option>
        <option value="72">72</option>
        <option value="84">84</option>
      </select>

    </h4>
    <h3>
      <label for="credit-score">Credit raiting </label>
      <select name="credit-rating" id="credit">
        <option value="#">- </option>
        <option value="bad">Bad 0-590 Fico score </option>
        <option value="Fair">Fair 591-675 Fico score </option>
        <option value="Good">Good 676-800 Fico score </option>
      </select>
    </h3>
    <button id="calculatePayment">Apply</button>
    <span id="payment"></span>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.