javascript - 小费计算器javascript

Question

我正在创建一个小费计算器，它根据账单金额、小费百分比和人数(这些都是用户输入的)计算小费金额。我使用 Javascript 创建了一个脚本，但它不起作用，我不确定为什么。我以错误的方式调用函数吗？我在函数或 for 循环中是否犯了任何错误？对于代码段中计算器的困惑布局，我深表歉意，我将采用移动优先的方法，并且仍在使用桌面布局。

let allButtons = document.getElementsByClassName('btn');
let noOfButtons = allButtons.length;
let i;

function tipCalculate(e) {
  let billAmount = parseFloat(document.getElementById('bill__amount').value);
  let tipPercent = e.target.value;
  let noOfPeople = document.getElementById('people-no').value;
  let tipAmountPerPerson = billAmount / 100 * tipPercent / noOfPeople;
  let totalAmountPerPerson = (billAmount + (billAmount / 100 * tipPercent)) / noOfPeople;
  document.getElementByClassName('tip-amount-display').innerHTML = tipAmountPerPerson;
  document.getElementByClassName('total-amount-display').innerHTML = totalAmountPerPerson;
}

// append event listeners to each button
for (i = 0; i < noOfButtons; i++) {
  allButtons[i].addEventListener('click', tipCalculate);
}

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
:root {
  --clr-primary: hsl(172, 67%, 45%);
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-200: hsl(189, 41%, 97%);
  --clr-neutral-300: hsl(185, 41%, 84%);
  --clr-neutral-400: hsl(184, 14%, 56%);
  --clr-neutral-500: hsl(186, 14%, 43%);
  --clr-neutral-600: hsl(183, 100%, 15%);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

h2 {
  margin: 0;
  font-size: 1rem;
}

body {
  margin: 0;
  font-family: 'Space Mono', monospace;
  background: var(--clr-neutral-300);
  font-size: 1rem;
  font-weight: 400;
}

button {
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  border: none;
  padding: 0.3em 0.6em;
  border-radius: 0.45rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.btn-main {
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-100);
}

.btn-main:hover,
.btn-main:focus {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-600);
}

.btn-inverse {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-600);
}

.title {
  color: var(--clr-neutral-500);
  text-align: center;
  letter-spacing: .35em;
  padding: 1em 0;
}

form {
  background: var(--clr-neutral-100);
  border-radius: 1.8rem 1.8rem 0 0;
}

.accent-title {
  color: var(--clr-neutral-500);
}

.accent-title-light {
  color: var(--clr-neutral-400);
  font-size: .8rem;
}

.tip-amount {
  background: var(--clr-neutral-600);
  border-radius: 1rem;
  padding: 1.6rem;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  justify-content: space-between;
}

.neutral-title {
  color: var(--clr-neutral-100);
}

input {
  border: none;
  background-color: var(--clr-neutral-200);
  width: 100%;
  border-radius: .25rem;
}

.bill__amount,
.people-no {
  height: 40px;
  text-align: right;
  font-family: 'Space Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--clr-neutral-600);
  padding-right: .8rem;
}

