using javascript to change display

Question

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/

console.log(display) just before the if could give you (and us) a clue. BTW. I've not found any target with "Your suggestions" in the piece of html... post that part also. — miguel-svq
– miguel-svq, Commented Jun 3, 2014 at 19:49
I took a screenshot but to add images it seems that it needs to be on a server or website so I can reference it by url. I'm using chrome, and the result returned nothing back but a reference to the js doc. so something like this --> whitespace js playpen.js:27 --- 27 is the line where I put the console.log(display) — user3029001
– user3029001, Commented Jun 3, 2014 at 19:59

yancie · Accepted Answer · 2014-06-03 20:13:54Z

6

There is a couple of error in your js , I listed them in the comment , 4 in totoal

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

    // SKIP THIS CODE, THE ERROR LIES BELOW

        // 1. put the var outside of the if/else 
        var para = document.getElementById('activities').querySelector('p');
        var display = para.style.display;

        // THIS WAS WHERE THE ERROR OCCURS           
        if(e.target.innerText === 'Your Suggestions'){

            if(display = 'inline-block'){   // 2. it should be "=" instead of "=="
                para.style.display = 'none';
                suggestion_input.style.display = 'inline-block';
                console.log('works');
            }
        }else{
            if(display = 'none'){
                suggestion_input.style.display = 'none';    // 3. add in suggestion display none
                para.style.display = 'inline-block';    // 4. "para.style.display" instead of "display"
            }
        }
    } 
});

A working demo : http://jsfiddle.net/a4t7w/7/

So now when you click suggestion , the from show up, than if you click the activity, the paragraph come back in, from disappear

answered Jun 3, 2014 at 20:13

yancie

3161 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3029001 Over a year ago

wow. I'm embarrassed. I've been staring at the code for so long my mind just glazed over those errors. Sorry for my recklessness and wasting your guys' time

user3029001 Over a year ago

wait, but isn't = an assignment operator? Oh well, the code works. So why wouldn't the condition (display == 'inline-block') work?

yancie Over a year ago

@Crackertastic Explained it :) But I believe his answer twisted your original code a little, it was suppose to "click suggestion -> from show up" | than "click activity -> activity show up" , but it's changed to toggle the form by clicking suggestion, and show the last activity been viewed, a little weird if you ask me

Crackertastic Over a year ago

@yancie +1 to you! Thanks for pointing that out. I edited my answer to toggle the form suggestion form off when clicking an activity.

Crackertastic · Accepted Answer · 2014-06-03 20:41:23Z

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.

wow thanks for the clear explanation! Sorry for the change in accepted answers.
@user3029001 I've updated this answer to fix the toggling of the suggestion form when clicking on an activity.

Ilia luk · Accepted Answer · 2014-06-03 19:37:00Z

1

Read this line carefully:

/* 
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';

*/

now all you have to do is uncomment this line:

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

answered Jun 3, 2014 at 19:37

Ilia luk

2,0952 gold badges16 silver badges18 bronze badges

2 Comments

miguel-svq Over a year ago

I took that comment in the code as he means that the problem/error is not inside the if, but in the if itself. Don't you think it makes more sense? @DOMUSNETWORK

user3029001 Over a year ago

miguel_svq is correct. I just added the code inside the first if statement to check if the code itself is working. However, the code does not work in the second if statement.And even when I uncommented, if I wanted to reshow the paragraph when I click on other links, the code doesn't work again for the if statement. JsFiddle: jsfiddle.net/a4t7w/6

Collectives™ on Stack Overflow

using javascript to change display

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related