How do I make my button do something with javascript

Question

I am 16 and I am pretty new to Web Development. I have been writing a bunch of programs for practice and I got stuck on this one.

I made buttons in html with input tags. So now I want to make those buttons do something in a javascript function, and nothing has worked out for me.

I'd really appreciate some sample code that I can learn from.

My html and javascript looks like this:

           function selectPrize() {
           var butn1 = document.getElementById.onclick();

           if (butn1) {

               alert("You won a new Car");

           }


        }

<input type="button" id="btn1" value="ClickMe" onclick="selectPrize()">

please share your code

brk
– brk

2020-06-14 09:56:49 +00:00
Commented Jun 14, 2020 at 9:56 — brk
– brk, Commented Jun 14, 2020 at 9:56

Ogie · Accepted Answer · 2020-06-14 10:06:46Z

1

Create a function

<script>
  function doSomething() {
   alert('Did something');
 }
</script>

Call the function when an event occurs on your button (in this case click event)

<input type="button" onclick="doSomething()" value="Do Something" />

answered Jun 14, 2020 at 10:06

Ogie

1,3322 gold badges14 silver badges18 bronze badges

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

3 Comments

Danny Kruger Over a year ago

Thank you this worked. Is there a way I can add if-else conditions to check if the button was clicked.

Ogie Over a year ago

The function will only be called if the click event is triggered on the button so you might not need the if-else to check for that. Maybe if you shed more light on what you are trying to do, I can give you suggestions?

Danny Kruger Over a year ago

I got it working now. Thanks for this, I should probably take a break though, Been 5 hours in front of the computer now.

420root · Accepted Answer · 2020-06-14 10:11:43Z

0

Simple example.
Actually just edited and added some little functionality to stimulate your imagination on what could you do.

var flag = 1;

function myFunction() {
  if (flag === 1) {
    document.getElementById("demo").innerHTML = "Paragraph changed!";
    flag=-1;
  } else {
  document.getElementById("demo").innerHTML = "No result... again";
    flag=1;
  }
}

.box {
  display: block;
}

.button {
  background-color: #fff;
  border: 1px solid #dbdbdb
}

.button:hover {
  background-color: #dbdbdb;
  border: 1px solid #f0f
}

<div class="box">
  <h3> Example execute javascript on button click </h3>
  <div class="elements">
    <button class="button" onclick="myFunction()">Click me</button>
    <p id="demo">No result</p>
  </div>
</div>

edited Jun 14, 2020 at 10:11

answered Jun 14, 2020 at 10:01

420root

437 bronze badges

Collectives™ on Stack Overflow

How do I make my button do something with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related