求助：动态添加多组TextBox并实现面积计算的前端问题

Hey there! Let's work through fixing your dynamic input area calculator. I see two main issues with your current code that are causing problems: the calculate() function only keeps the last area result, and your remove_field() isn't properly removing elements from the DOM (which could mess up future calculations). Plus, we'll clean up some other small gotchas.

First, let's break down what was wrong: #

• Initial code issue: Your calculate() function was trying to grab elements with IDs Length and Width, but your dynamic inputs have IDs like length1, width1—so those elements didn't exist, hence no calculation at all.
• Updated code issue: In your loop, you overwrote the area variable each time, so only the last group's value got added to the result. Also, you weren't clearing the previous results before each calculation, leading to messy repeated outputs.
• Remove function issue: Setting innerHTML = "" leaves the wrapper element in the DOM, and the input elements might still be counted in your query selector—so we need to remove the wrapper entirely.

Here's the fixed, improved code: #

HTML

<body>
  <div id="wrapper">
    <div id="field_div">
      <input type="button" value="Add TextBox" onclick="add_field();">
    </div>
  </div>
  <p>
    <button onclick="calculate()">Calculate</button>
  </p>
  <p id="Result"></p>
</body>

JavaScript

function add_field() {
  // Count existing input groups (each group has 2 inputs + remove button)
  const totalGroups = document.querySelectorAll('.input-group').length + 1;
  
  // Create the group wrapper using createElement (cleaner than innerHTML concatenation)
  const groupWrapper = document.createElement('p');
  groupWrapper.id = `input_text${totalGroups}_wrapper`;
  groupWrapper.className = 'input-group';
  
  // Create length input
  const lengthInput = document.createElement('input');
  lengthInput.type = 'text';
  lengthInput.className = 'input_text';
  lengthInput.id = `length${totalGroups}`;
  lengthInput.placeholder = 'Length';
  
  // Create width input
  const widthInput = document.createElement('input');
  widthInput.type = 'text';
  widthInput.className = 'input_text';
  widthInput.id = `width${totalGroups}`;
  widthInput.placeholder = 'Width';
  
  // Create remove button
  const removeBtn = document.createElement('input');
  removeBtn.type = 'button';
  removeBtn.value = 'Remove';
  removeBtn.onclick = () => remove_field(`input_text${totalGroups}`);
  
  // Assemble the group and add to the container
  groupWrapper.appendChild(lengthInput);
  groupWrapper.appendChild(widthInput);
  groupWrapper.appendChild(removeBtn);
  document.getElementById('field_div').appendChild(groupWrapper);
}

function remove_field(id) {
  // Remove the entire wrapper element from the DOM (proper cleanup)
  const wrapper = document.getElementById(`${id}_wrapper`);
  if (wrapper) {
    wrapper.remove();
  }
}

function calculate() {
  const resultElement = document.getElementById('Result');
  // Clear previous results before calculating new ones
  resultElement.innerHTML = '';
  
  // Get all input groups to process each one individually
  const groups = document.querySelectorAll('.input-group');
  
  groups.forEach((group, index) => {
    // Grab length and width from the current group
    const lengthInput = group.querySelector(`#length${index + 1}`);
    const widthInput = group.querySelector(`#width${index + 1}`);
    
    // Parse values to numbers (fallback to 0 if input is empty or non-numeric)
    const length = parseFloat(lengthInput.value) || 0;
    const width = parseFloat(widthInput.value) || 0;
    const area = length * width;
    
    // Add the group's result to the output
    resultElement.innerHTML += `Group ${index + 1} Area: ${area.toFixed(2)}<br>`;
  });
}

Key improvements made: #

• Cleaner element creation: Using createElement instead of innerHTML concatenation avoids potential event handler issues and makes the code easier to debug.
• Proper DOM cleanup: The remove_field() function now removes the entire wrapper element, so deleted groups don't interfere with future calculations.
• Full result tracking: We loop through every input group, calculate each area, and display all results—no more losing values from earlier groups.
• Robust number handling: Added parseFloat with a fallback to 0, so empty or non-numeric inputs won't break the calculation (returns 0 instead of NaN).
• Fresh results on each click: We clear the result box before adding new outputs, so you don't get a cluttered list of repeated calculations.

Give this a try—when you add groups, input numbers, and click Calculate, you'll see each group's area displayed clearly. Removing a group will also properly take it out of the calculation pool!

内容的提问来源于stack exchange，提问作者NoobProgrammer