Need to know how to make a div appear and dissappear in JavaScript

JavaScript
1

Hi I am newbie to html,css and javascript, I know there is a similar post earlier but there were 2 problems 1st that post is locked so i can’t ask my question there and 2nd i have already tried what has been recommended there,so now I will continue to ask my question I have an circle in designed in a div that I am trying to link with a button, so when i click the button that circle appear on another div which contains an image and then when i click the button again it goes away and initially it should not appear i can share my code here which is not working for some reason. please help

function change(){
var off=document.getElementById("circle");
if (off.style.display === "none"){
	off.style.display = "block";
}
else if (off.style.display === "block"){
	off.style.display = "none";
}
}
2

Can you show us the HTML and CSS that the JavaScript is working with?

3

Actually i have to make a bulb that turns off and on by making this circle yellow shade inside the bulb, even though everyone make that feature by using 2 images, so to make it a little different our assignment is to make a circle that glows in the bulb so i have tried doing the following in html and css
HTML:

<!Doctype html>
<html>
<head>
<title>Circle in HTML</title>
<link rel="stylesheet" type="text/css" href="Styles/Bulb.css">
<link rel="stylesheet" type="text/css" href="Scripts/Bulb.js">
</head>
<body>
<div id="BulbDiv">
<img src="Images/bulb.jpg">	
<div id="circle"></div>
</div>
<button onclick="change()" id="button">On/Off</button><br/>
</body>
</html>

CSS:

#BulbDiv{
border: 2px solid black;
height: 400px;
width: 400px;
margin-top: 50px;
}
#circle{
border: 2px solid black;
width: 170px;
height: 170px;
-webkit-border-radius: 85px;
-moz-border-radius: 85px;
border-radius: 85px;
background: yellow;
position: absolute;
top: 77px;
left: 83px;
}
#button{
border: 2px solid black;
height: 50px;
width: 100px;
}
6

For future reference:

When you post code on the forums, you need to format it so it will display correctly. You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

7

Hi @idsameerkhan001, the .style property only accounts for styles set directly on the element, not for CSS. So initially off.style.display is neither "block" nor "none" but just an empty string, and neither of your if conditions is met.

To fix this you might either set the style of that element with JS on page load, or adjust the condition like so:

if (off.style.display) {
  // If there's a style set, remove it to
  // fall back to the CSS styling
  off.style.display = ''
} else {
  // Otherwise set it to "none" (or "block",
  // depending on what the initial display
  // is supposed to be)
  off.style.display = 'none'
}

A better approach would be not to set the style directly at all though, but use a hidden class instead:

CSS

.hidden {
  display: none;
}

JS

off.classList.toggle('hidden')

BTW, I’d also suggest to avoid inline scripting like that onclick attribute – mixing markup and logic like this is generally a bad idea as it can quickly get hard to maintain. Instead, you can use .addEventListener() instead like so:

var button = document.getElementById('button')
var off = document.getElementById('circle')

var change = function () {
  off.classList.toggle('hidden')
}

button.addEventListener('click', change)

Another advantage is that you can store a reference to the #circle element, and don’t have to query it anew each time the button gets clicked… here’s a fiddle. Note that you’ll have to put your JS at the end of the body for this though, not in the head.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.