Question

我们假设我有一个HTML表单，有两个文本框，我想在两个文本框中添加两个数字，并在段落中显示结果。我怎么能这样做？

根据文本框更改段落是我找不到的！

Answer 1

很简单：

＆＃13;

document.getElementById('sum').onsubmit = add;

function add(e) {
  e.preventDefault();
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var result = 'Result: ' + String(parseInt(num1) + parseInt(num2));
  var p = document.getElementById('result');
  p.innerHTML = result;
}

＆＃13;

<form id="sum">
  <label for="num1">First number:</label>
  <br />
  <input type="text" id="num1" />
  <br />
  <label for="num1">Second number:</label>
  <br />
  <input type="text" id="num2" />
  <br />
  <input type="submit" value="Add" />
</form>

<p id="result">Result:</p>

＆＃13;

在html中我们有一个带有3个输入的表单，2个是类型文本，一个是类型提交。还有一个段落。

在javascript中我们分配给表单的onsumbit事件函数add（），在函数中我们阻止默认，所以表单不会刷新页面，然后我们得到输入的2个值，创建一个包含这些值之和的字符串，并将段落的innerHTML设置为它。

Answer 2

创建计算器功能，然后您可以在键盘上触发它，或者如果您愿意，可以将其指定给按钮。

function calcTotal(){
  var inputs = document.getElementsByTagName('input'),
      result = 0;
  for(var i=0;i<inputs.length;i++){
    if(parseInt(inputs[i].value))
      result += parseInt(inputs[i].value);
  }
  document.getElementById('total').innerHTML = 'Total: ' + result;
}

<form>
  <input onkeyup="calcTotal()" type="text" />
  <input onkeyup="calcTotal()" type="text" />
</form>

<p id="total"></p>

Answer 3

按照下面的JS代码：

<html>
  <head>
        <title>Sum Two Number</title>
        <script language="javascript">
                function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("value1").value);
                        var val2 = parseInt(document.getElementById("value2").value);

                        if(val1 !== "" && val2 !== "") {
                            var result = val1 + val2;
                            document.getElementById('result').innerHTML = result;  
                        }                       
                }
        </script>
  </head>
  <body>
        value1 = <input type="text" id="value1" name="value1" value="0" onkeyup="javascript:addNumbers()"/>
        value2 = <input type="text" id="value2" name="value2" value="0" onkeyup="javascript:addNumbers()"/>
        <p>Answer = <span id="result"></span></p>
  </body>
</html>

Answer 4

在此示例中，您有一个包含2个输入的表单。当您按下按钮时，这些2输入的值将添加到段落中。

希望得到这个帮助。

＆＃13;

function addInputContentToParagraph() {
  var txtValue1 = document.getElementById('textbox1').value;
  var txtValue2 = document.getElementById('textbox2').value;
  
  document.getElementById('para').innerHTML = txtValue1 + ' ' + txtValue2;
}

＆＃13;

a {
  cursor:pointer;
  border:1px solid #333;
  padding:4px;
  margin:10px;
  display:inline-block;
}

＆＃13;

如何将段落设置为文本框文本

4 个答案: