如何从javascript表单获取用户输入?

5 html javascript

所以我的问题很简单。

如何从表单中获取用户输入并将其放入变量中?

我正在努力完成这项简单的任务,并希望得到一些帮助。

这是我的代码:

html:

<body>
        <form>
            <input type="text" id="input_id" value="">
            <input type="submit" value="Submit">
            <div id="alert" style="color: red"></div>
        </form>
    </body>
Run Code Online (Sandbox Code Playgroud)

Javascript

    var a = document.getElementById('input_id').value;

function wawa() {
    return a;
}
document.getElementById('alert').innerHTML = "user entered this value: " + " " + a;
Run Code Online (Sandbox Code Playgroud)

我想用 vanilla JS 而没有库来做到这一点。

谢谢。

Iva*_*n86 4

您不需要函数外部的变量。您所需要的只是 abutton和 an onclick event。调用onclick event一个函数来检查输入并写入<div>.

function wawa() {
  var variable = document.getElementById('input_id').value;
  document.getElementById('alert').innerHTML = 'The user input is: ' + variable;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <form>
    <input type="text" id="input_id" value="">
    <input type="button" value="Submit" onclick="wawa()" />
    <div id="alert" style="color: red"></div>
  </form>
</body>
Run Code Online (Sandbox Code Playgroud)