.bill__amount {
  background-image: url(../images/icon-dollar.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-origin: content-box;
  padding-left: .8rem;
}

.people-no {
  background-image: url(../images/icon-person.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-origin: content-box;
  padding-left: .8rem;
}

div+div {
  margin-top: 2em;
}

.calculator {
  padding: 2rem;
}

.tip__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.accent-title-light {
  margin-top: 0%;
}

.reset {
  width: 100%;
  margin-top: 1rem;
}

.tip__heading {
  margin-bottom: .9rem;
}

.tip__custom {
  font-family: 'Space Mono', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .1rem;
  text-align: right;
  padding-right: .8rem;
}

.bill__heading,
.no-of-people__heading {
  margin-bottom: .6rem;
}

.tip-amount-display,
.total-amount-display {
  /* text-align: right; */
  color: var(--clr-primary);
  font-size: 24px;
}

.total-amount-display {
  margin-top: 1.25rem;
}

.tip-amount-display {
  align-self: start;
  margin-top: .4rem;
}

.col+.col {
  margin-top: 0;
}

@media (min-width: 768px) {
  form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: stretch;
    width: 50%;
    margin: 0 auto;
    border-radius: 1.8rem 1.8rem 1.8rem 1.8rem;
  }
  form>* {
    flex: 1 1 50%;
  }
  .attribution {
    align-self: flex-end;
  }
  div+div {
    margin-top: 0;
  }
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <script src="js/tip.js"></script>

  <title>Frontend Mentor | Tip calculator app</title>

</head>

<body>
  <h1 class="title">SPLI<br>TTER</h1>
  <form class="calculator">

    <div class="main-cols">
      <div class="bill">

        <h2 class="bill__heading"><label for="bill__amount" class="accent-title">Bill</label></h2>
        <input type="text" name="bill__amount" id="bill__amount" class="bill__amount" placeholder="0">

      </div>
      <div class="tip">

        <h2 class="tip__heading"><label for="" class="accent-title">Select Tip %</label></h2>
        <div class="tip__btns">
          <button type="button" class="btn btn-main">5%</button>
          <button type="button" class="btn btn-main">10%</button>
          <button type="button" class="btn btn-main">15%</button>
          <button type="button" class="btn btn-main">25%</button>
          <button type="button" class="btn btn-main">50%</button>
          <input type="text" name="tip__custom" class="tip__custom" id="tip__custom" placeholder="Custom">
        </div>
      </div>

      <div class="no-of-people">
        <h2 class="no-of-people__heading"><label for="people-no" class="accent-title">Number of People</label></h2>
        <input type="text" name="people-no" id="people-no" class="people-no" placeholder="0">
      </div>
    </div>

    <div class="main-cols">
      <div class="tip-amount">

        <div class="col">
          <h2 class="neutral-title">Tip Amount</h2>
          <h3 class="accent-title-light ">/ person</h3>
          <h2 class="neutral-title">Total</h2>
          <h3 class="accent-title-light">/ person</h3>
        </div>
        <div class="col">
          <h2 class="tip-amount-display">$0.00</h2>
          <h2 class="total-amount-display">$0.00</h2>
        </div>
        <button class="btn-inverse reset">Reset</button>
      </div>
    </div>

    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Sachin Jadhav</a>.
    </div>
  </form>


</body>

</html>

Answer 1

问题 1

它是 getElementsByClassName 而不是 getElementByClassName(您漏掉了“s”)。以下是使用方法:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

具体来说，document.getElementsByClassName('test')[0] 会让您感兴趣，获取该类的第一个元素。

您的代码将如下所示:

document.getElementsByClassName('tip-amount-display')[0].innerHTML = tipAmountPerPerson;
//                 ^                                 ^

或者您可以使用 querySelector使用 css 选择器在 DOM 中查找元素。

问题 2.1

e.target.value 始终是一个空字符串(用它进行数学运算将得到 NaN )。这是因为被单击的 HTML 元素上没有 value 属性。要修复它，请将 value="5" 添加到 HTML 中的按钮，如下所示:

<button type="button" value="5" class="btn btn-main">5%</button>
<button type="button" value="10" class="btn btn-main">10%</button>
<!-- ... -->

问题 2.2

document.getElementById('people-no').value 在未输入任何值时也是一个空字符串。要修复它，您可以检查它的 truthiness因为空字符串和 0 将是 falsy你可以用 1 替换它们。

长版:

let noOfPeople = document.getElementById('people-no').value;
  if (!noOfPeople) {
    noOfPeople = 1;
  }

使用 short circuit evaluation 的简短版本:

let noOfPeople = document.getElementById('people-no').value || 1;

这是一个有效的 fiddle :https://jsfiddle.net/zg6t4o1a/