如何修复网站中不起作用的按钮？ [已关闭]

问题描述 投票：0回答：1
javascript html css barcode
1个回答
0
投票

一切似乎都井然有序，除了你忘记关闭你的 

updatePrice
功能。如果您在 
generateRandomDigits
之前放置大括号，则该表单将起作用。

  // Append the barcode with the formattedTotalPrice
  JsBarcode("#barcode", formattedTotalPrice, {
    format: "CODE128",
    displayValue: true
  });
} // <--- HERE

function generateRandomDigits(length) {
  return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0');
}

确保代码格式正确。保持一致的缩进将更容易发现此类问题。

注意：如果您检查日志，您会发现还有另一个问题：

未捕获类型错误：无法读取 null 的属性（读取“id”）

确保您正在应用正确的空检查或使用可选链接，即

button.parentNode.parentNode?.id

片段

let currentPrice = 4;
let minimumPrice = 10;
let startPrice = 12;
let currentDiscount = 1;

function updatePrice() {
  const store = parseFloat(document.getElementById('store').value);
  const width = parseInt(document.getElementById('width').value);
  const height = parseInt(document.getElementById('height').value);
  const length = parseInt(document.getElementById('length').value);
  const density = parseInt(document.getElementById('density').value);
  const material = parseFloat(document.getElementById('material').value);
  const color = parseFloat(document.getElementById('color').value);
  const accuracy = parseFloat(document.getElementById('accuracy').value);

  // Calculate the runningPrice with proper order of operations and parentheses
  runningPrice = (
    minimumPrice +
    (startPrice * width * height * length) / 20000000 *
    (1 + density) *
    material *
    color *
    accuracy
  ) * currentDiscount * store;

  currentPrice = Math.round(runningPrice);
  document.getElementById('totalPrice').textContent = `Total Price: £${currentPrice}`;

  var price = currentPrice;
  var formattedPrice = "ES3D" + price.toString().padStart(8, '0');

  // Generate the barcode using JsBarcode
  JsBarcode("#barcode", formattedPrice, {
    format: "CODE128", // You can choose the barcode format you prefer
    displayValue: true // Display the text (formattedPrice) below the barcode
  });

  var randomDigits = generateRandomDigits(4); // Generate 4 random digits
  var totalPriceValue = currentPrice.toString().padStart(8, '0');
  var formattedTotalPrice = "ES3D" + totalPriceValue + randomDigits;

  // Append the barcode with the formattedTotalPrice
  JsBarcode("#barcode", formattedTotalPrice, {
    format: "CODE128",
    displayValue: true
  });
}

function generateRandomDigits(length) {
  return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0');
}

function showNextQuestion(currentQuestion, nextQuestion) {
  document.getElementById(currentQuestion).classList.add('hidden');
  document.getElementById(nextQuestion).classList.remove('hidden');
}

function showEmailAndSummary() {
  const email = document.getElementById('email').value;
  const size = `${document.getElementById('width').value}mm x ${document.getElementById('height').value}mm x ${document.getElementById('length').value}mm`;
  const density = document.getElementById('density').value;
  const material = document.getElementById('material').options[document.getElementById('material').selectedIndex].text;
  const color = document.getElementById('color').options[document.getElementById('color').selectedIndex].text;
  const accuracy = document.getElementById('accuracy').options[document.getElementById('accuracy').selectedIndex].text;

  const orderDetails = `Email: ${email}\nSize: ${size}\nDensity: ${density}\nMaterial: ${material}\nColor: ${color}\nAccuracy: ${accuracy}\nTotal Price: £${currentPrice}`;

  const mailtoLink = `mailto:[email protected]?subject=3D Print Order&body=${encodeURIComponent(orderDetails)}`;
  window.location.href = mailtoLink;
}

function showPreviousQuestion(currentQuestion, previousQuestion) {
  document.getElementById(currentQuestion).classList.add('hidden');
  document.getElementById(previousQuestion).classList.remove('hidden');
}

const continueButtons = document.querySelectorAll('button[onclick^="showNextQuestion"]');
continueButtons.forEach(button => {
  button.insertAdjacentHTML('afterend', '<button onclick="showPreviousQuestion(\'' + button.parentNode.parentNode.id + '\', \'' + button.parentNode.parentNode.previousElementSibling.id + '\')">Back</button>');
});
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
}

select {
  border-radius: 10px;
  background-color: white;
  color: black;
  padding: 8px 16px;
  border: 2px solid black;
  font-size: 14px;
  margin: 10px;
  width: 200px;
}

#container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.question {
  text-align: center;
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

button {
  margin: 10px;
  border-radius: 10px;
  /* Increases the border radius for rounder corners */
  background-color: #00008B;
  /* Sets the background color to dark blue */
  color: white;
  padding: 10px 20px;
  /* Adjusts padding for a slightly larger button */
  border: none;
  cursor: pointer;
  font-size: 14px;
}

