实现用户输入数字反转功能时出现NaN错误，请求协助解决

Hey there! Let's dig into why you're getting that NaN and get your number reversal working properly.

First, let's break down the key issues in your current code:

• You’re calling reverseNumber() right when the page loads: At that moment, the input box is still empty, so converting an empty string to a number gives you NaN. Any operations on NaN just keep it as NaN, which is why you see that in the console.
• The button click doesn’t show you the result: Even if the function worked correctly, you’re not doing anything with the reversed number it returns—so you’d never see the output.
• The num function parameter is redundant: You overwrite it immediately with the input value, so it’s just adding unnecessary confusion.

Here’s the fixed code, with clear improvements:

<input type="number" id="num-enter" placeholder="Enter number">
<button onclick="reverseNumber()">Reverse Number</button>
<!-- Add an element to display the result -->
<p id="output-result"></p>

<script>
function reverseNumber() {
  // Grab input value and convert to a number
  const inputVal = document.getElementById("num-enter").value;
  const num = Number(inputVal);

  // Handle empty or invalid input to avoid NaN
  if (isNaN(num)) {
    document.getElementById("output-result").textContent = "Please enter a valid number first!";
    return;
  }

  // Reverse the digits (work with absolute value to avoid messing up the sign)
  const reversedStr = Math.abs(num).toString().split("").reverse().join("");
  const reversedNum = parseInt(reversedStr, 10);

  // Keep the original number's sign
  const finalReversed = Math.sign(num) * reversedNum;

  // Show the result to the user
  document.getElementById("output-result").textContent = `Reversed number: ${finalReversed}`;
  // Log to console for your own checking
  console.log(finalReversed);
}
</script>

Let’s go over the key fixes:

• Removed the page-load console.log(reverseNumber()): Now the function only runs when you click the button, after you’ve entered a number.
• Added a result display element: The <p id="output-result"> will show either the reversed number or a friendly error if you enter nothing invalid.
• Added a NaN check: This catches empty inputs or non-numeric entries before they break the rest of the code.
• Used Math.abs(num) for reversal: This ensures we only reverse the digits, not the negative sign—we add the original sign back in later with Math.sign(num).
• Fixed the button text: Changed "Add Person" to "Reverse Number" to match what the button actually does (small but helpful detail!).

Now if you enter 123 and click the button, you’ll see "Reversed number: 321" show up below, and the console will log 321 too. It’ll even work for negative numbers—enter -456, and you’ll get -654, which is the correct signed reversed value.

备注：内容来源于stack exchange，提问作者kofa Sunday