javascript - 我的 JavaScript 代码以及 HTML 如何显示它有问题

问题描述

我想知道错误在哪里，我是大学一年级，希望我的代码是最好的，我没有太多的编码经验，所以我会收集我能得到的所有反馈。

const txtName = document.getElementById("name");
const animalChoice = document.getElementById("feed");
const ticketCost = document.getElementById("ticketCost");
const ticketsRequired = document.getElementById("ticketsRequired");
const deliveryChoice = document.getElementsByName("delivery");
const deliveryCost = document.getElementById("deliveryCost");
const btnOrder = document.getElementById("order");
const ticketDetails = document.getElementById("ticketDetails");
const frmTickets = document.getElementById("ticketsForm")

//add event listerners
btnOrder.addEventListener("click", Calculations);
animalChoice.addEventListener("change", checkFeed);
deliveryChoice.forEach(item => item.addEventListener("change", checkDelivery));
window.addEventListener("load", initialise);

//allocating data that needs  to be used.


let feedCost;

function checkFeed() {
  let ticketChoice = animalChoice.options[animalChoice.selectedIndex].value;
  if (ticketChoice == "Penguins") {
    feedCost = 29;
  } else if (ticketChoice == "Elephants") {
    feedCost = 25;
  } else if (ticketChoice == "Monkeys") {
    feedCost = 27;
  } else {
    feedCost = 23;
  }
  ticketCost.innerText = `£${(feedCost)}`;
}

let dCost;

function checkDelivery() {
  if (this.value == "collect") {
    dCost = 1.50;
  } else if (this.value == "eticket") {
    dCost = 0.00;
  } else {
    dCost = 3.99;
  }
  deliveryCost.innerText = `£${(dCost)}`;
}

function initialise() {
  console.log("initialise")
  feedCost = 29;
  dCost = 0.00;
  ticketCost.innerText = `£${(feedCost)}`;
  deliveryCost.innerText = `£${(dCost)}`;
}

let discountedPrice = 0;
let discount = 0;

function Calculations(event) {
  if (ticketForm.checkValidity()) {
    event.preventDefault();
    let ticketNeeded = parseInt(ticketsRequired.value);
    let totalPrice = ticketNeeded * feedCost;
    ticketDetails.innerText += `Price for the tickets before the discount £${(totalPrice.toFixed(2))}`;


    if (ticketsRequired.value > 6 || ticketsRequired.value < 10);
    discount = 0.10;
    discountedPrice = totalPrice - (totalPrice * discount);

    if (ticketsRequired.value >= 10);
    discount = 0.15;
    discountedPrice = totalPrice - (totalPrice * discount);

  }

  ticketDetails.innerText += `\nPrice of your tickets after the discount is £${(discountedPrice)}`
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

<body>
  <form class="m-3" id="ticketForm">
    <fieldset>

      <!-- Name -->
      <div class="field">
        <label for="name" class="label">Name:</label>
        <div class="control">
          <input class="input" type="text" id="name" placeholder="Name">
        </div>
      </div>

      <!-- Feeding session -->
      <div class="field">
        <label for="feed" class="label">Feeding session:</label>
        <div class="control">
          <div class="select">
            <select id="feed">
              <option value="Penguins">Penguins</option>
              <option value="Monkeys">Monkeys</option>
              <option value="Elephants">Elephants</option>
              <option value="Giraffes">Giraffes</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Ticket cost -->
      <div class="field">
        <label for="tiketCost" class="label">Ticket cost:</label>
        <span id="ticketCost">£0.00 </span>
      </div>

      <!-- Tickets required -->
      <div class="field">
        <label for="ticketsRequired" class="label">Tickets required:</label>
        <div class="control">
          <input class="input" type="number" id="ticketsRequired" min="1" placeholder="Tickets" required>
        </div>
      </div>

      <!-- Delivery method -->
      <div class="field">
        <label for="delivery" class="label">Delivery method: </label>
        <div class="control">
          <input type="radio" id="eticket" name="delivery" value="eticket" checked>
          <label class="radio" for="eticket">e-ticket</label>
        </div>

        <div class="control">
          <input type="radio" id="collect" name="delivery" value="collect">
          <label class="radio" for="collect">Collect</label>
        </div>

        <div class="control">
          <input type="radio" id="post" name="delivery" value="post">
          <label class="radio" for="post">Post</label>
        </div>
      </div>

      <!-- Delivery cost -->
      <div class="field">
        <label for="deliveryCost" class="label">Delivery cost:</label>
        <span id="deliveryCost">£0.00 </span

> Blockquote I can't find my error all i want to be displayed is price before and after the discount

      </div>

      <!-- button -->
      <div class="field">
        <div class="control">
          <button name="order" id="order" class="button is-link">Order</button>
        </div>
      </div>

      <!-- Ticket details -->
      <div class="field">
        <label for="ticketDetails" class="label">Ticket details:</label

> Blockquote I linked all code and my calculations in Java Script looks ok

        <span id="ticketDetails"></span>
      </div>
  </form>
</body>

标签： javascripthtml

javascript - 我的 JavaScript 代码以及 HTML 如何显示它有问题

问题描述

解决方案

推荐阅读