input[type="range"] {
  width: 100%;
  /* Make the range input fill its container */
  margin: 10px 0;
}

input[type="email"],
input[type="number"] {
  border-radius: 10px;
  background-color: white;
  color: black;
  padding: 8px 16px;
  border: 2px solid black;
  /* Adds a black border */
  font-size: 14px;
  margin: 10px;
  width: 150px;
  /* Adjust the width as needed */
}

footer {
  position: fixed;
  /* Keep the footer fixed at the bottom */
  left: 10px;
  /* Position it on the left side */
  bottom: 10px;
  /* Position it at the bottom */
  display: flex;
  align-items: center;
  /* Vertically center content */
}

footer img {
  width: 30px;
  /* Adjust the image size as needed */
  margin-right: 10px;
  /* Add spacing between text and image */
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="container">
  <div id="question0" class="question">
    <p>Press continue to begin</p>
    <p>What location are you at?</p>
    <select id="store" onchange="updatePrice()">
      <option value="1">ElijahSpirit FDM Centre</option>
      <option value="1.25">DIY Store (Sandhurst)</option>
      <option value="1.5">DIY Store (Crowthorne)</option>
    </select>
    <div>
      <button onclick="showNextQuestion('question0', 'question1')">Continue</button>
    </div>
  </div>
  <div id="question1" class="hidden question">
    <p>Question 1: Please enter your email</p>
    <input type="email" id="email">
    <div>
      <button onclick="showNextQuestion('question1', 'question2')">Continue</button>
      <button onclick="showPreviousQuestion('question1', 'question0')">Back</button>
    </div>
  </div>

  <div id="question2" class="hidden question">
    <p>Question 2: Model size</p>
    Width (mm): <input type="number" id="width"><br> Height (mm): <input type="number" id="height"><br> Length (mm): <input type="number" id="length"><br>
    <div>
      <button onclick="updatePrice(); showNextQuestion('question2', 'question3')">Continue</button>
      <button onclick="showPreviousQuestion('question2', 'question1')">Back</button>
    </div>
  </div>

  <div id="question3" class="hidden question">
    <p>Question 3: Density</p>
    <input type="range" id="density" min="0" max="100" step="1" oninput="updatePrice()">
    <div>
      <button onclick="showNextQuestion('question3', 'question4')">Continue</button>
      <button onclick="showPreviousQuestion('question3', 'question2')">Back</button>
    </div>
  </div>

  <div id="question4" class="hidden question">
    <p>Question 4: Material</p>
    <select id="material" onchange="updatePrice()">
      <option value="1">PLA</option>
      <option value="1.5">PETG</option>
      <option value="4">TPU</option>
    </select>
    <div>
      <button onclick="showNextQuestion('question4', 'question5')">Continue</button>
      <button onclick="showPreviousQuestion('question4', 'question3')">Back</button>
    </div>
  </div>

  <div id="question5" class="hidden question">
    <p>Question 5: Color</p>
    <select id="color" onchange="updatePrice()">
      <optgroup label="Glossy Colors">
        <option value="1">Black</option>
        <option value="1">White</option>
        <option value="1">Grey</option>
        <option value="1">Blue</option>
        <option value="1">Red</option>
        <option value="1">Rainbow</option>
      </optgroup>
      <optgroup label="Matte Colors">
        <option value="1">Navy</option>
        <option value="1">Black</option>
        <option value="1">Cyan</option>
        <option value="1">Grey</option>
        <option value="1">Dark Green</option>
      </optgroup>
    </select>
    <div>
      <button onclick="showNextQuestion('question5', 'question6')">Continue</button>
      <button onclick="showPreviousQuestion('question5', 'question4')">Back</button>
    </div>
  </div>

  <div id="question6" class="hidden question">
    <p>Question 6: Accuracy</p>
    <select id="accuracy" onchange="updatePrice()">
      <option value="1">Draft</option>
      <option value="1.25">Excellent</option>
      <option value="1.5">Water Tight</option>
    </select>
    <div>
      <button onclick="showNextQuestion('question6', 'summary')">Continue</button>
      <button onclick="showPreviousQuestion('question6', 'question5')">Back</button>
    </div>
  </div>

  <div id="summary" class="hidden question">
    <p>Price:</p>
    <p id="totalPrice">Total Price: £4</p>
    <canvas id="barcode"></canvas>

    <div>
      <button onclick="showEmailAndSummary()">Place Order</button>
      <button onclick="showPreviousQuestion('summary', 'question6')">Back</button>
    </div>
  </div>
</div>

<footer>
  <img src="logos/logo.PNG" alt="Logo"> Designed by ElijahSpirit <br> Version 1.2.5 BETA
</footer>

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