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

Question

I have a web form where users will type in a name of a person then click a button to open a page about that person. eg They type Player One and it runs a function which opens the file C:\\PlayerOne.

I've tried using the <button> tag and adding the onclick element to run the function, but I was unable to diagnose the problem there either. The Event Listener stuff I am not too familiar with, but I saw it [here] ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button ) so I thought I'd try it that way instead.

<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>  

I want the user to be able to type the name and open the appropriate file, as explained above. However, the button at this point simply does nothing. I do have a test file for it to reference, which I have been typing the name of in the fields of the form.

Answer 1

It's because there's no button tags in your form. Use the attribute selector like so instead:

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

Answer 2

Here is an example of similar code by me involving a button triggering a function

The button:

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

The script:

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

In my example, the button is used to show/hide a div. Clicking my button triggers the function which changes the div visibility.