将 HTML 文本设置为 JS 变量答案

【问题标题】：Setting HTML text to a JS variable将 HTML 文本设置为 JS 变量
【发布时间】：2015-04-17 03:49:35
【问题描述】：

我想从 html 标签中获取文本并将其保存在 js 变量中。我正在看的是这个：

JavaScript：

function Myfunction(){
  var x; //Fist num here
  var y; //second num here
  var z=x+y;
  alert(z);
}

HTML：

<p id="num1">2</p>
<p id="num2">3</p>

我正在使用计算器，并希望从“屏幕”中获取值并将它们保存到变量中，以进行数学运算。每个数字在 calc 程序中是这样分隔的：

<samp id="numb1">Any Number</samp><samp id="op">(+,-,*,/)</samp><samp id="numb2">Any Number</samp><samp id="answer">Answer prints here</samp>

将答案保存到变量后，将清除 numb1、op 和 numb2 并打印答案。

【问题讨论】：

samp 标签用于实现更丰富的文字效果。如果您想从“屏幕”中获取值，您需要获取input 标签。说您可以使用document.getElementById('numb1').innerHTML 或document.getElementById('numb1').textContent 来检索将属于string 类型，因此在使用parseInt添加转换为数字类型之前
@Rakesh_Kumar 非常感谢你给了我完整的答案！现在可以使用了

标签： javascript html variables text tags

【解决方案1】：

您可以访问节点内容并像这样存储变量：

var vAnswer = document.getElementById("answer").innerHTML;

【讨论】：

谢谢 Tha 正是我要找的东西！
现在我得到“[object HTMLelement] 作为答案？
抱歉，可能是错字：Elment -> Element！？？
和.innerHTML！ ...它应该包含@id="answer" 标签的内容（一个字符串）

【解决方案2】：

使用jquery可以得到如下图的值，

var x = $('#numb1').text();
var y = $('#numb2').text();
var z  =parseInt(x,10) +parseInt(y,10);
$('#answer').text('Total:'+z)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<samp id="numb1">2</samp>
<samp id="op">(+,-,*,/)</samp>
<samp id="numb2">3</samp>
<samp id="answer"></samp>

单独使用 javascript，使用 var x = document.getElementById('numb1').innerHTML;

【讨论】：

【解决方案3】：

function myFunction(){
  var x; //Fist num here
var y; //second num here
    x = $("#num1").text();
    y = $("#num2").text();
    alert(x);
    alert(y);
var z=parseInt(x,10)+parseInt(y,10);
alert(z);
}

【讨论】：

【解决方案4】：

var x = document.getElementById('numb1').innerHTML;
var y = document.getElementById('numb2').innerHTML;
document.getElementById('answer').innerHTML = parseInt(x,10) + parseInt(y,10);

<samp id="numb1">2</samp>
<samp id="op">(+,-,*,/)</samp>
<samp id="numb2">3</samp>
<samp id="answer"></samp>

【讨论】：

【解决方案5】：

你希望它成为一个表格吗？你可能想要这样的东西：

<html>
    <head>
        <script>
            function calc() {
                var leftInput = document.getElementById("left"),
                    left = parseInt(leftInput.value, 10),
                    operatorSelect = document.getElementById("operator"),
                    operator = operatorSelect.options[operatorSelect.selectedIndex].value,
                    rightInput = document.getElementById("right"),
                    right = parseInt(rightInput.value, 10),
                    expression = left + operator + right,
                    resultSpan = document.getElementById("result");
                resultSpan.innerHTML = eval(expression);
                leftInput.value = '';
                rightInput.value = '';
            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" id="left">
            <select id="operator">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" id="right">
            <input type="button" onclick="calc()" value="=">
            <span id="result"></span>
        </form>
    </body>
</html>

【讨论】：