如何将单个输入框的值存入数组并计算输入数字的总和？

Hey there! Let's tackle your two frontend questions step by step, and I'll also share a quick note about your CSS code to help you out.

To save input values into an array, you'll need to listen for user actions (like clicking a button or pressing Enter), grab the input's content, and add it to an initialized array. We'll also handle empty inputs to avoid cluttering the array.

Here's a working example:

<!-- HTML -->
<input type="text" id="inputField" placeholder="Enter a value">
<button id="addBtn">Add to Array</button>
<p>Current Array: <span id="arrayDisplay"></span></p>

// JavaScript
// Initialize an empty array to store values
let userValues = [];

// Grab DOM elements
const input = document.getElementById('inputField');
const addButton = document.getElementById('addBtn');
const display = document.getElementById('arrayDisplay');

// Function to handle adding values
function addValueToArray() {
  const inputContent = input.value.trim();
  // Only add non-empty values
  if (inputContent) {
    userValues.push(inputContent);
    // Update the page to show the current array
    display.textContent = JSON.stringify(userValues);
    // Clear the input field after adding
    input.value = '';
  }
}

// Add event listeners
addButton.addEventListener('click', addValueToArray);
// Allow pressing Enter to submit
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addValueToArray();
});

If your input is meant for numbers, we'll need to convert the input string to a number, validate it, then calculate the sum using the array. Here's how to adjust the code for this:

<!-- Updated HTML with sum display -->
<input type="number" id="numberInput" placeholder="Enter a number">
<button id="addNumBtn">Add to Array</button>
<p>Numbers Array: <span id="numArrayDisplay"></span></p>
<p>Total Sum: <span id="sumDisplay">0</span></p>

// Updated JavaScript for number handling
let numberArray = [];

const numInput = document.getElementById('numberInput');
const addNumBtn = document.getElementById('addNumBtn');
const numDisplay = document.getElementById('numArrayDisplay');
const sumDisplay = document.getElementById('sumDisplay');

function addAndCalculateSum() {
  const inputNum = parseFloat(numInput.value.trim());
  // Check if the input is a valid number
  if (!isNaN(inputNum)) {
    numberArray.push(inputNum);
    numDisplay.textContent = JSON.stringify(numberArray);
    // Calculate sum using reduce()
    const total = numberArray.reduce((accumulator, current) => accumulator + current, 0);
    sumDisplay.textContent = total;
    numInput.value = '';
  } else {
    alert('Please enter a valid number!');
  }
}

addNumBtn.addEventListener('click', addAndCalculateSum);
numInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addAndCalculateSum();
});

Your custom checkbox styling is a great start for customizing checkboxes, but I noticed the background-image URL for the .complete class is truncated (https://cdn.glitch.com/72548e86-2...). Make sure to use the full, valid URL so the completed state image loads properly. Here's the corrected structure (fill in the full URL):

.item-check {
  display: inline-block;
  position: absolute;
  width: 22px;
  height: 21px;
  cursor: pointer;
  background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fincomplete.png?1495684448133');
}
.complete {
  background-image: url('YOUR_FULL_COMPLETED_IMAGE_URL');
}

Also, remember to pair this CSS with corresponding HTML (like a hidden checkbox input and a label with the .item-check class) to make the custom checkbox interactive.

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