Not able to change div display property using javascript
Question
I am trying to change display property of my div using js but it is not showing any change.
In Js code if statements are not becoming true though in css all the properties are set properly. Please help I am a novice and not understanding the issue. Below is the code I am trying
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<script src="main.js" type="text/JavaScript"></script>
</head>
<body>
<nav id="nav">
<ul class="main_nav">
<li id="About_me"><a href="#" onclick="About_Me_Sel()">About Me</a></li>
<li id="home1"><a href="#" onclick="Home_Sel()">Home</a></li>
</ul>
</nav>
<div id="About">
<p>Hello</p>
</div>
<div id="home">
<p>hi</p>
</div>
</body>
My JS code:
function About_Me_Sel()
{
var Id;
Id =document.getElementById("About");
if(Id.style.display == "block")
{
Id.style.display = "none";
}
}
function Home_Sel()
{
var Id;
Id= document.getElementById("home");
if(Id.style.display == "none")
{Id.style.display = "block";
}
else
alert("hello");
}
3 answers
solution1
3
That won't work the first time around. The style property is not connected to your stylesheet, so JavaScript doesn't know what rule's you've set there. The style property reflects a style attribute that gets written into your element's tag. (You can hard-code one into your HTML if you want.) So the value is always null until you set it.
Before
<div id="About">
After
<div id="About" style="display: block">
Try reversing the conditional
if (Id.style.display != "block")
{
Id.style.display = "block";
}
else
{
Id.style.display = "none";
}
solution2
1 2013-08-19 23:27:15
I used Ajax to load in other content into my div, and i got the content from other php files. this way
function changecontent(name){
var htmlUrl = name;
$.ajax({
url: htmlUrl,
dataType: 'html',
success: function(data) {
console.log("Current page is: " + htmlUrl);
$("#maincontent").fadeOut(function() {
$(this).html(data).fadeIn("fast");
});
}
});
}
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="main.js" type="text/JavaScript"></script>
</head>
<body>
<nav id="nav">
<ul class="main_nav">
<li id="About_me"><a href="#" onclick="changecontent("about_me.php")">About Me</a></li>
<li id="home"><a href="#" onclick="changecontent("home_sel.php")">Home</a></li>
</ul>
</nav>
<div id="maincontent">
<p>Hello</p>
</div>
<div id="home">
<p>hi</p>
</div>
</body>
eks: about_me.php
<a>I'awesome</a>
solution3
0 2013-08-20 07:24:11
You have a number of errors in your code; I'll try to go through them one-by-one to clarify those problems and offer solutions that should, hopefully, lead to better understanding (and practice) in future.
First, an id "...assigns a name to an element. This name must be unique in a document." 1 . Note the 'must,' which means that a document with a duplicated id (more than one element sharing the same id value makes the document invalid, and causes problems with JavaScript, since it will only ever look for one element with a given id , and recover from invalid documents with unpredictable results).
That being the case I've amended the id s of the div elements by, effectively, adding the Content string, and amended the id s of the li elements to be single word and lower-case so that they can be predictably made to reference each other. This gives the following HTML:
<nav id="nav">
<ul class="main_nav">
<li id="about"><a href="#" onclick="About_Me_Sel()">About Me</a></li>
<li id="home"><a href="#" onclick="Home_Sel()">Home</a></li>
</ul>
</nav>
<div id="aboutContent">
<p>Hello</p>
</div>
<div id="homeContent">
<p>hi</p>
</div>
JS Fiddle (this still doesn't work as you'd intend, because the other problems still exist; it's merely to show the corrected/amended HTML).
Now, the JavaScript.
The reason it can't work, as noted by @Jeffman in his answer is because element.style references only the in-line styles of an element (those set with the style attribute), not the styles set with either a stylesheet or in the head of the document. This means you're comparing an undefined variable with a string, which will always be false .
You're also using two functions to do the same thing, which is wasteful and unnecessary. This is the second reason I've modified the id s of the various elements. A modified (single) function to do what you want to do:
function sel(e, self) {
// e is the click event,
// self is the 'this' DOM node
var id = self.parentNode.id,
toggle = document.getElementById(id + 'Content'),
display = toggle.style.display;
toggle.style.display = display == 'block' ? 'none' : 'block';
}
The above requires the following HTML for the a elements:
<a href="#" onclick="sel(event, this)">About Me</a>
Now, this still requires obtrusive JavaScript (using in-line event-handling within the HTML itself, which requires updates every time you may want to add further event-handling or change the function to call upon those events). Therefore I'd suggest moving to a more unobtrusive version, such as:
function sel(e, self) {
// e is the click event,
// self is the 'this' DOM node
var id = self.parentNode.id,
toggle = document.getElementById(id + 'Content'),
display = toggle.style.display;
toggle.style.display = display == 'block' ? 'none' : 'block';
}
var links = document.getElementById('nav').getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].onclick = function (e){
sel(e, this);
};
}
Now, while this works, this still requires assigning event-handlers to multiple elements (despite being more easily done using a loop within JavaScript itself).
The easier way is to delegate the event-handling to the parent element, and assess, in the function itself, where the event originated. Which would give the following JavaScript:
function sel(e) {
// e is the click event,
// self is the 'this' DOM node
var self = e.target,
id = self.parentNode.id,
toggle = document.getElementById(id + 'Content'),
display = toggle.style.display;
toggle.style.display = display == 'block' ? 'none' : 'block';
}
var nav = document.getElementById('nav');
nav.addEventListener('click', sel);
Notes:
References:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.