The idea is to make two div appear or disappear based on the click. The CSS display style is set to none.
Any help is appreciated.
<div id="mainOval">
<form id="btns">
<input type="button" value="Timer" id="timerBtn" onclick="displayCont('Timer')"/>
<input type="button" value="Countdown" id="ctDownBtn" onclick="displayCont('Countdown')"/>
</form>
</div>
<div id="Timer">
</div>
<div id="Countdown">
</div>
<script type="text/javascript">
function displayCont(inp)
{
var ele = document.getElementById(inp);
var shown = ele.style.display;
if (shown == 'none')
{
ele.style.display = 'block';
}
else if (shown == 'block')
{
ele.style.display = 'none';
}
}
</script>
The correct code is:
if (shown == 'none') {
ele.style.display = 'block';
}
else if (shown == 'block'){
ele.style.display = 'none';
}
You have ot set the style of the element, not just assign a Javascript variable. And equality is ==, not = =.
Related
I created a JS Script that change the background of my side menu by clicking a button but it doesn't change anything
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function toggle_visibility() {
var e = document.getElementById('on');
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
var f = document.getElementById('off');
if(f.style.display =='block')
f.style.display = 'none';
else
f.style.display = 'block';
var g = document.getElementById('sidenav');
if(g.style.background == '#F5F5F5') {
g.style.background = '#252525';
}
if(g.style.background == '#252525') {
g.style.background = '#F5F5F5';
}
}
</script>
</head>
<body id='body'>
<div id="sidenav" style="background: #F5F5F5">
<div class="btn-area" onclick="toggleNav()">☰</div>
<ul>
<div class="button">
<button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
<span id="on">Turn Off the lights</span>
<span id="off" style="display: none">Turn On the lights</span>
</button>
</div>
</ul>
</div>
</body>
</html>
I expected it to change my background to the id='sidenav' but it didn't change anything...
I would appreciate if someone helps me
uwu
So you can accomplish this by a little modification to your styles and the JS. Just use g.classList.toggle('lights-on'). Creating classes is better than inline styles as well. Make sure you give the sidenav the starting class of lights-on.
Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function toggle_visibility() {
var e = document.getElementById('on');
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
var f = document.getElementById('off');
if(f.style.display =='block')
f.style.display = 'none';
else
f.style.display = 'block';
var g = document.getElementById('sidenav');
g.classList.toggle('lights-off'); //<--- here is the toggle instead of your ifs
}
</script>
</head>
<body id='body'>
<div id="sidenav" class="lights-on"> <!-- make sure you add this class -->
<div class="btn-area" onclick="toggleNav()">☰</div>
<ul>
<div class="button">
<button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
<span id="on">Turn Off the lights</span>
<span id="off" style="display: none">Turn On the lights</span>
</button>
</div>
</ul>
</div>
</body>
</html>
and your stylesheet should be something like this:
.lights-on {
background-color: #f5f5f5;
}
.lights-off {
background-color: #252525;
}
as a side note I would suggest using consistent naming for your methods so toggle_visibility() should be toggleVisibility().
The problem is this if-statement inside the toggle_visibility function
if(g.style.background == '#F5F5F5')
.background doesn't refer to the color only. It can hold up to eight individual properties.
For example if you log this
console.log(g.style.background);
you will see the following string
rgb(245, 245, 245) none repeat scroll 0% 0%
in the console.
That means the comparison if(g.style.background == '#F5F5F5') won't ever be true.
Furthermore as you can see from the above it returns a rgb value instead of a hex number so you need to convert the color to hex first.
There's a handy library which does the job w3color
Here's the complete example:
function toggle_visibility() {
var e = document.getElementById('on');
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
var f = document.getElementById('off');
if (f.style.display == 'block')
f.style.display = 'none';
else
f.style.display = 'block';
var g = document.getElementById('sidenav');
if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#F5F5F5') {
g.style.backgroundColor = '#252525';
} else
if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#252525') {
g.style.backgroundColor = '#F5F5F5';
}
}
<script src="https://www.w3schools.com/lib/w3color.js"></script>
<div id="sidenav" style="background-color: #F5F5F5">
<div class="btn-area" onclick="toggleNav()">☰</div>
<ul>
<div class="button">
<button onclick="; toggle_visibility();" class="lightbutton">
<span id="on">Turn Off the lights</span>
<span id="off" style="display: none">Turn On the lights</span>
</button>
</div>
</ul>
</div>
use console.log(g.style.background) and you will see that g.style.background returns an rgb value not an HEX value like you expect.
So your code fails here:
var g = document.getElementById('sidenav');
if(g.style.background == '#F5F5F5') {
g.style.background = '#252525';
}
if(g.style.background == '#252525') {
g.style.background = '#F5F5F5';
}
i want to hide button when i click it. But i want my content to be shown when i click the button.
#sectiontohide{
display: none;}
function toggle_div_fun(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide');">Display Content</button>
<div id="sectiontohide">`
this is the content i'd like to show when i click the button and button should disappear
Try this:
function toggle_div_fun(id, btn) {
var divelement = document.getElementById(id);
btn.style.display = "none";
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide', this);">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
If you do not need to reuse the code, maybe this is simpler:
<button onclick="document.getElementById('sectiontohide').style.display='block'; this.style.display='none'">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
I'm trying to hide/show a div based on the click of a button but I can't get it to work.
Below is my code. I can get the alert to see that I'm getting the right ID from the DOM, but I can't show/hide the div content.
function toggleContent(id) {
var e = document.getElementById(id);
//if(e.style.display == null || e.style.display == "none")
if (e.style.visibility == null || e.style.visibility == "hidden") {
//e.style.display = "block";
e.style.visibility: "visible";
} else {
//e.style.display = "none";
e.style.visibility: "hidden";
}
}
<form>
<button onclick="alertData();">Get Alerts</button>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart" style="visibility: hidden;">
my chart
</div>
</form>
You need to set e.style.visibility using =, not : as you would in a CSS file.
In addition, note that the value null is equivalent to visible, not hidden.
function toggleContent(id) {
var e = document.getElementById(id);
if (e.style.visibility == "hidden") {
e.style.visibility = "visible";
} else {
e.style.visibility = "hidden";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<button onclick="alertData();">Get Alerts</button>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart" style="visibility: hidden;">
my chart
</div>
</form>
function toggleContent(id) {
event.preventDefault();
var e = document.getElementById(id);
e.style.visibility=="hidden" || e.style.visibility=="" ? e.style.visibility="visible": e.style.visibility="hidden";
}
#chart{visibility:hidden;}
<form>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart">
my chart
</div></form>
I have a long streak of divs with the following structure:
<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle">
<h6>Income Total</h6>
</div>
</div>
<div id="income2">
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5>
<div id="incometoggle2" style="display:none;">
<h6>Income Total2</h6>
</div>
</div>
<div id="income3">
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5>
<div id="incometoggle3" style="display:none;">
<h6>Income Total3</h6>
</div>
</div>
I have this code to make them open and close:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}
At site load, the first div is opened, the rest is closed.
http://jsfiddle.net/txa2x9qq/3/
How can I make the first div close when the second one is opened, and so on - to have only one opened at a time?
Thank you
This way you just open the next on the close of the previus
function toggle_visibility(id,next) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
if (next != undefined)
{
toggle_visibility(next);
}
}
call it like:
<h5 onclick="toggle_visibility('incometoggle','incometoggle2');">INCOME</h5>
http://jsfiddle.net/txa2x9qq/3/
You can use jQuery Start with Selector to hide all div starting with incometoggle and use not() to exclude the current div
See below function
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
// hide all div except current
$('div[id^=incometoggle]').not('#'+id).hide();
}
DEMO
EDIT - you can write whole logic in jQuery only, just bind click event to h5 elements and show / hide div next to it using toggle. And hide all div except current using jQuery Start with Selector
$(function() {
$('h5').click(function(){
var incomeDiv = $(this).next('div');
$(incomeDiv).toggle();
$('div[id^=incometoggle]').not(incomeDiv).hide();
});
});
DEMO Using JQuery
You can use jQuery more easily:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function toggle_visibility(id) {
$("div[id^='incometoggle']").hide();
$('#'+id).show();
}
</script>
I would approach it slightly differently and use a class along with a jquery selector -
<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle" class="income-total">
<h6>Income Total</h6>
</div>
</div>
...
function toggle_visibility(id) {
// hide all divs with class income-total
$('.income-total').hide();
// show the desired div
$('#' + id).show();
}
Using just Vanilla Javascript, like you're actually doing at the moment:
function toggle_visibility(id) {
// Your clicked element
var e = document.getElementById(id);
// List containing all the divs which id starts with incometoggle.
var allDivs = document.querySelectorAll('div[id^=incometoggle]');
// Loop through the list and hide the divs, except the clicked one.
[].forEach.call(allDivs, function(div) {
if (div != e) {
div.style.display = 'none';
}
else {
e.style.display = e.style.display == 'none' ? 'block' : 'none';
}
});
}
Demo
If you want to do in pure java script then this solution will work for you.
<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle" class="income">
<h6>Income Total</h6>
</div>
</div>
<div id="income2">
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5>
<div id="incometoggle2" style="display:none;" class="income">
<h6>Income Total2</h6>
</div>
</div>
<div id="income3">
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5>
<div id="incometoggle3" style="display:none;" class="income">
<h6>Income Total3</h6>
</div>
</div>
function toggle_visibility(id) {
var e = document.getElementById(id);
var myClasses = document.querySelectorAll('.income'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
if (e.style.display == 'none') e.style.display = 'block';
}
DEMO
Example
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') divid.style.display = 'none';
else divid.style.display = 'block';
}
</script>
<a onclick="showme('widget');" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
I want change text Show Widget & Hide Widget. Let me know
Demo http://jsfiddle.net/SLcDE/
<script type="text/javascript">
function showme(id, linkid) {
var divid = document.getElementById(id);
var toggleLink = document.getElementById(linkid);
if (divid.style.display == 'block') {
toggleLink.innerHTML = 'Show Widget';
divid.style.display = 'none';
}
else {
toggleLink.innerHTML = 'Hide Widget';
divid.style.display = 'block';
}
}
</script>
<a id="toggler" onclick="showme('widget', this.id);" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
You can change the text in your toggle block like this:
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') {
divid.style.display = 'none';
$('#toggleDisplay').text('Show Widget');
}
else{
divid.style.display = 'block';
$('#toggleDisplay').text('Hide Widget');
}
}
</script>
<a onclick="showme('widget');" href="#" id="toggleDisplay" >Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
`<script type="text/javascript">`<br/>
`function showme(id) {`<br/>
`var divid = document.getElementById(id);`<br/>
`var clicky = document.getElementById("clicky");`<br/>
`if (divid.style.display == 'block') {divid.style.display = 'none';clicky.innerHTML = "Show Widget";}`<br/>
`else {divid.style.display = 'block'; clicky.innerHTML = "Hide Widget";}
}`<br/>
`</script>`<br/>
`<a onclick="showme('widget');" href="#" id="clicky">Show Widget</a>`<br/>
`<div id="widget" style="display:none;">`<br/>
`This is a widget`<br/>
`</div>`<br/>