“if (location.href != example.com/page1 || example.com/page2)” Change CSS element

Question

When I use these similar JS code (the 2 immediately below), my output is wrong or doesn't show. Here is my codes in question:

if (location.href != "website.com/page1" || "website.com/page2")
   {
     element.style.backgroundColor='none';
   }

or with != and !==

if (location.href != "website.com/page1" || location.href != "website.com/page2")
   {
     element.style.backgroundColor='none';
   }

Here is how I'm using it with other code (simplified)

<script>
var element = document.getElementbyId('idElement');

if (location.href != "website.com/page1")
   {
     element.style.backgroundColor='blue';
   }
if (location.href != "website.com/page2")
   {
     element.style.backgroundColor='green';
   }
 //HERE'S WHERE I PUT IT
if (location.href != "website.com/page1" || "website.com/page2")
   {
     element.style.backgroundColor='none';
   }
 </script>

Either nothing happens or the element doesn't work properly on other pages.

What am I doing wrong?

More Info: I'm making a Tumblr theme and there are pages that will have certain post with different characteristics when viewed on different pages. I have to have this code in the top.

Someone Suggested This: SOLVED

<script>
     window.onload = function ()

 var element = document.getElementbyId('idElement');

 if (location.href != "website.com/page1" && location.href != "website.com/page2") 
    {
       element.style.backgroundColor='none'; 
    } 
  if (location.href == "website.com/page1") 
    {
       element.style.backgroundColor='blue'; 
    }
  if (location.href == "website.com/page2") 
        { 
       element.style.backgroundColor='green'; 
    }

</script> 

Answer 1

Aside from obvious syntactic error (for example, you left off a closing quotation mark after website.com/page2), there are a few things you might want to do, to narrow this down a bit.

For one thing, you might want to only get the location.href once and store that in a variable. While you're doing that, you could use toLowerCase() on it, so that you know for certain you're comparing apples to apples:

var currLoc = location.href.toLowerCase();

Your logic is also a bit interesting... first you're saying, "If we're not on page1, use blue. If we're not on page2, use green. If we're not on page1 or string is page2, use no color."

So, at the end of it all, no color is showing up because the very last thing you're saying is to clear the color if you're not on page1 or page2? That part is not terribly clear and is probably part of the problem, in addition to the syntax errors. Note that, when evaluating this line:

if (location.href != "website.com/page1" || "website.com/page2)

you're saying "if location.href isn't page1 OR if String("website.com/page2") exists"

If you're testing location.href in both cases, you want:

if (location.href != "website.com/page1" && location.href != "website.com/page2")

as I assume what you mean to say.

So, try changing your script to something like this:

var element = document.getElementbyId('idElement');
var currLoc = location.href.toLowerCase();

// let's save this in a var, too, so you're only changing color once!
var toColor = "none"; 

if (currLoc != "website.com/page1") {
    toColor = 'blue';
}
if (currLoc != "website.com/page2") {
    toColor = 'green';
}
//HERE'S WHERE I PUT IT
if (currLoc != "website.com/page1" && currLoc != "website.com/page2") {
    toColor = 'none';
}

element.style.backgroundColor = toColor;

Answer 2

You're not closing your if statements properly.

This:

if (location.href != "website.com/page1" || "website.com/page2)

Should look like this:

if (location.href != "website.com/page1" || "website.com/page2")

and this:

if (location.href != "website.com/page1" || location.href != "website.com/page2)

Should look like this:

if (location.href != "website.com/page1" || location.href != "website.com/page2")

If it still doesn't work, I suggest doing this at the top of your function.

alert(location.href);

and seeing what location.href actually equals.

edit

Now instead of this:

(location.href != "website.com/page1" || "website.com/page2")

It needs to look like this:

(location.href != "website.com/page1" || location.href != "website.com/page2")

We're slowly getting there!