当用户点击按钮时，如何让html运行javascript函数？

Question

我有一个Web表单，用户可以在其中键入一个人的姓名，然后单击一个按钮打开一个关于该人的页面。例如他们输入Player One并运行一个打开文件C：\ PlayerOne的函数。

我已经尝试使用<button>标签并添加onclick元素来运行该功能，但我也无法在那里诊断问题。事件监听器的东西我不太熟悉，但我看到它[这里]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button）所以我想我会这样尝试。

<form>
  <fieldset>
    <legend>Enter player name: </legend>
    First name:<br>
    <input type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br><br>
    <input type="button" value="Submit">
  </fieldset>

  <script>
    const input = document.querySelector('button');
    input.addEventListener('click', UseData);
    function UseData()
        {
        var Fname=document.GetElementById('firstname');
        var Lname=document.GetElementById('lastname');
        window.location = "C:\" + Fname + Lname;
        }
  </script>
</form>  

我希望用户能够键入名称并打开相应的文件，如上所述。但是，此时的按钮根本不起作用。我有一个测试文件供它参考，我一直在表单的字段中键入名称。

Answer 1

这是因为你的表格中没有button标签。改为使用属性选择器：

const input = document.querySelector('input[type="button"]');

Answer 2

这是我的类似代码的示例，涉及触发函数的按钮

按钮：

 <button onclick="theFunction()">sampletext</button>

剧本：

    var x = document.getElementById("sampleElement");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

在我的示例中，该按钮用于显示/隐藏div。单击我的按钮会触发更改div可见性的功能。