How do I make html run a javascript function when a user clicks a button?

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. e.g. 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.

It's as important to know how to debug as it is to know the syntax and model of the language/technology. I recommend opening your page in Chrome and hitting the "F12" button to see the web inspector console. It'll open up a whole new world. Click on the "console" menu item and click the button - it'll tell you what the problem is. — kermit
– kermit, Commented Feb 2, 2019 at 3:52

Jack Bashford · Accepted Answer · 2019-02-02 03:46:25Z

3

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"]');

answered Feb 2, 2019 at 3:46

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jerry D · Accepted Answer · 2019-03-08 16:12:29Z

0

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.

edited Mar 8, 2019 at 16:12

answered Feb 2, 2019 at 3:54

Jerry D

39111 silver badges27 bronze badges

Collectives™ on Stack Overflow

How do I make html run a javascript function when a user clicks a button?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related