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

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

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

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related