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
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.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>
<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.com/jsref/event_onclick.asp
Related
I am trying to make text change to different text when a button is pressed and I'm not sure why it's not working.
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerHTML = "B";
}
</script>
Use innerText insteadof innerHTML like this:
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerText = "B";
}
</script>
const button = document.querySelector('.test__button');
button.addEventListener("click", test)
function test() {
document.getElementById("test").innerHTML = "B";
}
<p id="test"> A </p>
<button class="test__button"> Click </button>
I want to start checking if you click on an image, but only after you click on a button.
Before the button is clicked, nothing should happen when you click on the image.
This is my code:
<body>
<div class="wrap" id="myImgId">
{{-- <div class="draggable"></div> --}}
</div>
<button class="btn btn-primary" onclick="buttonClicked()">Click me</button>
<script type="text/javascript">
function buttonClicked(){
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
};
</script>
</body>
How do I do this?
You can declare a variable with false value as flag, clicking on button you can set that to true which you can check when the image is clicked.
Demo:
let clikedButton = false;
function buttonClicked(){
clikedButton = true;
var myImg = document.getElementById("myImgId");
//myImg.onmousedown = GetCoordinates;
};
document.querySelector('#myImgId').addEventListener('click', function(){
if(clikedButton) {
alert('clicked after the button');
clikedButton = false;
}
});
<div class="wrap" id="myImgId">
Some Image
</div>
<button class="btn btn-primary" onclick="buttonClicked()">Click me</button>
I need help coding in HTML. I have tried many different ways of coding this button. The button is on the webpage now but will not change the background color of the web page.
<html>
<body>
<button type="button" onclick="myFunction()"> Blue</button>
<script>
function myFunction(){
document.getElementByld("background").sytlecolor="blue";
</script>
</body>
</html>
I would recommend you to go through Javascript DOM and HTML
function myFunction(){
document.getElementsByTagName("body")[0].style.background="blue";
}
<html>
<body>
<button type="button" onclick="myFunction()"> Blue</button>
</body>
</html>
Try this:
var isBlue = false;
document.querySelector("button").addEventListener("click", function(){
if(isPurple){
document.body.style.background= "white";
}
else{
document.body.style.background= "blue";
}
isBlue = !isBlue
})
This will not only change the background colour but will create a button that toggles it.
Try this
<body>
<button type="button" onclick="myFunction()">Click to change color</button>
<script>
function myFunction(){
document.body.style.background = "aqua";
}
</script>
</body>
</html>```
background is not a document object. It is an html dom object.
Add this line in HTML Body
<a onclick="changecolor('navy')" id="navy">#0E2A36</a>
You can add customize color in CSS like
#navy{
background:#0E2A36;
}
Then add JavaScript
<script type="text/javascript">
function changecolor(id) {
document.body.style.background = document.getElementById(id).innerHTML;
}
</script>
There are few spelling mistakes but this should explain
1.make the element a variable.
2. set that variable with .style.background = "blue"
spelling mistakes:
sytle = style
getElementByld = getElementById
<html>
<body>
<div id="background">
<button type="button" onclick="myFunction()">Blue</button>
</div>
<script>
function myFunction() {
//get the element
const background = document.getElementById("background");
// set it to blue
background.style.background = "blue";
}
</script>
</body>
</html>
hope this helps.
You have two errors here:
You are selecting an element by id, but that element doesn't exists on your html.
Your javascript have a sintax error. (Missing closing brackets on your function.
You are using the property sytlecolor that doesn't exists (there's a typo on style, and even this way, stylecolor doesn't exists. Use style.backgroundColor instead.
Here's a working example:
<html>
<body id="background">
<button type="button" onclick="myFunction()"> Blue</button>
<script>
function myFunction(){
document.getElementByld("background").style.backgroundColor = "blue";
}
</script>
</body>
</html>
Also if you want to change the body background color, you don't need to put an id on it:
<html>
<body>
<button type="button" onclick="myFunction()"> Blue</button>
<script>
function myFunction(){
document.body.style.backgroundColor = "blue";
}
</script>
</body>
</html>
I'll go with
//On top goes the head
<button type="button">Blue</button>
And then I would create a JS file
var button=document.querySelector('button'),
body =document.querySelector('body');
button.addEventListener('click',function(){
body.style.backgroundColor="blue";
});
That should turn the background blue.
Add id of the specific element whose background you want to change
document.getElementsByTagName('body')[0].style.background='green'
<html>
<body>
<button type="button"
onclick="document.getElementsByTagName('body')[0].style.background='green'">
Click for green backgournd
</button>
<br />
<br /><br />
Another way to do from text box Just for your reference
<br />
<input style="width:100%" type="text" id="txtColorBox" placeholder="enter color name and click button"/>
<br/>
<button type="button"
onclick="document.getElementsByTagName('body')[0].style.background=document.getElementById('txtColorBox').value">
Click for green backgournd
</button>
</body>
</html>
Try this in your function
function myFunction(){
document.body.style.background = "blue";
}
There are two methods to this with vanilla javascript and the second is jQuery.
In your case, you are not using jQuery. So the solution is vanilla javascript.
function myFunction(element) {
element.style.backgroundColor="green";
}
<button type="button" onclick="myFunction()"> Blue</button> //Change web bg
if you need to change the button background. Pass the current pointer.
<button type="button" onclick="myFunction(this)"> Blue</button> //Change buttion bg
bg => background
Hi you could do something like so:
document.getElementById('buttonColor').addEventListener('click', () =>
document.body.style.backgroundColor = "blue"
);
<html>
<body>
<button id="buttonColor">Change Color</button>
</body>
</html>
I'm trying to make a button that shows text and another that removes it, this is what I have done so far.
When i click the Click me! button text shows, but it won't disappear when i click the hide button and i don't know why.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
</script>
2 issues in your code
<button type="button" onclick="myFunctionHide">Hide</button>
should be
<button type="button" onclick="myFunctionHide()">Hide</button>
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
should be
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
style is property of the element and not the innerHTML.object
Also it is a better idea to avoid inline event handlers, which keeps your HTML cleaner also adhering to separation of concerns which makes your code more maintainable.
HTML
<div class="butt">
<button type="button" id="btn_click">Click Me!</button>
<button type="button" id="btn_hide">Hide</button>
</div>
<p id="test"></p>
JS
var elemTest = document.getElementById('test');
document.getElementById('btn_click').addEventListener('click', function () {
elemTest.innerHTML = "Andyduly";
});
document.getElementById('btn_hide').addEventListener('click', function () {
elemTest.style.display = "none";
});
You can encase your whole code inside a single script tag.
Check Fiddle
See this fiddle
To hide an element using Javscript, try something like
document.getElementById('test').style.display = 'none';
So replace your <script> as below
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").style.display = 'none';
}
</script>
There are many errors in your Javascript and HTML
Edited Javascript
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
You forgot to add () to your myFunctionHide in your Javascript.
Also, the edited HTML would be
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
Well, first of all you syntax doesn't look right, should be
function myFunctionHide() {
document.getElementById('test').style.display = 'none';
}
Try this one, I'm clearing the text from "test" P tag.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").innerHTML = "";
}
</script>
stack.html:
when clicking on the button show caps,show small,show number nothing will happening,showcaps only dispaly kcaps div but now it display all the divs.iam expecting a result such that showcaps only display the kcaps div,similarly showsmall displays ksmall,shownumber displays knumber.The java script file(ext.js) should be an external file,that must be kept separate.
<html>
<head>
<script src="ext.js"></script>
</head>
<body>
<!--Caps Div-->
<div class="bttn1" id="kcaps">
<button class="CSSButton" id="A">A</button>
</div>
<div class="bttn2" id="ksmall">
<button class="CSSButton" id="a">a</button>
</div>
<div class="bttn3" id="knumber">
<button class="CSSButton" id="0">0</button>
</div>
<button type="button" id="ckey"/> Show caps </button>
<button type="button" id="skey"/> Show small </button>
<button type="button" id="nkey"/> Show number </button>
</body>
</html>
ext.js:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('ckey').addEventListener('click', showElem);
document.getElementById('skey').addEventListener('click', showElem2);
document.getElementById('nkey').addEventListener('click', showElem3);
});
function showElem(e)
{
document.getElementById('kcaps').style.visibility. = "visible";
document.getElementById('ksmall').style.visibility = "hidden";
document.getElementById('knumber').style.visibility = "hidden";
}
function showElem2(e)
{
document.getElementById("kcaps").style.visibility="hidden";
document.getElementById("ksmall").style.visibility="visible";
document.getElementById("knumber").style.visibility="hidden";
}
function showElem3(e)
{
document.getElementById("kcaps").style.visibility="hidden";
document.getElementById("ksmall").style.visibility="hidden";
document.getElementById("knumber").style.visibility="visible";
}
You're using wrong id:-
In your html the if of the buttons are ckey, skey, nkey
and in the javascript file you've written:-
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('ckeys').addEventListener('click', showElem);
document.getElementById('skeys').addEventListener('click', showElem2);
document.getElementById('nkeys').addEventListener('click', showElem3);
});
You should write:- ckey instead of ckeys and so on.
And remove the extra . in showElem function
function showElem(e)
{
document.getElementById('kcaps').style.visibility.(* extra dot should be removed) = "visible";