CODEWITHSUNDEEP
javascripthtml
Sanjana Porwal
Sanjana Porwal

Reputation: 155

Not able to change div display property using javascript

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");
}

Upvotes: 4

Views: 4476

Answers (3)

David Thomas
David Thomas

Reputation: 253396

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 ids of the div elements by, effectively, adding the Content string, and amended the ids 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 ids 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>

JS Fiddle demo.

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);
    };
}

JS Fiddle demo.

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);

JS Fiddle demo.

Notes:

  1. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2.

References:

Upvotes: 1

user2625787
user2625787

Reputation:

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";
}

Upvotes: 3

Murillio4
Murillio4

Reputation: 495

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>

Upvotes: 1

Related Questions