Thiết kế website giá rẻ

Question

i have some code that when i try to modify it any further i lose functionality

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

java

const phoneValues = {
  "avaya": { "j179": 100, "j169": 150 },
  "cisco": { "8861": 120, "7925g": 180 },
  "polycom": { "ccx 200": 130, "vvx 250": 190 },
  "yealink": { "t42s": 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 phoneName = document.getElementById('phoneName').value.toLowerCase();
  const phoneModel = document.getElementById('phoneModel').value.toLowerCase();
  const value = phoneValues[phoneName] ? phoneValues[phoneName][phoneModel] : 0;

  if (value === 0) {
    alert('Phone not found in our database, Please cotact sales team');
    return;
  }

  currentPhone = { name: phoneName, model: phoneModel, value: value };
  dialogStep = 0;
  showDialog();
}

function showDialog() {
  document.getElementById('dialogQuestion').textContent = dialogQuestions[dialogStep];
  document.getElementById('dialog').style.display = 'flex';
}

function dialogResponse(response) {
  document.getElementById('dialog').style.display = 'none';

  if (dialogStep === 0) {
    currentPhone.powerUp = response;
  } else if (dialogStep === 1) {
    currentPhone.displayDamaged = response;
  } else if (dialogStep === 2) {
    currentPhone.hasBaseHandset = response;
    finalizePhone();
    return;
  }

  dialogStep++;
  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++;
  updateTotalValue();

  const tab = document.createElement('div');
  tab.className = 'tab';
  tab.textContent = `${currentPhone.name} ${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}`;
    }
  }
}

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

  // You can replace the alert with the actual form submission logic.
  alert('Thank you for contacting us! Our sales team will reach out to you to in 1 to 2 business days.');
}

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">
</head>
<body>
  <h1>Office Phone Trade-In</h1>

  <div class="aboutusbox">
    <form id="phoneForm">
      <label for="phoneName">Manufacturer:</label>
      <input type="text" id="phoneName" name="phoneName" required>
      <label for="phoneModel">Model:</label>
      <input type="text" id="phoneModel" name="phoneModel" required>
      <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" style="display: none;">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>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

html,css,java and me (cant get function to work)