如何获取用户输入并将其输出到网页上[关闭]答案

【问题标题】：How to get user input and output it onto the web page [closed]如何获取用户输入并将其输出到网页上[关闭]
【发布时间】：2019-07-12 15:13:31
【问题描述】：

我正在尝试创建一个程序，在该程序中我要求用户输入两个数字，然后将这两个数字相加时的值输出到网页（显示类似 1 + 2 = 3 的内容），然后显示这两个数字数字相乘 (1 * 2 = 2)。示例输出应类似于以下内容，但基于从网站用户收到的输入：

1 + 2 = 3

1 * 2 = 2

【问题讨论】：

任何代码？你试过什么？
您应该表明您已经尝试过一些东西，这样我们最终不会为您提供满足您需求的“免费”解决方案。

标签： javascript input output

【解决方案1】：

像这样使用prompt：

var number1 = parseInt(prompt("Enter a number"));
var number2 = parseInt(prompt("Enter another number"));

document.write(`${number1} + ${number2} = ${number1 + number2}<br>${number1} * ${number2} = ${number1 * number2}`);

【讨论】：

【解决方案2】：

您可以使用 input 标签获取输入，使用 .innerHTML 输出到 html

function a() {
  document.getElementById("c").innerHTML = Number(document.getElementById("a").value) + Number(document.getElementById("b").value);
}

<input type="number" id="a" />
<input type="number" id="b" onkeyup="a()" />
<div id="c"></div>

【讨论】：

【解决方案3】：

试试这个

function submit() {
   let test =document.getElementById("text");
   let sum = parseFloat(document.getElementById("firstNumber").value) +parseFloat(document.getElementById("lastNumber").value);
    let mul = parseFloat(document.getElementById("firstNumber").value)  * parseFloat(document.getElementById("lastNumber").value);
   test.innerHTML = document.getElementById("firstNumber").value + ' + ' +document.getElementById("lastNumber").value + " = " +sum +" </br>";
    test.innerHTML += document.getElementById("firstNumber").value + ' * ' +document.getElementById("lastNumber").value + " = " + mul +"\n";
   return true;
}

  First number:<br>
  <input type="number" id="firstNumber" >
  <br>
  Last number:<br>
  <input type="number" id="lastNumber" >
  <br><br>
  <button onclick="return submit();">click</button>


<div id="text"></div>

【讨论】：

【解决方案4】：

这是您的编程水平可能更熟悉的另一种方法，在这种情况下，我们使用输入字段而不是提示。

<!DOCTYPE html>
<html>
 <head>
  <script>
    function calc(){
    var num1 = document.getElementById("in1").value;
    var num2 = document.getElementById("in2").value;
    document.getElementsByTagName("p")[0].innerHTML = num1 + "+" + num2 + "=" + (parseInt(num1) + parseInt(num2));
  }
  </script>
 </head>
 <body>

  <input id="in1" type="number"/>
  <input id="in2" type="number"/>

  <button onclick="calc()">Calculate</button>
  <p></p>
 </body>
</html>

【讨论】：

【解决方案5】：

由于没有说明我想假设，因此您在询问用户访问页面时的数字，并且我通过提示请求接收这些输入...

<script>

function init(){
  var input1 = prompt("Please enter the first Number", "First Number");
  var input2 = prompt("Please enter the second Number", "Second Number");

   if (input1 != null && input2 != null) {

     sum = parseInt(input1) + parseInt(input2); 
     str1 = input1 + " + " + input2 + " = " + sum;

     multi = parseInt(input1) * parseInt(input2);
     str2 = input1 + " * " + input2 + " = " + multi;

     document.getElementById("message").innerHTML = str1 + "<br/>" + str2;

    }else{
       alert('...error message');
    }

   }  //end of function...

</script>


<body onload="init()">
  ......    
  <div id="message"></div>
</body>

应该可以正常工作...

【讨论】：