能否用单个提交按钮执行多操作？及Calculate按钮无输出排查

1. Can a single submit button execute multiple operations? #

Absolutely. A single button's click event handler can contain multiple lines of logic to perform several tasks—like calculating multiple values, updating different UI elements, running validations, etc. You just need to wrap all the required operations inside the function that triggers when the button is clicked.

2. Fixing the "Check" Button Calculation Issue #

Your button with id Check isn't working due to three key syntax and logic errors. Here's the breakdown and corrected code:

Identified Errors #

• Event Listener Syntax Mistake: The comma after ('click') breaks the event binding. It should be a comma separating the event name and the callback function, followed by an opening brace.
• Missing Operator in LST Calculation: There's no multiplication operator between LCTE.value and the temperature difference parentheses.
• Incorrect Result Target: The "Pass/Fail" result is being assigned to the button itself instead of the val input box (labeled "Buckling Check").

Corrected Code #

<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>

<table style="width:100%">
<h2>Enter inputs</h2>

<tr>
<td><label for="P">MAOP(psi)=</label>
<input type="number" id="P"></td>
<td><label for="SMT">Standerd Manufacturing Thickness (in)=</label>
<input type="number"  id="SMT" value="0.000" onchange="myFunction(this.value)">
<td><label for="MOE">E(psi)=</label>
<input type="number" id="MOE"></td> <!-- Modulus of Elasticity -->
<td><label for="HS">Hoop Stress(psi)=</label>
<input type="number" id="HS" readonly></td>
</tr>

<tr>
<td><label for="D">D₀(in)=</label>
<input type="number" id="D" onchange="myFunction(this.value)"></td> <!-- Nominal Outside Diameter -->
<td><label for="val">Buckling Check=</label>
<input type="text" id="val" readonly></td>
<td><label for="LCTE">a=</label>
<input type="number" id="LCTE"></td> <!-- Linear Coefficient of Thermal Expansion -->
<td><label for="HSC">Hoop Stress Check=</label>
<input type="number" id="HSC" readonly></td>
</tr>

<tr>
<td><label for="SMYS">SMYS(psi)=</label>
<input type="number" id="SMYS"></td> <!-- Specified Minimum Yield Streneth -->
<td></td>
<td><label for="TDI">Ti(°F)=</label>
<input type="number" id="TDI"></td> <!-- Temperature During Installation -->
<td><label for="LST">σT(psi)=</label>
<input type="number" id="LST" readonly></td> <!-- Longitudinal Stress due to AT -->
</tr>

<tr>
<td><label for="DF">DF=</label>
<input type="number" id="DF"></td> <!-- Design Factor -->
<td></td>
<td><label for="MOT">Tₒ(°F)=</label>
<input type="number" id="MOT"></td> <!-- Maximum Operating Temperature -->
<td><label for="LSP">σP(psi)=</label>
<input type="number" id="LSP" readonly></td> <!-- Longitudinal Stress due to Internal P -->
</tr>

<tr>
<td><label for="T">T=</label>
<input type="number" id="T"></td> <!-- Temperature Derating Factor -->
<td></td>
<td><label for="PR">u=</label>
<input type="number" id="PR"></td> <!-- Poison Ratio -->
<td><label for="LSB">σB(psi)=</label>
<input type="number" id="LSB" readonly></td> <!-- Longitudinal Stress due to Bending -->
</tr>

<tr>
<td><label for="E">E ⱼ=</label>
<input type="number" id="E"></td> <!-- Joint Factor -->
<td></td>
<td><button type="button" id="calculate2">calculate</button></td>
<td><label for="NLS">σL(psi)=</label>
<input type="number" id="NLS" readonly></td> <!-- Net Longitudinal Stress -->
</tr>

<tr>
<td><button type="button" id="calculate">Calculate</button></td>
<td></td>
<td></td>
<td><label for="CS">σC(psi)=</label>
<input type="number" id="CS" readonly></td> <!-- Combined Stress -->
</tr>

<tr>
<td><label for="total">Wall Thickness(in)=</label>
<input type="number" id="total" readonly></td>
<td></td>
<td></td>
<td><button type="button" id="Check">Calculate</button></td>
</tr>
</table>

<script>
document.getElementById('Check').addEventListener('click', function() {
  // Get input values (convert to numbers where needed)
  const P = +document.getElementById("P").value;
  const D = +document.getElementById("D").value;
  const total = +document.getElementById("total").value;
  const DF = +document.getElementById("DF").value;
  const SMYS = +document.getElementById("SMYS").value;
  const E = +document.getElementById("E").value;
  const LCTE = +document.getElementById("LCTE").value;
  const TDI = +document.getElementById("TDI").value;
  const MOT = +document.getElementById("MOT").value;

  // Calculate Hoop Stress (HS)
  const HS = (P * D) / (2 * total);
  document.getElementById("HS").value = HS;

  // Calculate Hoop Stress Check (HSC)
  const HSC = DF * SMYS;
  document.getElementById("HSC").value = HSC;

  // Set Buckling Check result to val input
  if (HSC < HS) {
    document.getElementById("val").value = "Pass";
  } else {
    document.getElementById("val").value = "Fail";
  }

  // Calculate Longitudinal Stress due to AT (LST)
  const LST = E * LCTE * (TDI - MOT);
  document.getElementById("LST").value = LST;
});
</script>
</body>
</html>

Key Improvements in the Corrected Code #

• Fixed the event listener syntax to properly bind the click event.
• Added the missing multiplication operator in the LST calculation formula.
• Redirected the "Pass/Fail" result to the correct val input element instead of the button.
• Cleaned up variable declarations to use const (since values don't change after assignment) and converted inputs to numbers upfront for safer calculations.
• Removed redundant variable declarations that weren't used in the logic.

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