Question

我已经为HTML文档明确定义了Javascript文件。在我的HTML中，我创建了一个文本框，用户可以在其中输入名称，然后单击名为“提交”的按钮。

在JS中，只要他们单击“提交”，我想将他们输入的名称存储在变量中（我使用eventListener知道他们何时单击“提交”）。我的问题是，如何在不使用HTML文档中使用onclick的情况下做到这一点？这是我目前的以下代码：

my_button.addEventListener('click', my_function);

function my_function(){
   alert("Hello world!"); 
}

Answer 1

一种方法是使用oninput事件，并且每次用户键入内容时，都会更新要在其中存储输入的变量。输入标签看起来像这样：<input type="text" oninput="myFunction()">，在声明为处理程序的函数中，您可以获取输入并存储在所需的任何位置。

Answer 2

您可以将代码分开。在HTML文档中，您要做的就是加载javascript文件。

这是一个片段。首先是javascript文件的内容，然后在简化的HTML文档下面。

let myButton = document.getElementById("theButton");
myButton.addEventListener('click', my_function);

function my_function(){
   alert("Hello world!"); 
}

<button id="theButton">Test</button>

Answer 3

要添加单独的javascript文件，请在html中的任意位置执行

<script type='text/javascript' src = 'path/filename' > </script>

Answer 4

要获取输入的值，首先需要选择它。然后通过value属性获得值。

请参见以下示例：

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input id="my_input" type="text">
<button id="my_btn">click</button>
</body>
</html>

然后您可以使用以下javascript。

var my_button = document.querySelector('#my_btn');

    var my_input = document.querySelector('#my_input');
    var value;


    my_button.addEventListener('click',function () {
      value = my_input.value;
      alert(value);
    })

希望这会有所帮助！

Javascript：接受用户输入

4 个答案: