Thiết kế website giá rẻ

Question

i have some code that when i try to modify it any further i lose functionality im just beyond confused why the functions for the total value and the popup for the questions doesnt work

long story short i need the html page to display a form that can be filled out with your name,email,phone model and manufacturer as well as having a quantity option that has a nice add phone button that creates a tab with the phone name and value

for the most part the code was working 100 percent it opened up popups and asked questions about condition and would give you a value but as soon as we tried to add the ability to use formspree and type in an email and name it seems everything has broken down

i will try to seperate these i am new to stackoverflow

i have gone over the code i am not a web developer but ihave tried to get some assistance with chatgpt with no luck

javascript

const phoneValues = {
  "avaya": { "j179": 100, "j169": 150 },
  "cisco": { "8865": 120, "7925g": 180 },
  "polycom": { "ccx 300": 130, "vvx 450": 190 },
  "yealink": { "t46s": 110, "t54w": 160 }
};

let totalValue = 0;
let phoneCount = 0;
let currentPhone = {};
let dialogStep = 0;

const dialogQuestions = [
  "Does the phone power up?",
  "Is the display scratched or damaged?",
  "Do you have the base and handset?"
];

function openDialog() {
  const manufacturer = document.getElementById('manufacturer').value.toLowerCase();
  const model = document.getElementById('model').value.toUpperCase();

  if (!phoneValues[manufacturer] || !phoneValues[manufacturer][model]) {
    alert('Phone not found in our database. Please enter a valid manufacturer and model.');
    return;
  }

  currentPhone = { manufacturer: manufacturer, model: model, value: phoneValues[manufacturer][model] };
  dialogStep = 0;
  showDialog();
}


function finalizePhone() {
  let currentValue = currentPhone.value;
  currentValue -= currentPhone.powerUp ? 0 : 40;
  currentValue -= currentPhone.displayDamaged ? 35 : 0;
  currentValue -= currentPhone.hasBaseHandset ? 0 : 15;

  totalValue += currentValue;
  phoneCount++;

  const totalValueElement = document.getElementById('totalValue');
  const totalValueContainer = document.getElementById('totalValueContainer');
  
  if (phoneCount === 0) {
    totalValueContainer.style.display = 'none';
  } else {
    totalValueContainer.style.display = 'block';
    if (totalValue <= 0) {
      totalValueElement.textContent = 'Free Recycling';
    } else {
      totalValueElement.textContent = `$${totalValue.toFixed(2)}`;
    }
  }

  const tab = document.createElement('div');
  tab.className = 'tab';
  tab.textContent = `${currentPhone.manufacturer.toUpperCase()} ${currentPhone.model} - $${currentValue}`;
  const closeBtn = document.createElement('span');
  closeBtn.className = 'close';
  closeBtn.textContent = 'x';
  closeBtn.onclick = () => removePhone(tab, currentValue);
  tab.appendChild(closeBtn);
  document.getElementById('phoneTabs').appendChild(tab);
}


function removePhone(tab, value) {
  totalValue -= value;
  phoneCount--;
  updateTotalValue();
  tab.remove();
}

function updateTotalValue() {
  const totalValueElement = document.getElementById('totalValue');
  const totalValueContainer = document.getElementById('totalValueContainer');

  if (phoneCount === 0) {
    totalValueContainer.style.display = 'none';
  } else {
    totalValueContainer.style.display = 'block';
    if (totalValue <= 0) {
      totalValueElement.textContent = 'Free Recycling';
    } else {
      totalValueElement.textContent = `$${totalValue.toFixed(2)}`; // Ensure toFixed(2) to display two decimal places
    }
  }
}

function submitForm() {
  const thankYouMessage = document.getElementById('thankYouMessage');
  thankYouMessage.style.display = 'block';

  // Get form element and submit
  const form = document.getElementById('phoneForm');
  form.submit();
}

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Office Phone Trade-In</title>
  <link rel="stylesheet" href="styles.css">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
  <h1>Office Phone Trade-In</h1>

  <div class="aboutusbox">
    <form id="phoneForm" action="https://formspree.io/f/xvoejoeg" method="POST">
      <label for="manufacturer">Manufacturer:</label>
      <input type="text" id="manufacturer" name="manufacturer" required>
      <label for="model">Model:</label>
      <input type="text" id="model" name="model" required>
      <label for="email">Your Email:</label>
      <input type="email" id="email" name="email" required> <!-- New input field for email -->
      <label for="quantity">Quantity:</label>
      <input type="number" id="quantity" name="quantity" min="1" value="1" onchange="updateTotal()">
      <button type="button" class="red-button" onclick="openDialog()">Add Phone</button>
    </form>

    <div id="phoneTabs">
      <!-- Tabs will be added here dynamically -->
    </div>

    <h2 id="totalValueContainer" style="display: none;">Total Trade-In Value: <span id="totalValue" style="color: green;"></span></h2>

    <button type="button" class="red-button" onclick="submitForm()">Submit</button>

    <div id="thankYouMessage">Thank you for contacting us. Our sales team will reach out to you to finalize the sale.</div>
  </div>

  <!-- Dialog -->
  <div id="dialog" class="dialog" style="display: none;">
    <div class="dialog-content">
      <p id="dialogQuestion"></p>
      <button type="button" class="red-button" onclick="dialogResponse(true)">Yes</button>
      <button type="button" class="red-button" onclick="dialogResponse(false)">No</button>
    </div>
  </div>

  <script src="script.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

how can i recover the function i javascript