Show Div Based On If Statement

March 11, 2024 Post a Comment

I'm trying to use this code to hide or show a div based on the url param 'direction' I can't get this to work and wonder if there is a better way. Sample url = http://domain.com?di

Solution 1:

You're missing a $(document).ready (if you're using jQuery) or window.onload block -

$(document).ready(function() {
    var myVal = getUrlVars()["direction"];

    if(myVal == "north") {
        document.getElementById('north').style.display = 'block'; 
    }else {
        document.getElementById('south').style.display = 'none'; 
    }
});

or without jQuery -

window.onload = function() {
        var myVal = getUrlVars()["direction"];

        if(myVal == "north") {
            document.getElementById('north').style.display = 'block'; 
        }else {
            document.getElementById('south').style.display = 'none'; 
        }
}

It's possible that your code isn't working as the divs haven't been loaded in to the DOM when you're trying to show/hide them.

Example : http://jsfiddle.net/manseuk/RTrgN/1/

Solution 2:

Maybe in the if/else statement you need to show and hide the other div so that the correct one is shown and the correct one is hidden in each condition?

Baca Juga

if(myVal == "north") {
    document.getElementById('north').style.display = 'block'; 
    document.getElementById('south').style.display = 'none'; 
}else {
    document.getElementById('north').style.display = 'none'; 
    document.getElementById('south').style.display = 'block'; 
}

Solution 3:

For a pure javascript method you need to add change the window.onload even to run your code - this ensures the DOM elements are present to run your code :

http://jsfiddle.net/manseuk/RTrgN/2/

functiongetUrlVars() {
    var vars = [],
        hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

functionrunMe() {

    var myVal = getUrlVars()["direction"];


    if (myVal == "north") {

        document.getElementById('north').style.display = 'block';
    } else {

        document.getElementById('south').style.display = 'none';

    };
}

window.onload = runMe; // run the code once the DOM is loaded

Solution 4:

create a function, and assign it to the body's onload event. Also fix the styles from the if a bit.

<head><scripttype="text/javascript">functiongetUrlVars()
        {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        functionmyOnLoad()
        {
            var myVal = getUrlVars()["direction"];


            if(myVal == "north") {
                document.getElementById('north').style.display = 'block'; 
                document.getElementById('south').style.display = 'none';
            }else {
                document.getElementById('north').style.display = 'none'; 
                document.getElementById('south').style.display = 'block';
            }
        }
        </script></head><bodyonload="myOnLoad()"><divid="north">Some text</div><divid="south">Some text</div></body>

JavaScript Gen

Show Div Based On If Statement

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Show Div Based On If Statement"