如何实现Select控件不可重复选值并结合函数累加数值的功能？

Got it, let's work through this problem together. You need an add function paired with a Select control that stops duplicate number selections and accumulates the chosen values. Here's a polished, working solution that fixes the syntax gaps in your original code and adds the critical duplicate-prevention logic:

First, here's the complete, runnable implementation:

<select id="mySelect">
  <!-- Populate with your desired number options -->
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="9">9</option>
  <option value="18">18</option>
</select>
<button onclick="addSelectedValue()">Add Selected Number</button>
<p id="Group1Score">Group 1 score: 0</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const scoreTracker = (() => {
  let counter = 0;
  const selectedValues = new Set(); // Tracks numbers already added to avoid duplicates

  return {
    addValue: function() {
      const selectEl = document.getElementById("mySelect");
      const selectedNum = parseInt(selectEl.value, 10);
      
      // Check if the number was already selected
      if (selectedValues.has(selectedNum)) {
        alert("This number has already been added! Choose another.");
        return;
      }

      // Update counter and track the new value
      counter += selectedNum;
      selectedValues.add(selectedNum);
      
      // Refresh the score display
      document.getElementById("Group1Score").textContent = `Group 1 score: ${counter}`;

      // Trigger end state when score hits 54 or higher
      if (counter >= 54) {
        document.body.innerHTML = `<p class='GroupResult'>Group 1 has reached the target score!</p>`;
      }
    }
  };
})();

// Make the add function accessible to the button click
function addSelectedValue() {
  scoreTracker.addValue();
}
</script>

Key Details & Improvements: #

• Duplicate Prevention: We use a Set (selectedValues) to keep track of numbers that have already been added. Before processing a selection, we check if it exists in the set—if it does, we show a user-friendly alert and stop execution.
• Clean Encapsulation: The original code had unclosed syntax and unclear scope. We restructured it into an IIFE (Immediately Invoked Function Expression) that keeps counter and selectedValues private, avoiding global scope clutter.
• Safer Updates: We use textContent instead of innerHTML for the score display (safer for plain text) and fixed the incomplete template literal in your original end-state code.
• Explicit Type Handling: parseInt(selectedNum, 10) ensures we're working with integers instead of string values from the select control.

How It Works: #

1. Select a number from the dropdown and click the "Add Selected Number" button.
2. The function checks if the number was already added using the Set.
3. If it's a new number, it gets added to the counter, tracked in the Set, and the score display updates.
4. Once the counter hits 54 or more, the entire page content is replaced with a completion message.

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