Develop Reference

Changing CSS Display property with Javascript but keeps disappearing

I have a div element in my page which I want to make visible only upon the click of a button. This works as expected, except the div promptly disappears again and I cannot get it to remain visible.
function btnAddItem_Click() {
document.getElementById("add-item-popup").style.display = "block"
}
.add-item-popup {
width: 400px;
height: 550px;
display: none;
background-color: #ededed;
position: fixed;
right: 40%;
top: 20%;
}
<div class="add-item-popup" id="add-item-popup">
//Contains a form
</div>
<button onclick="btnAddItem_Click()">Add Item</button>

I'm going to make a reasonable assumption but an assumption nonetheless with this solution. The assumption is your <button> tag with your onclick handler is inside of another form. If so, replace this line here:
<button onclick="btnAddItem_Click()">Add Item</button>
To become this code:
<button type="button" onclick="btnAddItem_Click()">Add Item</button>
Explanation: When button is inside a form without type="button" specified, it will submit the form, and in your case, reload the page where the css then of course is anew. Thus you only see a "blip" of the displayed div.

Use This Code your issue is resolved.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>

I also agree with #GetSet, I created this little jsfiddle in order to reproduce the issue inside a form. In case we don't form, there's no issue.
You can reproduce the issue by removing/adding the button attribute type like recomended by #GetSet.
[Here it is an example][1]

I don't understand how to use document.getElementById(‘id’).onclick

I'm learning javascript right now and I am just building a simple menu that will show when the nav button is clicked.
I don't understand how to use the document.getElementById(‘id’).onclick when in a separated js file that is linked to my html. Reading around I think I understand that my problem is that you cannot call onclick out the blue because the DOM element are not yet defined.. or something alone those line. I just don't understand then how to proceed.
If I add within my button html tag onclick="function()" it works, but it don't when I add it within my separate js file. I'm using the W3school tutorial found here.
Here is my code
<nav>
<button class="nav-button" id="nav">
<div class="menu-button"></div>
<div class="menu-button"></div>
<div class="menu-button"></div>
</button>
<div class="dropdown-menu" id="dropdown">
Hello
Hello
Hello
</div>
</nav>
.nav-button {
background: none;
border: none;
margin-left: 1em;
padding-top: 12px;
cursor: pointer;
}
.menu-button {
background-color: #fff;
width: 30px;
height: 4px;
margin-bottom: 5px;
border-radius: 5px;
}
.dropdown-menu {
margin-top: 7px;
width: 100px;
background-color: #fff;
display: none;
}
.showDropDown {
display: block;
}
function showDropDown() {
document.getElementById('dropdown').classList.toggle("showDropDown");
}
document.getElementById("nav").onclick = function showDropDown()
Here is a codepen
Thanks for your help!

just instead of
document.getElementById("nav").onclick = function showDropDown()
replace it with
document.getElementById("nav").onclick = showDropDown
because the onclick accepts function and you'r already defined this function

1.create myjavascript.js file in same folder where your page html is.
2.copy the javascript code in myjavascript.js "only code not tag <script></script>"
4.paste this at the end of your html page
<SCRIPT language="javascript" src="myjavascript.js" type="text/javascript"></SCRIPT>
This is the way to reference your code javascript in your html file.

It will be much easier to work with jquery than plain javascript.
Here how you are calling showDropDown function is wrong
change function showDropDown to
showDropDown
Better you can make the closure at the button click event like
let btn = document.getElementById("nav");
let toggleIt = document.getElementById('dropdown');
btn.onclick = function(){
toggleIt.classList.toggle("showDropDown");
};

Having it in a separate js file should work you just need to import the js file using the script tag. You should probably do this at the end of the HTML to guarantee that the js is ran after the DOM is loaded.
Update Your missing the brackets around the function call:
document.getElementById("nav").onclick = function() { showDropDown(); };

CSS property update not working with mouse click

i am trying to implement accordion.
My accordion should expand on mouse hover on the "accordian head".
And also mouse click on "accordian head" should show/hide the accordion-body.
I got the show/hide working through CSS on hover.
But when i club mouse click event , the functionality is not working
here is the sample
http://jsfiddle.net/yf4W8/157/
.accordion-body{display:none;}.accordion:hover div{display:block;}

you need to change
myDivElement.style.display = none;
myDivElement.style.display = block;
to
myDivElement.style.display = "none"; //double quotes are missing
myDivElement.style.display = "block"; //double quotes are missing
Demo

I have created a working demo, please check the link below not it is working on mouse click. Replace your JavaScript code with this and remove the css properties.
function expandAccordionBody(){
var myDivElement = document.getElementById("accbody" );
var cStyle=window.getComputedStyle(myDivElement, null);
if(cStyle.display=='block'){
myDivElement.style.display='none';
}else{
myDivElement.style.display='block';
}
}
Demo

I took a liberty to change your code a bit. This code works.
Hope that this is what you meant to do....
Instead of using pure Javascript I used jQuery event click and hover.
here is the link for working code
click here for DEMO
HTML code;
<div class="accordion">
<div class="headA">
Head
</div>
<div id="accbody" class="accordion-body">
Body
</div>
</div>
CSS code;
.accordion {
border: 1px solid #444;
margin-left: 60px;
width: 30%;
}
.accordion:hover div {
display: block;
}
.accordion-body a {
background-color: green;
display: block;
color: white;
padding: 25px;
text-align: center;
}
.headA a {
text-align: center;
display: block;
background-color: yellow;
padding: 25px;
}
jQuery code;
$(document).ready(function() {
// on page load hide accordion body
var accordionBody = $('#accbody');
accordionBody.hide();
// first make on click event happening
// when user clicks on "Head" accordion "Body will show up"
$('.headA').click(function() {
if (accordionBody.is(':hidden')) {
accordionBody.slideDown(400);
} else {
accordionBody.slideUp(400);
}
});
$('.headA').hover(function() {
if (accordionBody.is(':hidden')) {
accordionBody.slideDown(400);
} else {
accordionBody.slideUp(400); // turn this off if you want only to slide down and not back up
}
});
});

