CODEWITHSUNDEEP
javascripthtml
MatthewProSkils
MatthewProSkils

Reputation: 380

How do you put an onclick on a js button

I have some js created buttons from GeeksforGeeks, but I don't know how to put on click on the buttons. I can create a button using the code I found online, but there was no explanation on how to make that button have on click function

Upvotes: 1

Views: 6032

Answers (7)

ashkan
ashkan

Reputation: 580

<button id="submit" value="Submit" onclick="getData();">Submit</button>

function getData(){
--write here

}

Upvotes: 1

Hamid
Hamid

Reputation: 249

<!DOCTYPE html>
<html>
    <body>
        <button id="btnDemo">On-click Demo</button>
    </body>
</html>

java script Code : 

var btn = document.getElementById('btnDemo');
btn.onClick = function(){
  alert('button is clicked..');
}

Jquery Code :

var btn = $('#btnDemo');
btn.click(function(){
  alert('button is clicked..');
});

Upvotes: 1

Gopinath
Gopinath

Reputation: 4957

The onclick="java_script_function()" attribute can be used for handling click event on a button.

Here is a working example:

<!DOCTYPE html>
<html>
    <body>
        <button onclick="clickDemo()">On-click Demo</button>
        <hr>
        <span id="result"></span>
        <script>
            function clickDemo() {
                document.getElementById("result").innerHTML = "Button was clicked";
            }
        </script>
    </body>
</html>

Output:

enter image description here

More information:

https://www.w3schools.com/jsref/event_onclick.asp

Upvotes: 0

Gurami Nikolaishvili
Gurami Nikolaishvili

Reputation: 182

<body>

    <script>

        var button = document.createElement('BUTTON');
        button.setAttribute('id','btn');
        document.body.appendChild(button);

        var buttonById = document.getElementById('btn');
        buttonById.textContent = 'button is not clicked';

        buttonById.addEventListener('click',buttonClickFuntion);

        function buttonClickFuntion() {
            buttonById.textContent = 'button clicked';
        }

    </script>

</body>

Upvotes: 0

Sankalp Bhamare
Sankalp Bhamare

Reputation: 553

let btn = document.createElement("button"); 
btn.innerHTML = 'hello';
btn.addEventListener('click',function(){
  console.log('click clock!');
});
document.body.appendChild(btn);

This is how you should implement. btn.addEventListener('click',funcName);

ex.

function onClick(){
   //Your Code..
}
btn.addEventListener('click',onClick);

Upvotes: 1

Atul Rajput
Atul Rajput

Reputation: 4178

You can do it with JS and jQuery both, check both the solutions.

For JS use onlick on button , with jQuery use .click function

function runMe(){
 alert('I am executed with Pure JS');
}

$('document').ready(function(){
  $('#jQueryBubmit').click(function(){
    alert('I am executed with jQuery');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="submit" value="Submit" onclick="runMe();">Submit</button>

<button id="jQueryBubmit" value="Submit">Submit with jQuery</button>

Upvotes: 0

Harmandeep Singh Kalsi
Harmandeep Singh Kalsi

Reputation: 3345

It is as simple as below: 

<button id="submit" value="Submit" onclick="getData();">Submit</button>

function getData(){
// your logic  

}

Upvotes: 1

Related Questions