Ошибка Unexpected token } указывает на тег HTML?

Question

[Вадим Ремин]

После корректировки скриптов js появилась ошибка Uncaught SyntaxError: Unexpected token } , которая указывает, как это ни странно, на тег в собственно html коде. Ошибка возникает при клике на пункты меню навигации (в верхнем сиреневом блоке). Не пойму, что её вызывает?

Линк на верстку:
adaptive.dkudrin.com

Заранее спасибо!

Answer 1

[Alexander Sydorenko]

Вот так

document.getElementById('idivNavigation').innerHTML ='<ul class="navMenu">' +
        '<li class="navMenuItem"><a href="#Home" id ="idHome" onclick="changeButtonsBackground("idHome")">HOME</a></li>' +
        '<li class="navMenuItem"><a href="#About" id ="idAbout" onclick="changeButtonsBackground("idAbout")">ABOUT</a></li>' +
        '<li class="navMenuItem"><a href="#Work" id ="idWork" onclick="changeButtonsBackground("idWork")">WORK</a></li>' +
        '<li class="navMenuItem"><a href="#Blog" id ="idBlog" onclick="changeButtonsBackground("idBlog")">BLOG</a></li>' +
        '<li class="navMenuItem"><a href="#Contact" id ="idContact" onclick="changeButtonsBackground("idContact")">CONTACT</a></li>' +
        '</ul>';

А именно это
onclick="changeButtonsBackground("idHome")", кавычки, нельзя делать. Там надо экранировать одинарную кавычку..
Как то так
onclick="changeButtonsBackground(\'idHome\')"

Comments

[Вадим Ремин]

Помогло, спасибо огромное!

[Alexander Sydorenko]

Очень рад что помогло! :)

Answer 2

[Alex]

Лучше делать вот так:
<a onclick="changeButtonsBackground()">Home</a>

Тогда в функцию приедет атрибут типа event, который можно будет использовать так:

function changeButtonsBackground(event){
    event.target.style.backgroundColor="#8e58a3";
}

Но добавлять стили через js не лучшее решение. Лучше написать в CSS примерно так:

.navMenuItem.active {
    background-color: #8e58a3;
}

А в JS делать так:

function changeButtonsBackground(event){
    event.target.classList.add('active');
}

Comments

[Вадим Ремин]

Ок, попробую, спасибо!

Answer 3

[Константин Величко]

Ошибка где то в этом говнокоде

/*========= Первичная загрузка окна ======================================*/
window.onload=function(){
    fResize();
};

/*========= При уменьшении размера окна Меню заменяется кнопкой ==========*/
window.onresize=function(){
    fResize();
    fScroll();
};

function fResize() {
    if (window.innerWidth<722){
        document.getElementById('idivNavigation').innerHTML = '<i class="fa fa-bars fa-2x naviButton"></i>';
    }
    else {
        document.getElementById('idivNavigation').innerHTML ='<ul class="navMenu">' +
        '<li class="navMenuItem"><a href="#Home" id ="idHome" onclick="changeButtonsBackground("idHome")">HOME</a></li>' +
        '<li class="navMenuItem"><a href="#About" id ="idAbout" onclick="changeButtonsBackground("idAbout")">ABOUT</a></li>' +
        '<li class="navMenuItem"><a href="#Work" id ="idWork" onclick="changeButtonsBackground("idWork")">WORK</a></li>' +
        '<li class="navMenuItem"><a href="#Blog" id ="idBlog" onclick="changeButtonsBackground("idBlog")">BLOG</a></li>' +
        '<li class="navMenuItem"><a href="#Contact" id ="idContact" onclick="changeButtonsBackground("idContact")">CONTACT</a></li>' +
        '</ul>';
    }

    window.varHome = $('#idivPurpleContainer').offset().top;
    window.varAbout = $("#idivGreenContainer").offset().top;
    window.varWork = $('#idivWhiteContainer').offset().top;
}


/*========= При клике на пункт Меню он подсвечивается темным Бекграундом =====*/

var itemId;
function changeButtonsBackground(itemId){
    document.getElementById('idHome').style.backgroundColor="#8e58a3";
    document.getElementById('idAbout').style.backgroundColor="#8e58a3";
    document.getElementById('idWork').style.backgroundColor="#8e58a3";
    document.getElementById('idBlog').style.backgroundColor="#8e58a3";
    document.getElementById('idContact').style.backgroundColor="#8e58a3";
    document.getElementById(itemId).style.backgroundColor ="#5f376f";
}

/*========= Плавный Скроллинг до Якоря при клике на пункт Меню ===============*/
/*
$(function($) {
    $.localScroll({
        duration: 1000,
        hash: false });
});
 */
/*========= При Скроллинге подсвечиваеются текущие пункты Меню ===============*/
window.onscroll=function() {
    fScroll();
};
function fScroll() {
    var vScrollPosition;
    vScrollPosition = $(window).scrollTop() + 200; // Добавляем 200 пикселей

    if (vScrollPosition < window.varAbout) {
        document.getElementById('idHome').style.backgroundColor = "#5f376f";
        document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
        document.getElementById('idWork').style.backgroundColor = "#8e58a3";
        document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
        document.getElementById('idContact').style.backgroundColor = "#8e58a3";

    }
    else if (vScrollPosition > window.varAbout && vScrollPosition < window.varWork) {
        document.getElementById('idHome').style.backgroundColor = "#8e58a3";
        document.getElementById('idAbout').style.backgroundColor = "#5f376f";
        document.getElementById('idWork').style.backgroundColor = "#8e58a3";
        document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
        document.getElementById('idContact').style.backgroundColor = "#8e58a3";
    }
    else if (vScrollPosition > window.varWork) {
        document.getElementById('idHome').style.backgroundColor = "#8e58a3";
        document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
        document.getElementById('idWork').style.backgroundColor = "#5f376f";
        document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
        document.getElementById('idContact').style.backgroundColor = "#8e58a3";
    }
}

Скорее всего в районе changeButtonsBackground(itemId)
И такой вопрос зачем вам JQ?

В этой функции хватило бы элментарного скрипта что то вроде

$('.navMenuItem').click(function(event) {
	//Код анимированного перехода, можно даже без плугинов сделать

	$('.navMenuItem').removeClass('navMenuItem_active');
	$(this).addClass('navMenuItem_active');
});

.navMenuItem_active {
   background-color: #8e58a3;
}

Comments

[Вадим Ремин]

Ок, спасибо, буду пробовать!