Question

103

using javascript to change display

rated 0 times [ 108] [ 5] / answers: 1 / hits: 16069 / 10 Years ago, tue, june 3, 2014, 12:00:00

So I looked at other questions and I found an answer that was chosen on this link:

Toggle (show/hide) element with javascript

This below was the following function that works in the answer to change the display.

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;

    }

  }

}

I tried that in my code, but it's not working. I've attached a link to the JSFiddle at the end or this post.

I have a parent div with the id of #activities. It contains multiple children, but the important ones are the li,p, and div which has an id as #suggestion_input. Below is the HTML.

HTML

<div id=activities class=info_container>

        <h1>Our Activities</h1>

        <div class=contain>

            <ul>  

                <li>Activity 1</li>

                <li>Activity 2</li>

                <li>Activity 3 </li>

                <li>Activity 4 </li>

                <li>Activity 5</li>

                <li>Activity 6 </li>

                <li>Activity 7</li>

                <li>Your Suggestions</li>

            </ul>

            <p> 

                Bacon ipsum dolor sit amet ribeye tenderloin meatball, chuck andouille beef ribs jerky ...

            </p>

            <div id=suggestion_input>

                <label for=name >Your Name</label>

                <input type=text id=name name=name>

                <label for=email>Email</label>

                <input type=email id=email name=email>

                <label for=suggestions>Suggestions</label>

                <textarea id=suggestions name=suggestions rows=39></textarea>

            </div>

When the user clicks the last li in the ul called Your Suggestions, then the p will have display set to none and the #suggestion_input will have display of inline-block. Currently, their css is set to inline-block and none respectively.

CSS

 #activities p{

 display:inline-block;

 width:500px;

 vertical-align:top;

 margin-top:20px;

 margin-left:20px;

 background:#FFFDA1;

 }



 #suggestion_input{

 display:none;

 margin-left:150px;

 vertical-align:top;

 margin-top:20px;

 text-align:center;

  }

And then this is my javascript which I think reflects the answer in the link except that it isn't a function.

Javascript - This code is part of an addEventListener. Event is a click.

 if(e.target.innerText === 'Your Suggestions'){



            var para = document.getElementById('activities').querySelector('p');

            var display = para.style.display;

            /* if you uncomment this, then the following code will work

            outside of the if display == 'inline-block' condition



            para.style.display = 'none';

            suggestion_input.style.display = 'inline-block';



            */



            if(display == 'inline-block'){

                // This code will not work

                para.style.display = 'none';

                suggestion_input.style.display = 'inline-block';

                console.log('works');

            }

        }else{

            if(display == 'none'){

                display = inline-block;

            }

        }

    }

When I click, nothing happens. Is the error because of the condition in the if statement of display == 'none' ?

Here is the JSfiddle: http://jsfiddle.net/a4t7w/1/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

efren

Add To Favorites

Follow

Total Points: 186

Total Questions: 85

Total Answers: 112

Location: Turkmenistan

Member since Sat, Apr 16, 2022

2 Years ago

answered 10 Years ago margaritakristinak · Accepted Answer

Okay, so to start, part of your problem is with the understanding that para.style.display equals inline-block like is set in your style sheet. Unfortunately in this usage Javascript is accessing your inline styles as defined with the element itself and not what you are defining with external CSS.

So this statement: if(display == 'inline-block') never returns true because display is actually set to . If you aren't already, get familiar with Firebug for Firefox. It does wonders for helping debug this kind of stuff.

Another thing is here: if(e.target.innerText === 'Your Suggestions'). Instead of innerText you should use innerHTML or textContent. The innerText property is an IE thing.

Now, to solve your problem! I see you are attaching the click event to the <div> element that holds your <ul> element. If you only need this click event you function on your Suggestions <li> then I would recommend you isolate that particular element when attaching your listener.

Change your HTML and JS:

<li id=suggestionToggle>Your Suggestions</li>

...

document.getElementById('suggestionToggle').addEventListener(click,function(e) ...

Next you can rewrite your Javascript to test for the presence of or inline-block when setting your styles on the <p> element. Here's an updated version of your code:

document.getElementById('activities').addEventListener(click,function(e)

{

    var suggestion_input = document.getElementById('suggestion_input');

    var para = document.getElementById('activities').querySelector('p');

    var light_green = document.getElementById('activities').querySelector('.light_green');      





if(light_green){

    light_green.style.backgroundColor=red;

    light_green.className = ;

    e.target.style.backgroundColor = '#0DFFB9';

    e.target.className = 'light_green';

} else {

    e.target.style.backgroundColor = '#0DFFB9';

    e.target.className = 'light_green';

}



if(e.target.innerHTML == 'Your Suggestions') {       

    var display = para.style.display;           



    if(display == 'inline-block' || display == ) {

        // This code will not work ** It will now! **

        para.style.display = 'none';

        suggestion_input.style.display = 'inline-block';

    } else {

        if(display != inline-block) {

            para.style.display = inline-block;

            suggestion_input.style.display = none;

        }

    }

} else {        

    para.style.display = inline-block;

    suggestion_input.style.display = none;

}

});

JS Fiddle to see the toggle in action is here: http://jsfiddle.net/RyUz5/8/

Hope that helps!

EDIT: Enabled proper toggling that I accidentally stripped out as noted by yancie.