如何用JavaScript循环统计用户输入数字的位数？

Perfect, let's put together a complete solution that meets all your requirements—using loops, input/button elements, and avoiding document.write() entirely. Here's how to do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Digit Counter with Loop</title>
    <style>
        /* Optional styling for better UX */
        .input-area {
            margin: 20px;
            padding: 15px;
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
        input, button {
            margin: 5px 0;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="input-area">
        <label for="numberInput">Enter a number:</label>
        <input type="number" id="numberInput" placeholder="Example: 600">
        <button id="checkButton">Check Digit Count</button>
        <div class="result" id="resultOutput"></div>
    </div>

    <script>
        // Grab references to our HTML elements
        const numberInput = document.getElementById('numberInput');
        const checkButton = document.getElementById('checkButton');
        const resultOutput = document.getElementById('resultOutput');

        // Function to count digits using a loop (no string conversion!)
        function calculateDigitCount(num) {
            // Handle 0 specifically since it has 1 digit
            if (num === 0) return 1;
            
            let digitCount = 0;
            // Convert to positive to handle negative numbers correctly
            num = Math.abs(num);
            
            // Loop: divide by 10 until the number becomes 0
            while (num > 0) {
                num = Math.floor(num / 10);
                digitCount++;
            }
            return digitCount;
        }

        // Add click event listener to the button
        checkButton.addEventListener('click', function() {
            // Get and parse the input value
            const inputNumber = parseInt(numberInput.value);

            // Validate the input first
            if (isNaN(inputNumber)) {
                resultOutput.innerHTML = "Please enter a valid whole number!";
                return;
            }

            // Calculate digit count using our loop-based function
            const count = calculateDigitCount(inputNumber);

            // Generate the appropriate message
            let resultMessage;
            switch(count) {
                case 1:
                    resultMessage = "It's made of one digit";
                    break;
                case 2:
                    resultMessage = "It's made of two digits";
                    break;
                case 3:
                    resultMessage = "It's made of three digits";
                    break;
                default:
                    resultMessage = `It's made of ${count} digits`;
            }

            // Display the result using innerHTML (no document.write!)
            resultOutput.innerHTML = resultMessage;
        });
    </script>
</body>
</html>

What This Code Does (Breakdown) #

• Input & Button Setup: We use a type="number" input to restrict users to numeric values, paired with a button to trigger the check. The result is shown in a dedicated <div> to keep things organized.
• Loop-Based Digit Counting: The calculateDigitCount() function uses a while loop to repeatedly divide the number by 10 (and floor the result) until the number hits 0. Each iteration increments our digit counter.
  • We handle 0 as a special case because dividing 0 by 10 would never exit the loop.
  • Math.abs() ensures negative numbers (like -600) are counted correctly—they still have 3 digits!
• Input Validation: We check if the input is a valid number with isNaN() to prevent errors from non-numeric entries.
• Result Display: Instead of document.write(), we use innerHTML to update the result <div>—this is the standard, safe way to modify page content dynamically without overwriting the entire page.

How to Test It #

1. Enter any whole number (positive or negative) into the input field.
2. Click the "Check Digit Count" button.
3. The result will appear in the gray box below, telling you how many digits your number has.

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