基于用户分数的5-point Likert量表问卷评分脚本开发求助

Let's walk through the issues in your code step by step and fix it to match your exact requirements:

Key Problems in the Original Code #

• Timing of variable fetching: You grabbed x and y values as soon as the page loads (before the user enters any data), so they'll be empty strings instead of valid numbers.
• DOM method typo: getElementByID should be getElementById (lowercase 'd'—JavaScript is case-sensitive!).
• Missing type conversion: Input values are strings by default; doing math with strings leads to weird concatenation instead of proper calculations.
• Incorrect z calculation: Your code returns the rounded multiple of 50 (like 450 for x=442), but the rule states z should be that value divided by 50 (so 9 for x=442).
• No logic to get selected radio option: You never check which Likert scale option the user picked, so you can't map it to the correct score adjustment.
• Broken result output: You tried to print the entire tm_result object directly, instead of pulling the value linked to the selected option.

Corrected Full Code #

<!DOCTYPE html>
<html>
<head>
    <title>Peer Review Score Calculator</title>
</head>
<body>
    <h1>Questionnaire mess around</h1>
    <p>
        <label for='ascore' class="inlinelabel">User A Score</label>
        <input id="ascore" type="number" required>
        <br><br>
        <label for='bscore' class="inlinelabel">User B Score</label>
        <input id="bscore" type="number" required>
    </p>
    <form action="" id="scorecalc" onsubmit="return false;">
        <fieldset>
            <br>
            <legend>Peer Review Questionnaire!</legend>
            <h3>Based on your recent project together, how would you rate User B in Time Management?</h3>
            <hr>
            <input type="radio" name="tmscore" value="tmvpoor" required> Very Poor
            <input type="radio" name="tmscore" value="tmpoor" required> Poor
            <input type="radio" name="tmscore" value="tmsat" required> Satisfactory
            <input type="radio" name="tmscore" value="tmgood" required> Good
            <input type="radio" name="tmscore" value="tmvgood" required> Very Good
            <br><br>
            <button onclick="myFunction()" class="button">Submit</button>
        </fieldset>
    </form>
    <h2>User B New Score</h2>
    <p id="result"></p>

    <script>
        function myFunction() {
            // Get input values and convert to numbers (critical for math!)
            const x = Number(document.getElementById("ascore").value);
            const y = Number(document.getElementById("bscore").value);

            // Calculate z exactly as per your rule
            const z = Math.round(x / 50);

            // Map each questionnaire option to its score calculation
            const scoreAdjustments = {
                "tmvpoor": y - z,
                "tmpoor": y,
                "tmsat": y + z,
                "tmgood": y + z + 1,
                "tmvgood": y + z + 2
            };

            // Get the user's selected radio option
            const selectedOption = document.querySelector('input[name="tmscore"]:checked').value;

            // Calculate and display the final score
            const newScore = scoreAdjustments[selectedOption];
            document.getElementById("result").textContent = `New Score: ${newScore}`;
        }
    </script>
</body>
</html>

What Changed & Why #

1. Moved logic into myFunction(): Now we only fetch input values when the user clicks Submit, ensuring we get their actual entries.
2. Fixed the getElementById typo: The DOM method now works correctly to pull input values.
3. Added Number() conversion: Turns string input values into numbers so addition/subtraction works as expected.
4. Updated z calculation: Math.round(x / 50) directly gives the value you need (e.g., 9 for x=442) without extra steps.
5. Used an object for score mappings: Objects are ideal for linking option values to calculations, making the code cleaner and easier to maintain.
6. Added radio selection logic: document.querySelector finds the selected option, so we can pull the correct adjustment value.
7. Added required attributes: Basic validation to ensure the user can't submit without entering scores and selecting an option.
8. Improved result display: Uses textContent (safer than innerHTML for plain text) and formats the output clearly.

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