CODEWITHSUNDEEP
javascripthtmlcss
user1361154
user1361154

Reputation: 63

A Few Noob Javascript Questions

Hokay, so I have a website thats all working off of one static page, index.php. The content on the page is decided by the variables in the URL.

then I have a few that are a bit longer

I'm trying to make a script that will change the color of the nav button for the page that im currently on.

The script im working on gets the url of the page, uses .search to grab everything after ?. Then I string split and grab the second part (the part after the equal sign) , but this only works for the ones with 1 variable.

I was thinking something along the lines of an if statement checking to see if the parsed string has multiple "="s in it, and if it does grab the text after the last one. Something like that- idk I'm a total noob.

Also , is there anyway I can have the javascript setAttribute in the head, or does it need to be after the ID/class is declared?

<html>
<head>
<title>Test</title>
<style type="text/css">
.test {
color: yellow;
font-size: 5em;
}
</style>
<script type="text/javascript">
function parseUrl(url) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search;
var site=page.split("=")[1];

</script>
</head>
<body>
<ul>
<li id ="nav_home"><a href="testtest.html?site=home">Home</a>
<li id ="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li id ="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li id ="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
<li id ="nav_news"><a href="testtest.html?site=news"/>News<a/>
<li id ="nav_archive"><a href="testtest.html?site=news&action=archive"/>Archive<a/>
<script type="text/javascript">
document.getElementById("nav_" + site).setAttribute("class", "test");
</script>
</body>
</html>

Upvotes: 0

Views: 182

Answers (4)

aug
aug

Reputation: 11714

Why do you use javascript to look at the url when you could just make a PHP document and do a $_GET["site"]? These get variables are being passed via the server and you should be taking advantage of them.

Here's a tutorial on PHP explaining what I'm talking about more in-depth but just to give you an idea there are two different methods of passing variables via the server using PHP. There is $_GET and $_POST. The main difference between the two is what you see in your website right now. Everything after the ? in the URL represents a variable. If you wanted to get that variable in another PHP document you would simply do:

$variable = $_GET['site'];

One of the problems you were talking about was when you're dealing with multiple variables. Well with PHP it isn't really a problem... you just store it in a different variable.

$variable2 = $_GET['action'];

I think you should be able to handle it from there. If you need more help just ask.

Upvotes: 0

FajitaNachos
FajitaNachos

Reputation: 1020

I've used this script before to get the variables in a URL. (it's jquery)

    $.extend({
    getUrlVars: function(){
        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;
      },
    getUrlVar: function(name){
    return $.getUrlVars()[name];
  } 
});
var site = $.getUrlVar('site');
var news = $.getUrlVar('news');

I've seen this script on stackoverflow and http://www.backbonetechnology.com/blog/jquery/jquery-get-url-variables

There shouldn't be any problem setting the attribute in the head.Just use the selector.

document.getElementById("nav_" + site).css("class", "test");

Upvotes: 0

Moe Tsao
Moe Tsao

Reputation: 1054

Just want to refer back to the much upvoted solution: -- How can I get query string values in JavaScript?

And you may soon want to start use jQuery. Less cross-browser problem, do more, write less.

Lastly, placing the script right before the closing body tag is considered as a good practice. You may consider that. -- How does the location of a script tag in a page affect a JavaScript function that is defined in it?

Upvotes: 1

da_h-man
da_h-man

Reputation: 3

Not knowing the exact functionality of split, but there are two options: 1) the split just does one split, at the place it finds the "=" for the first time. 2) the split splits the string into multiple pieces, every time it finds a "=".

Assuming it's the 2nd option, then you'll get an array with all the substrings back. Example: Imagine you've got the string "?Variable1=this&variable2=that&variable3=somethingDifferent". If you split, you'll get an array with 4 strings:

  • "?variable1"
  • "this&variable2"
  • "that&variable3"
  • "somethingDifferent"

So what you really should do is perform a split with the "&" being the separator. Then, loop through all strings in your result array and split with the "=" being the separator. The first string of that result array will be you parameter (i.e. "variable1", "variable2") and the second string the value of that parameter.

Upvotes: 0

Related Questions