How to show/hide a div in javascript? - javascript

When i click the button i want the div to show, and when i click the button again i want it to disappear. What am i doing wrong?
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">
Glow
</div>
<script>
function myFunction() {
var e = document.getElementById("Dglow").style.display;
if (e == "none")
e = "block";
else {
e = "none";
}
}

You should compare and change element's display property:
function myFunction() {
var e = document.getElementById("Dglow").style;
if (e.display == "none") {
e.display = "block";
} else {
e.display = "none";
}
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">Glow</div>

Actually document.getElementById("Dglow").style.display returns a string and according to Left hand assignment rule you cannot store anything to that string, since that string is not a variable/object now ie not a reference to DOM anymore
You can do is
var e = document.getElementById("Dglow").style;
if(e.display == "none")
e.display = "block";
else{
e.display = "none";
}

Have you considered using Jquery? If so heres what you need.
$(document).ready(function(){
$("#button").click(function(){
$("#Dglow").toggle();
});
});
You would need to give your button an id for this though.

Related

div needs to be clicked twice to trigger event listener js

When I click on the .current-pet-icon div, I need to click it twice before it shows my menu. but every subsequent click after is okay. Just when I refresh / load the page the first time I need to double click. Any help wpuld be greatly appreciated!
Javascript
const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');
menuToggle.addEventListener('click', () => {
if (openedNav.style.display === "none") {
openedNav.style.display = "block";
shadowNav.style.display = "block";
} else {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});
shadowNav.addEventListener('click', () => {
if (openedNav.style.display = "block") {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});
HTML
<div class="pet-icon-container">
<img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon">
</div>
Assuming that there is a CSS style assigned to hide both .nav-popout and .shadow-nav elements initially then a modified version of the original js code appears to function as expected.
const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');
menuToggle.addEventListener('click', (e)=>{
openedNav.style.display = openedNav.style.display == 'block' ? 'none' : 'block';
shadowNav.style.display = shadowNav.style.display == 'block' ? 'none' : 'block';
});
shadowNav.addEventListener('click', (e)=>{
if( openedNav.style.display == "block" ) {
shadowNav.style.display = openedNav.style.display = "none";
}
});
.pet-icon-container img{
width:150px;
}
.nav-popout,
.shadow-nav{
display:none;
}
<div class="pet-icon-container">
<img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon" />
</div>
<div class='nav-popout'>#NAV-POPOUT#</div>
<div class='shadow-nav'>#SHADOW-NAV#</div>
A quick console.log(openedNav.style.display) will help you find the issue. In the first call to the click handler, openNav.style.disply is actually empty (not 'none').
Why does this happen
If you access a DOM Element via getElementById, you'll not be able to read the computed style of that element, because it is defined inside the CSS file (I assume you are doing that).
How to fix it
use getComputedStyle. Or see the top answers to these questions if you wanna know more:
document.getElementById(...).style.display is blank
myDiv.style.display returns blank when set in master stylesheet
menuToggle.addEventListener("click", () => {
if (getComputedStyle(openedNav).display=== "none") {
openedNav.style.display = "block";
shadowNav.style.display = "block";
} else {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});

onclick button only one div id is in call action

I have created button that view the elements that is hidden onclick but there are many div with same id but it i want to hide all but its hidding only one i am using below code but its just viewing or hidding, the first div only hidding onclick rest its not hidding
<button onclick="myFunction()" class="btn-custom">View the Picture</button>
<div id=hide></div>
<div id=hide></div>
<div id=hide></div>
<div id=hide></div>
<script>
function myFunction() {
var x = document.getElementById("hide");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Your HTML is invalid - ids must be unique.
Instead, use a class to identify the elements and querySelectorAll to select all of them:
<div class=hide>a</div>
<div class=hide>b</div>
<div class=hide>c</div>
<div class=hide>d</div>
<button onclick="myFunction()">Toggle</button>
<script>
function myFunction() {
var x = document.querySelectorAll(".hide");
x.forEach(y => {
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
})
}
</script>

Hide one form when other button is clicked on (two buttons, two forms) (PHP/HTML/Javascript)

I currently have two buttons, each displays a different form. I also have the buttons so that when you click on it once, it'll show the form, and if you click on it again, it'll hide the form.
WHAT I WANT IT TO DO:
I'm trying to get it so that if one form is already shown and I click on the button for the OTHER form, the one that is currently showing will hide and the OTHER one will show.
Here's what I thought would work, but if one of the form is shown and I click on the button for the other form, nothing happens.
<script>
function show(x, y){
if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
document.getElementById(x).style.display == "block";
document.getElementById(y).style.display == "none";
}
else if(document.getElementById(x).style.display == "none") {
document.getElementById(x).style.display = "block";
}
else{
document.getElementById(x).style.display = "none";
}
}
</script>
<form>
<button type = "button" onclick = 'show("searchForm", "insertForm");'>Perform Search</button>
<button type = "button" onclick = 'show("insertForm", "searchForm");'>Insert Data</button>
</form>
<form id = "searchForm" value "search" style = "display: none;" action = "test2.php" method = "post">
<!-- My code -->
</form>
<form id = "insertForm" style = "display: none;" action = "test2.php" method = "post">
<!-- My code -->
</form>
I'm sure it's some really silly mistake I'm making. Can anyone help me figure this out and explain what I'm doing wrong and what I should be doing instead? Thanks!
You are doing comparisons == in your if, and need to use an assignment =
if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
document.getElementById(x).style.display = "block";
^
document.getElementById(y).style.display = "none";
^
}
It is a pretty small mistake..
document.getElementById(x).style.display = "block";
document.getElementById(y).style.display = "none";
You are using equals operator instead of the assignment operator.
No matter what you want to use, try to touch DOM as few times as possible.
function show(x, y){
var x, y; // function scope vars
// search for elements just once
x = document.getElementById(x);
y = document.getElementById(y);
console.log(x);
console.log(y); // just to show if you are getting elems you really want
if(x.style.display == "none" && y.style.display != "none"){
x.style.display = "block";
y.style.display = "none";
}
else if(x.style.display == "none") {
x.style.display = "block";
}
else{
x.style.display = "none";
}
}

Hiding a div with toggle()

I have this button in html
<tr><td>
<button class="btn cmt_list" name="cmtList" id="cmt-'.$row['uid'].'"value = "hide/show"/>Show</button>
</td></tr>
Upon clicking, I'd like to show/hide the div. I would like the div to be hidden by default.
<div class='commentbox' id='comments-{$row['uid']}'></div>
As of now, my javascript looks like this
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
You don't need to write your own toggle function. You can do it easily with the jQuery toggle function.
Here's the HTML. Setting display: none will make it hidden by default.
<div id="myDiv" style="display: none">
Hello this is my div
</div>
<button id="myBtn">Toggle Div</button>
Here's the jQuery.
$('#myBtn').click(function() {
$('#myDiv').toggle();
});
Working demo: http://jsfiddle.net/eL2AU/
You can also do it with JavaScript alone, like so:
var btn = document.getElementById('myBtn');
btn.onclick = function() {
var d = document.getElementById('myDiv');
if (d.style.display === "none") {
d.style.display = "block";
} else {
d.style.display = "none";
}
};
Demo: http://jsfiddle.net/eL2AU/1/
You are passing the wrong ID to document.getElementById(). Your div has ID comments-{$row['uid']} but you are looking for an element with ID of newpost.
If your issue is hiding the div before it is clicked then put this before your function
$('#myDiv').hide();

Toggle (show/hide) element with javascript

By using this method I can show/hide an element by using 2 buttons:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
<input type="button" onClick="hideStuff('themes')" value="Hide">
<input type="button" onClick="showStuff('themes')" value="Show">
<div id="themes" style="display:block">
<h3>Stuff</h3>
</div>
Is there a method to use a single button?? Maybe if & else?
You've already answered your question...the use of if/else:
function toggle(id) {
var element = document.getElementById(id);
if (element) {
var display = element.style.display;
if (display == "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
}
This won't be completely foolproof, in case you are hiding/showing inline or inline-block elements, or if you are using non-default values for display on elements...such as setting a div's display to "inline" (for whatever reason) and then trying to use this function
Yes if/else will work
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == 'block'){
elem.style.display == 'none'
} else if(elem.style.display == 'none'){
elem.style.display == 'block'
}
}
I think you mean something like this:
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == "block"){
elem.style.display="none";
} else {
elem.style.display="block";
}
}
Here is an alternate solution. Instead of using document.getElementById, you can also use document.querySelector which returns the first Element within the document that matches the specified selector, or group of selectors.
Solution Code:
function toggleShow() {
var elem = document.querySelector(id);
if(elem.style.display == 'inline-block'){
elem.style.display="none";
}
else {
elem.style.display = "inline-block";
}
}

Categories