JavaScript 獲取頁面元素文本內容進行運算：從

標簽提取數值計算除法

JavaScript 獲取頁面元素文本內容進行運算：從 <p> 標簽提取數值計算除法

HTML 標簽本身不具備計算能力，需用 JavaScript 讀取文本、解析數字、計算後寫入目標元素。

完整實現

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>P標簽數值運算</title></head>
<body>
<p id="num1">55</p>
<p id="num2">10</p>
<p id="result"></p>

<script>
window.onload = function() {
    var a = parseFloat(document.getElementById('num1').textContent);
    var b = parseFloat(document.getElementById('num2').textContent);
    if (!isNaN(a) && !isNaN(b) && b !== 0) {
        document.getElementById('result').textContent = '結果: ' + (a / b).toFixed(2);
    } else {
        document.getElementById('result').textContent = '無法計算';
    }
};
</script>
</body>
</html>

關鍵 API

• element.textContent：獲取純文本（不含 HTML 標簽），比 innerText 更標準、性能更好。
• parseFloat()：解析字符串為浮點數，自動忽略前導空白。
• isNaN()：檢查解析結果是否為有效數字。

擴展：批量處理多組數據

var pairs = document.querySelectorAll('.calc-pair');
pairs.forEach(function(pair) {
    var a = parseFloat(pair.querySelector('.num-a').textContent);
    var b = parseFloat(pair.querySelector('.num-b').textContent);
    pair.querySelector('.result').textContent = (a/b).toFixed(2);
});

理解「HTML 負責結構，JS 負責行為」的分離原則，避免在標簽中硬編碼計算邏輯。