Question

如何获取用户输入HTML表单的数字并将其另存为可在整个javascript文档中使用的javascript变量？

例如，用户输入“ 8”，然后按Enter，然后将其记录为一个名为“输入”的变量，任何后续的javascript都可以使用该变量：

// How to get input value entered from user?

var triple = input*3

console.log(triple);

Answer 1

您的问题有点令人困惑，但是基于我对您问题的理解-

如果您想读取HTML文本中输入的值，请在下面的Java脚本代码中使用-

         <html>
         <body>
         <script language="javascript" >

          function click_me()
          {
             var x=document.getElementById("numberInput").value;
             alert(x);
           }

        </script>

         Enter a number <input type="text" id="numberInput">
         <button onclick="click_me()">Click me</button>
         </form>
         </body>
         </html>

Answer 2

要通过HTML输入字段获取输入，可以执行以下操作：

var triple;

document.getElementById('input').addEventListener('keyup', event => {
  
  // When user presses the enter key, then we update triple based on the 
  // current value of the input
  if(event.keyCode === 13) {
    
    triple = parseInt(event.currentTarget.value) * 3;
    console.log(triple)
  }
});

<input id="input" />

在这里，事件监听器已向input元素注册，以检测keyup事件。当用户按下Enter键（即event.keyCode === 13）时，triple变量将根据用户输入到该输入中的值进行更新。

Answer 3

如果要创建全局变量，则可以使用var来创建。 MSDN将var的范围定义为“用var声明的变量的范围是其当前执行上下文，它是封装函数，或者对于在任何函数之外声明的变量，它是全局函数。如果重新声明JavaScript变量，它将不会失去其价值。”

您要做的就是在任何函数或对象块外部声明变量输入。这是我的JSFiddle

var globalVar = 5; //global variable
var f1 = function() {
	var inpt = document.getElementById('myInput');
  console.log('input value = ' + inpt.value);
  console.log('globalVar value inside f1 = ' + globalVar);
}
f1(); //function call

var f2 = function() {
	globalVar = globalVar + 1;
	console.log('globalVar value inside f2 = ' + globalVar);
}
f2(); //function call

<input value="10" id="myInput">

Answer 4

一种简单的方法可以通过prompt()方法来实现所需的功能。这将导致浏览器显示一个简单的输入对话框，您可以从中获取用户输入并将其存储在input变量中，如下所示：

var input = prompt(); // This causes a input dialog to be display. If the user clicks ok, 
                      // then the result of prompt() is the value entered by the user
var triple = input * 3;

console.log(triple);

Answer 5

只需在JavaScript代码顶部添加提示以创建骗局：

const input = parseInt(prompt("Enter a number: "));

现在您可以做任何您想做的事情：

const input = parseInt(prompt("Enter a number: "));
var triple = input * 3;
console.log(triple);

Answer 6

您可以通过多种方式在javascript中获取用户输入。

使用prompt()。提示是一项功能，可让您打开一个对话框，从中可以输入文本，数字等。作为参数输入的文本将充当弹出警报的标题。

以下面的代码段为例：

let input = prompt("Enter a number:"); // Input in string format
let triple = input * 3; // Convert string to integer by using * operation
console.log(triple);

检索用户输入的另一种方法是通过HTML输入元素。您可以使用多种不同类型的输入元素，例如密码，数字，日期，文本等。对于您的问题，您希望使用number输入。您可以像在HTML中那样创建数字输入：

<input type="number" id="number" value="0" />

此处type属性指定我们将输入数字作为输入。 id属性为我们提供了一种在javascript中刷新此输入元素的方法，因此我们稍后可以检索输入到其中的数字。 value属性是一个可选属性，用于指定输入框的默认值。

使用输入框时，您需要指定javascript应在何时检查输入框的值。您可以通过添加事件监听器来做到这一点，以便您的javascript在用户每次输入数字时都会运行一段代码。这是向数字输入框中添加事件侦听器，以触发其中的数字更改的示例：

document.getElementById('number').addEventListener('keyup', function(e) {/* do code */});

在上一行，我们通过其ID（number）引用输入框，并向其添加输入事件监听器。

使用此事件侦听器，我们可以在函数内部使用this关键字来引用输入框本身。这使我们可以执行this.value来获取输入数字的值。在这里，我还使用e.keyCode来检测按下了哪个键。如果keyCode等于13（ ENTER ），则该代码将记录结果，否则（否则）将不执行任何操作。

请参见下面的工作示例：

document.getElementById('number').addEventListener('keyup', function(e) {
  if(e.keyCode == 13) { // Check if enter key pressed
      let triple = this.value * 3; // Get value of text box using this.value
      console.log(triple);  
  }
});

<input type="number" id="number" value="0" />

如何将来自DOM的用户输入存储在Javascript变量中？

6 个答案: