实现三数最大/最小/平均值计算的网页代码故障排查请求

Let's break down the issues in your code and fix them step by step:

Key Problems in Your Current Code #

• Wrong logical operator: You used & (bitwise AND) instead of && (logical AND) for condition checks. & operates on binary bits and won't behave as expected for comparing number values.
• Unreliable element selection: getElementsByTagName("input") grabs all input elements on the page—including your output text boxes if they're also inputs. This will mess up the index order, leading you to read the wrong values.
• String vs. number comparison: Input field values are strings by default. Comparing them directly with > will do lexicographical comparison (e.g., "10" will be considered smaller than "9"), not numerical comparison.
• Uninitialized variables: Your max variable starts with no value, so the initial condition check will fail to work correctly.
• Incomplete logic: You only started writing the maximum calculation, but didn't account for minimum and average, nor did you tie all logic to the button click properly.

Fixed Full Code Example #

Here's a complete, working version that addresses all these issues:

HTML

<!-- Top input boxes -->
<input type="number" id="num1" placeholder="Enter number 1">
<input type="number" id="num2" placeholder="Enter number 2">
<input type="number" id="num3" placeholder="Enter number 3">

<!-- Calculate button -->
<button onclick="calculateResults()">Calculate</button>

<!-- Bottom output boxes (set to readonly to prevent edits) -->
<input type="text" id="maxResult" readonly placeholder="Maximum">
<input type="text" id="minResult" readonly placeholder="Minimum">
<input type="text" id="avgResult" readonly placeholder="Average">

JavaScript

function calculateResults() {
  // Get input values and convert to numbers
  const num1 = Number(document.getElementById("num1").value);
  const num2 = Number(document.getElementById("num2").value);
  const num3 = Number(document.getElementById("num3").value);

  // Validate inputs are valid numbers
  if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
    alert("Please enter valid numbers for all fields!");
    return;
  }

  // Calculate values (using built-in Math methods for simplicity)
  const maxValue = Math.max(num1, num2, num3);
  const minValue = Math.min(num1, num2, num3);
  const avgValue = (num1 + num2 + num3) / 3;

  // Assign results to output boxes
  document.getElementById("maxResult").value = maxValue;
  document.getElementById("minResult").value = minValue;
  document.getElementById("avgResult").value = avgValue.toFixed(2); // Keep 2 decimal places
}

What Changed & Why #

1. Unique IDs for elements: Using id selectors ensures we always target the correct input/output boxes, no matter the page structure.
2. Number conversion: Number() turns input strings into actual numbers for proper numerical comparison.
3. Input validation: Checks if any input is not a number, and alerts the user to fix it.
4. Simplified calculations: Math.max() and Math.min() eliminate messy nested if statements and are more reliable.
5. Unified function: All calculation logic lives in one function, which is directly bound to the button's click event.
6. Readonly outputs: Prevents users from accidentally editing the result boxes.

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