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
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 MatthewProSkilsMatthewProSkils 3801 gold badge3 silver badges15 bronze badges 2- 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
7 Answers
Reset to default 1let 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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745076679a4609876.html
评论列表（0条）