How do I make a button in HTML work with JavaScript?

[MuzzammilJokhio]

Question:
HOW DO I MAKE A BUTTON IN HTML WORK USING JAVA


Repl link:
https://puketapa.muzzammiljokhio.repl.co/

``` code snippet ```

[NateDhaliwal]

Hi there @MuzzammilJokhio , welcome to the forums!
You probably mean JavaScript, not Java, as JavaScript is used for webdev. Please note that Java and JS are 2 completely different languages.

[NateDhaliwal]

As for using buttons, do you mean you want something to happen after pressing them?
I suggest using Python with Flask to interact with the buttons.

[SalladShooter]

Hey @MuzzammilJokhio welcome to the forums!

Like NateDhaliwal said JavaScript (JS) and Java are two different languages. JavaScript can be used for web development (such as websites), Java can be used to create web apps (such as games). Here is some code to show how to use JS to add functionality to buttons:

<!-- HTML -->
<button onclick=“myFunction()”>Click Me</button>

<!-- JavaScript -->
<script>
  function myFunction() {
    alert("I am an alert box!");
  }
</script>

This is just an example and doesn’t have to be used every time. I would suggest reading this onclick Event from W3Schools to learn about how to add functionality to buttons. You can also read about JS here JavaScript Tutorial from W3Schools.

[SalladShooter]

@NateDhaliwal you can use JS to do stuff after, it’s also good to learn JS for websites because you can learn Express and Node which are good for websites and nowadays people who program websites use JS. You can use document.getElementById(“id”).innerHTML = “new text”;

[QwertyQwerty88]

@NateDhaliwal

I suggest using Python with Flask to interact with the buttons.

Please don’t. Python Flask is so useless when it comes to doing anything after a button click…

---

@SalladShooter

<!-- HTML -->
<button onclick=“myFunction()”>Click Me</button>

<!-- JavaScript -->
<script>
  function myFunction() {
    alert("I am an alert box!");
  }
</script>

It’s better to use event listeners

<button id="button">Click me</button>

<script>
  document.getElementById("button").addEventListener("click", () => {
    alert("I am an alert box!");
  });
</script>

[SnakeyKing]

@QwertyQwerty88

It’s better to use event listeners

Why??

---

@MuzzammilJokhio You can do this:

<button onclick="alert('Hello World!')">Click Me!</button>

[PrestonCurtis1]

there is a shorter way to do it

id.innerHTML = "new text"

[lolguineapig]

You can read through this page to understand how to make buttons function using the onclick attribute and Javascript. It teaches you the basics of Javascript functionality for buttons. Is there any specific thing you want the button to do?

[OmegaOrbitals]

@SalladShooter

document.getElementById(“id”).innerHTML = “new text”

That code won’t work. You need to store the element in a variable, then edit the variable’s properties.

[SnakeByte]

@SalladShooter

document.getElementById(“id”).innerHTML = “new text”

@OmegaOrbitals

That code won’t work.

AFAIK, it works. I’ve done it many times like that even though many tutorials I follow put the element into a variable first then declare it like variable.innerHTML.

[python660]

a variable is just a pointer to the object. SalladShooter is basically using the direct object instead of the reference to the object.

[OmegaOrbitals]

That’s weird, it doesn’t work for me.

[SalladShooter]

@OmegaOrbitals you have to add a semicolon ;. Can you show your full code to see why it doesn’t work?

[Firepup650]

@SalladShooter

you have to add a semicolon ;

Not technically, JS doesn’t generally require that (Unless you’re one lining stuff).