How to hide Button in Javascript? - javascript

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>

Related

HTML text not changing when button pressed

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>

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

How to create a button that will change background color

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>

When clicking on button like showcaps,small,number no change is happening to the div in html, visibility not working

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

Trying to make basic tabs

Alright, so I have two buttons. My goal is to make the page so that when one button is clicked, it will display a paragraph, and when another is clicked it will close the other tab and display another paragraph. I thought this would be pretty simple, but getting one tab to close when the other is clicked has proved difficult.
function btn1Event(){
var text1 = document.getElementById("btn1Text");
var text2 = document.getElementById("btn2Text");
if(text2.style.display == "inline" || text1.style.display == "none"){
text1.style.display = "inline";
}
}
function btn2Event(){
var text1 = document.getElementById("btn1Text");
var text2 = document.getElementById("btn2Text");
if(text1.style.display == "inline" || text2.style.display == "none"){
text2.style.display = "inline";
}
}
Not exactly sure why this isn't working. Any help is appreciated!
Here is a solution using jQuery if that is an option:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<input type=button id="btn1" value="Show Div1">
<input type=button id="btn2" value="Show Div2">
<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function() {
$("#btn1Text").show();
$("#btn2Text").hide();
});
$("#btn2").click(function() {
$("#btn1Text").hide();
$("#btn2Text").show();
});
});
</script>
And the non jQuery approach:
<input type=button id="btn1" value="Show Div1" onclick="btn1Event();">
<input type=button id="btn2" value="Show Div2" onclick="btn2Event();">
<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>
<script type="text/javascript">
function btn1Event(){
document.getElementById("btn1Text").style.display = "inline";
document.getElementById("btn2Text").style.display = "none";
}
function btn2Event(){
document.getElementById("btn1Text").style.display = "none";
document.getElementById("btn2Text").style.display = "inline";
}
</script>
All you are doing is setting the textbox display to inline. If you never set the display to none at any time, how do you expect any of the tabs to be hidden.
function btn1Event(){
document.getElementById("btn1Text").style.display = "inline";
document.getElementById("btn2Text").style.display = "none";
}
function btn2Event(){
document.getElementById("btn1Text").style.display = "none";
document.getElementById("btn2Text").style.display = "inline";
}

Categories

Resources