"if (location.href!= example.com/page1 || example.com/page2)" Изменить элемент CSS

Question

Когда я использую подобный код JS (2 сразу ниже), мой вывод неверен или не отображается. Вот мои коды под вопросом:

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

или с!= и!==

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

Вот как я использую его с другим кодом (упрощенно)

<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>

Либо ничего не происходит, либо элемент не работает должным образом на других страницах.

Что я делаю неправильно?

Больше информации: я делаю тему Tumblr, и есть страницы, которые будут иметь определенные сообщения с разными характеристиками при просмотре на разных страницах. Я должен иметь этот код в топе.

Кто-то предложил это: решено

<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

Помимо очевидной синтаксической ошибки (например, вы закрыли кавычку после website.com/page2), есть несколько вещей, которые вы можете захотеть сделать, чтобы немного сузить это.

Во-первых, вы можете получить только один раз location.href и сохранить его в переменной. Пока вы это делаете, вы можете использовать toLowerCase(), чтобы вы точно знали, что сравниваете яблоки с яблоками:

var currLoc = location.href.toLowerCase();

Ваша логика также немного интересна... сначала вы говорите: "Если мы не на странице 1, используйте синий. Если мы не на странице 2, используйте зеленый. Если мы не на странице 1, или строка - страница 2, не используйте цвет."

Итак, в конце всего этого, цвет не отображается, потому что самое последнее, что вы говорите, это очистить цвет, если вы не на странице 1 или 2? Эта часть не очень понятна и, вероятно, является частью проблемы, в дополнение к синтаксическим ошибкам. Обратите внимание, что при оценке этой строки:

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

Вы говорите: "если location.href не является page1 ИЛИ если существует строка ("website.com/page2")"

Если вы тестируете location.href в обоих случаях, вы хотите:

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

как я предполагаю, что вы хотите сказать.

Итак, попробуйте изменить ваш скрипт на что-то вроде этого:

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

Вы не закрываете свои операторы if должным образом.

Это:

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

Должно выглядеть так:

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

и это:

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

Должно выглядеть так:

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

Если это все еще не работает, я предлагаю сделать это в верхней части вашей функции.

alert(location.href);

и увидеть, что location.href фактически равно.

редактировать

Теперь вместо этого:

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

Это должно выглядеть так:

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

Мы медленно добираемся туда!