javascript - How do you put an onclick on a js button - Stack Overflow

admin2025-04-19 0

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

Share Improve this question asked May 31, 2020 at 14:07 MatthewProSkils 3801 gold badge3 silver badges15 bronze badges

You can bind click event listener to the button and add your logic in the click handler. – Prateek Kumar Dalbehera Commented May 31, 2020 at 14:12
Please be specific on StackOverflow , so that other can understand, provide some code so that others can visualize your problem. – Jadli Commented May 31, 2020 at 14:13

Add a ment |

7 Answers 7

Sorted by: Reset to default 1

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);

It is as simple as below:

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

function getData(){
// your logic  

}

<!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..');
});

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

function getData(){
--write here

}

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./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>

<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>

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:

More information:

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745076681a283609.html

javascriptHow do you put an onclick on a js buttonStack Overflow

最新回复(0)