如何将输入数据视为变量？ [复制]答案

【问题标题】：How to treat input data as variables? [duplicate]如何将输入数据视为变量？ [复制]
【发布时间】：2019-02-13 12:16:55
【问题描述】：

如何使用例如<input> 在 HTML 中输入数据，然后对其进行解释？我的意思是，我想为 exaplme 输入年龄并将其视为变量，以便稍后在脚本中构建年龄函数。

【问题讨论】：

对输入使用javascript onChange回调并获取输入的值
你不能在stackoverflow中问这种类型的问题，你必须搜索你的问题，尝试解决方案，如果你对选择的解决方案有问题，你可以询问它。
可以对 StackOverflow 上的许多问题进行研究。这通常是一个复杂的问题。如果您是编码新手并且您没有任何想法，那么您可能会被这个网站所吸引，因为当您搜索任何与编码相关的内容时它会弹出。我认为如果 OP 学到了一些东西，那就太棒了。

【解决方案1】：

您只需要使用 javascript 获取 <input> 值。例如：

<input type="text" id="age" />

在 javascript 中：

var x = document.getElementById("age");
var age = x.value;

现在您可以将年龄视为变量

【讨论】：

【解决方案2】：

如果你不想使用 jQuery，那么你可以使用 JavaScript 的 getElementById 函数。一个例子：

HTML：

<input id="someInputField" type="text" name="someInput">

JavaScript：

var inputValue = document.getElementById("someInputField").value;

您还可以使用getElementByName 方法按名称获取值。

【讨论】：

【解决方案3】：

首先，您需要从 DOM 中选择它。

const inputField = document.querySelector('#my-input');

然后你可以用inputField.value查看其中的当前值

【讨论】：

【解决方案4】：

据我了解，您关心的是使用 HTML 元素（例如标签和跨度）进行用户输入。虽然您总是可以按照您想要的方式设置表单元素的样式，但要实现这一点，您可以使用 HTML 的 contenteditable 属性：

 <span contenteditable="true" id="input">This is an editable paragraph.</span>

在 JavaScript 端，您可以使用 jquery 轻松检测 onChange 事件并调用函数进行操作：

$('#input').on('change', function(){ 
    alert($(this).val() ); 
    // or any other operation you'd want to perform
});

【讨论】：