JavaScript贴纸计算器两处异常求助（计算错误+结果不显示）

Let's break down your two issues and walk through the fixes step by step:

Problem 1: Step 10 Calculation Wrong on Input Switch, Correct After Clicking "GO" #

Root Cause #

The core issue is a backwards calculation order in your updatesum6() function. You're trying to compute how many stickers fit on the sheet before calculating the sheet size minus bleed (nsheetw/nsheeth).

Here's the problematic snippet:

// Calculates sticker counts using OLD, unupdated sheet values
document.form.stickersupsheet.value = Math.floor(+document.form.nsheetw.value / +document.form.neww.value);
document.form.stickersacsheet.value = Math.floor(+document.form.nsheeth.value / +document.form.newh.value);
// THEN updates the sheet size minus bleed (too late!)
document.form.nsheetw.value = +document.form.sheetw.value - +document.form.sheetbleed.value;
document.form.nsheeth.value = +document.form.sheeth.value - +document.form.sheetbleed.value;

When you switch input fields, the function uses stale nsheetw/nsheeth values from the last calculation. Clicking "GO" works by accident—since it re-runs the full flow, the values might have been updated from a prior run.

Fix #

Reorder the logic in updatesum6() to compute the adjusted sheet size first, then calculate sticker counts:

function updatesum6() {
    // 1. First calculate sheet size minus outer bleed
    document.form.nsheetw.value = +document.form.sheetw.value - +document.form.sheetbleed.value;
    document.form.nsheeth.value = +document.form.sheeth.value - +document.form.sheetbleed.value;
    
    // 2. Calculate individual sticker size with bleed added
    document.form.neww.value = +document.form.inputwidth.value + +document.form.bleed.value;
    document.form.newh.value = +document.form.inputheight.value + +document.form.bleed.value;
    
    // 3. Now compute sticker counts using fresh values
    document.form.stickersupsheet.value = Math.floor(+document.form.nsheetw.value / +document.form.neww.value);
    document.form.stickersacsheet.value = Math.floor(+document.form.nsheeth.value / +document.form.newh.value);
    
    document.form.stickersupsheetsw.value = Math.floor(+document.form.nsheetw.value / +document.form.newh.value);
    document.form.stickersacsheetsw.value = Math.floor(+document.form.nsheeth.value / +document.form.neww.value);
    
    document.form.rawstickeramount.value = document.form.stickersupsheet.value * document.form.stickersacsheet.value;
    document.form.switchedstickeramount.value = document.form.stickersupsheetsw.value * document.form.stickersacsheetsw.value;
    document.form.resultraw.value = document.form.sheetarea.value / document.form.stickerarea.value;
    
    updatesum7()
}

Problem 2: Top Result (sywg) Never Shows Content #

Root Cause #

1. No Initial Calculation: Your body uses onload="ClearForm()" which resets all fields to empty. No calculation runs after reset, so the sywg span stays blank.
2. Empty Input Handling: When only one dimension (width/height) is filled, the other is empty, leading to NaN values in calculations. updatesum7() tries to display NaN, which doesn't render anything.

Fixes #

1. Add Default Values & Initial Calculation

Modify your ClearForm() function to set default dimensions and trigger a calculation after reset:

function ClearForm(){
    document.form.reset();
    // Set default values so calculation can run immediately
    document.form.inputwidth.value = 100;
    document.form.inputheight.value = 100;
    // Trigger full calculation flow
    updatesum();
}

Or, add default values directly to your input HTML:

<input name="inputwidth" id="inputwidth" onChange="updatesum()" class="form-field" type="number" max="1280" min="20" step="1" value="100" />
<input name="inputheight" id="inputheight" onChange="updatesum3()" class="form-field" type="number" max="685" min="20" step="1" value="100" />

2. Guard Against Empty/Invalid Inputs

Update your validation functions to exit early if inputs are missing, and handle NaN in the final result:

function updatesum() {
    const width = +document.form.inputwidth.value;
    if (isNaN(width)) return; // Exit if width is empty/invalid
    
    if (width > 1280) {
        alert('Maximum width is 1280mm, please reduce');
    } else if (width < 20) {
        alert('Minimum width is 20mm, please increase');
    } else {
        updatesum5()
    }
}

function updatesum3() {
    const height = +document.form.inputheight.value;
    if (isNaN(height)) return; // Exit if height is empty/invalid
    
    if (height > 685) {
        alert('Maximum height is 685mm, please reduce');
    } else if (height < 20) {
        alert('Minimum height is 20mm, please increase');
    } else {
        updatesum5()
    }
}

function updatesum7() {
    const raw = +document.form.rawstickeramount.value;
    const switched = +document.form.switchedstickeramount.value;
    
    // Handle cases where values might be invalid
    if (isNaN(raw) || isNaN(switched)) {
        document.getElementById("sywg").innerHTML = "Enter both width and height";
        return;
    }
    
    // Show the larger of the two values
    document.getElementById("sywg").innerHTML = Math.max(raw, switched);
}

Bonus: Simplify Your Calculation Flow #

Your current chain of updatesum() → updatesum2() → updatesum5() is a bit tangled. You can simplify it with a single validation function that checks both dimensions before running calculations:

function validateAndCalculate() {
    const width = +document.form.inputwidth.value;
    const height = +document.form.inputheight.value;
    
    // Validate width
    if (isNaN(width)) { alert('Please enter a valid width'); return; }
    if (width > 1280) { alert('Maximum width is 1280mm, please reduce'); return; }
    if (width < 20) { alert('Minimum width is 20mm, please increase'); return; }
    
    // Validate height
    if (isNaN(height)) { alert('Please enter a valid height'); return; }
    if (height > 685) { alert('Maximum height is 685mm, please reduce'); return; }
    if (height < 20) { alert('Minimum height is 20mm, please increase'); return; }
    
    // Run all calculations
    updatesum6();
}

Then update your inputs and button to use this single function:

<input name="inputwidth" id="inputwidth" onChange="validateAndCalculate()" class="form-field" type="number" max="1280" min="20" step="1" value="100" />
<input name="inputheight" id="inputheight" onChange="validateAndCalculate()" class="form-field" type="number" max="685" min="20" step="1" value="100" />
<button type="button" class="submit-button" onclick="validateAndCalculate()">GO</button>

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