如何将段落中的点数文本转为JavaScript数值并实现相加？求助修正错误代码

Let's break down what's wrong with your code and fix it step by step:

Key Issues in Your Original Code #

• <p> elements don't have a value property: Unlike form inputs (like <input>), paragraph elements store their content in textContent or innerText—using .value will just return undefined.
• Invalid if statement syntax: Your condition uses incorrect comma syntax and assignment (=) instead of proper type conversion logic. The Number() function also isn't being used correctly here.
• Unscoped variable: getPoint2 is declared without let/const, which makes it a global variable (bad practice).
• Non-numeric text in first paragraph: The string "2589 points" can't be directly converted to a number—you need to extract the numeric part first.

Correct Implementation #

Here's the fixed code with explanations:

HTML (unchanged, since it's fine) #

<p id="paraValue">2589 points</p>
<p id="paraValue2">258</p>
<!-- Add a paragraph to display the result -->
<p id="resultPara"></p>

JavaScript #

// Get the text content of both paragraphs
const pointText1 = document.getElementById("paraValue").textContent;
const pointText2 = document.getElementById("paraValue2").textContent;

// Extract numbers from the text:
// For the first string, use a regex to grab all digits, then convert to number
const getPoint1 = Number(pointText1.match(/\d+/)[0]);
// The second string is already a number, so we can directly convert it
const getPoint2 = Number(pointText2);

// Calculate and display the result
const resultPara = document.getElementById("resultPara");
resultPara.textContent = (getPoint1 + getPoint2) + " pts";

How This Works #

1. Getting paragraph content: We use textContent to get the actual text inside each <p> tag.
2. Extracting numbers:
   • For "2589 points", the regex /\d+/ matches all consecutive digits, and [0] grabs the first (and only) match, which we convert to a number with Number().
   • The second paragraph's text is already a numeric string, so we can directly convert it.
3. Displaying the result: We grab the result paragraph and set its text to the sum of the two points, followed by " pts".

If you want to add error handling (in case the text doesn't contain numbers), you can add checks like:

if (!isNaN(getPoint1) && !isNaN(getPoint2)) {
  resultPara.textContent = (getPoint1 + getPoint2) + " pts";
} else {
  resultPara.textContent = "Invalid point values";
}

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