How to show and hide fieldset content on click of the legend

I have a html page as below,
the tags code is :
<fieldset>
<legend>Tags</legend>
<div>
<label>
<input type="checkbox" name="col" value="summary" checked="checked" />
Name
</label>
......
</div>
</fieldset>
But i want to make the page as below:
In this screenshot, when i click the Columns, it will be fold and the tags invisible. Any one know how to do this? Add a CSS or JS? Thanks

It can be done by first finding all of the legend elements, then assigning an onclick handler. The handler is assigned to the first div found in the legend's parent. So this will work even if you have multiple fieldsets and legends on the same page.
jsFiddle Demo
window.onload = function(){
var legends = document.getElementsByTagName("legend");
for(var i=0; i<legends.length; i++)
{
legends[i].onclick = function()
{
var myDivs = this.parentNode.getElementsByTagName("div");
var myDiv;
if(myDivs.length > 0)
{
var myDiv = myDivs[0];
if(myDiv.style.display == "")
{
myDiv.style.display = "none"
}
else
{
myDiv.style.display = "";
}
}
}
}
};
​
In the demo, I also added CSS to the legend cursor:pointer;, which just shows the hand when you hover over the legend (to indicate to click).

You can modify the legend using CSS like you do for any other html element. Using Jquery is very simple, just have to do something like this:
Jquery:
$(function(){
$('legend').click(function(){
$(this).nextAll('div').toggle();
$(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
});
})​
CSS:
.hide{
padding-left: 10px;
background: url('img/down.gif') no-repeat left middle;
}
.show:after{
padding-left: 10px;
background: url('img/up.gif') no-repeat left middle;
}
Fiddle here

I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking for, and some explanations about it are below the code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#title').click(function(){
$('#tags_check').toggle();
});
})
</script>
<style type="text/css">
#content {
position: relative;
padding: 10px;
}
#title {
border: 1px solid grey;
position: absolute;
background-color: #ccc;
top: -5px;
left: 15px;
z-index: 1;
cursor: pointer;
}
#tags_check {
border: 1px solid grey;
position: relative;
z-index: 0;
top: 3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="content">
<div id="title">Columns</div>
<div id="tags_check">
<input type="checkbox" name="col" value="summary" checked="checked" /> Name1
<input type="checkbox" name="col" value="summary" checked="checked" /> Name2
</div>
</div>
</body>
I'm using jquery, because is incredible easier than writtingh any other javascript, and I'm loading the library via CDN. As you see, show or hide is pretty easy, just when the document is loaded, toggle between both states, show or hide. I include the ID of the elements (as you can see I changed the layout) to pick them up easily.
About the desing, with fieldset... is going to be complicated achieve what you posted. Better just two divs, 'position: relative' to move them easily up and down. The CSS shows z-index to put one over the oter, and this only work on relative and absolute elements, along the top and left properties. Hope you like it!

How can I log information without using alert in userscripts

i have an userscript which traces all the dynamically created tags in javascript of a webpage. the problem here is presently i am using alert box to dispaly the output. The problem with alert() is that it can be very obtrusive. For every alert, you need to click the OK button to proceed which wastes your time. so i want an alternative method like log files other than alert box. how can i do this.
i am restricted to use console.log

I would use some kind of console element statically placed on your page which can be hidden if necessary. See this jsFiddle.
HTML:
<div id="console">
<div class="header">
Console
<span class="expand" onclick="toggleConsole();">+</span>
</div>
<div class="content" style="display: none;"></div>
</div>
CSS:
#console {
position: fixed;
right: 0px;
bottom: 0px;
width: 300px;
border: solid 1px #dddddd;
}
#console .header {
background-color: #ededed;
border: solid 1px #dddddd;
}
#console .header .expand {
padding-right: 5px;
float: right;
cursor: pointer;
}
#console .content {
overflow: auto;
background-color: #F9F9F0;
width: 100%;
height: 180px;
}
Javascript:
function log(text) {
var consoleContent = document.getElementById('console')
.getElementsByClassName('content')[0];
var line = document.createElement('div');
line.className = 'consoleLine';
line.innerHTML = text;
consoleContent.appendChild(line);
}
function toggleConsole() {
var content = document.getElementById('console')
.getElementsByClassName('content')[0];
if (content.style.display === "none") {
content.style.display = "block";
document.getElementById('console')
.getElementsByClassName('expand')[0].innerHTML = "-";
} else {
content.style.display = "none";
document.getElementById('console')
.getElementsByClassName('expand')[0].innerHTML = "+";
}
}
document.onload = function() {
document.getElementById('console')
.getElementsByClassName('expand')[0].onclick = toggleConsole;
};
Use log("some text"); to output to your console !

Install firefox add-on to your Mozilla(if you are using) and you the follwing code:
console.log("test"+your_variable);
So above code will display all logs in console.If IE press F12 and check console.

If a normal user should be able to see it, using the console is not a very user-friendly way.
Define a space on your webpage (a <div> might be handy) where you want the information to be, and just add the messages to that space using javascript (or jQuery) to modify the DOM:
HTML:
<div id='logmessages'>Log messages:</div>
JavaScript
function log(yourMsg) {
document.getElementByID('logmessages').innerHTML() += yourMsg;
}
It might be friendly to allow the user to show/hide the div with a button or another way.

Create a fixed div either at the top, bottom or corner of your page with set width/height and overflow auto, then insert the log entries in it.