HTML与JavaScript几何计算器开发求助：输入半径计算几何参数

Hey there! Nice start on your geometric calculator—let's get it working properly. I've gone through your code and fixed several issues, plus added some improvements for accuracy and usability.

First, let's break down the key problems in your original code: #

• JavaScript syntax errors: Your conditionals (if valueOf(radio)="cc") use invalid syntax—we need proper parentheses, equality checks (===), and valid variable references.
• Incorrect value retrieval: You weren't properly grabbing the radius input value or the selected radio button option.
• No result output: The solve() function just tried to return values, but didn't actually display anything on the page.
• Unnecessary event triggers: Having onclick="solve()" on the input box and radio buttons would run the function every time you click them, which isn't ideal.
• Approximate PI value: Using 3.14 works, but Math.PI gives a more accurate value.
• Duplicate style attributes: Your image had two separate style attributes, which isn't valid HTML.

Here's the corrected full code: #

<!DOCTYPE html>
<html>
<body>
    <h1>Geometric Calculator Application</h1>
    <p>This application will take input the radius of a circle and the required measure for the following choices: Circle circumference, Circle area, Sphere surface area, and Sphere volume. After circle radius is inserted, select action you want to perform and press submit. 
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Casio_calculator_JS-20WK_in_201901_002.jpg/1200px-Casio_calculator_JS-20WK_in_201901_002.jpg" 
             alt="Calculator Picture" 
             width="30%" 
             height="30%" 
             style="float:right; clear:right">
        <br><br>
    </p>

    <label for="radius">Radius</label>
    <input type="text" id="radius" name="radius"><br><br>

    <label for="cc">Circle Circumference</label>
    <input type="radio" name="calc" id="cc" value="cc"><br>
    <label for="ca">Circle Area</label>
    <input type="radio" name="calc" id="ca" value="ca"><br>
    <label for="ssa">Sphere Surface Area</label>
    <input type="radio" name="calc" id="ssa" value="ssa"><br>
    <label for="sv">Sphere Volume</label>
    <input type="radio" name="calc" id="sv" value="sv"><br><br>

    <input type="button" value="Submit" onclick="solve()"/>
    <div id="result"></div>

    <script>
        function solve() {
            // Get radius value and convert to a number
            const radius = parseFloat(document.getElementById('radius').value);
            // Get selected radio button
            const selectedCalc = document.querySelector('input[name="calc"]:checked');
            const resultDiv = document.getElementById('result');

            // Validate input first
            if (isNaN(radius) || radius <= 0) {
                resultDiv.textContent = "Please enter a valid positive number for radius!";
                return;
            }

            if (!selectedCalc) {
                resultDiv.textContent = "Please select a calculation type!";
                return;
            }

            let result;
            const calcType = selectedCalc.value;

            // Calculate based on selected type
            switch(calcType) {
                case "cc":
                    result = 2 * Math.PI * radius;
                    break;
                case "ca":
                    result = Math.PI * Math.pow(radius, 2);
                    break;
                case "ssa":
                    result = 4 * Math.PI * Math.pow(radius, 2);
                    break;
                case "sv":
                    result = (4/3) * Math.PI * Math.pow(radius, 3);
                    break;
                default:
                    result = "Invalid calculation type selected!";
            }

            // Display the result, rounded to 2 decimal places for readability
            resultDiv.textContent = `Result: ${result.toFixed(2)}`;
        }
    </script>
</body>
</html>

Key improvements made: #

• Input validation: Checks if the radius is a valid positive number, and if a calculation type is selected—gives clear error messages if not.
• Accurate PI: Uses Math.PI instead of 3.14 for precise calculations.
• Proper value retrieval: Grabs the radius as a number and the selected radio button correctly.
• Result display: Shows the calculated value (rounded to 2 decimals) in the result div, instead of just returning it.
• Cleaner HTML: Removed unnecessary onclick events from inputs/radio buttons, fixed the duplicate style attribute on the image.
• Switch statement: Replaced messy conditionals with a cleaner switch structure for better readability.

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