As mentioned in konijn's answer konijn's answer the simplest and cleanest way would be to change '#resu' to '#result' and then use this.id to extrapolate the other two id's.
However without modifing your html I condensed most of you duplicate code into a function which take parameters for the things that change.
window.onload = function() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
if(this.id == "aboutnav") handleIDAction('abouttitle', 'a', 'about');
elseif(this.id == "routenav") handleIDAction('routetitle', 'b', 'route');
elseif(this.id == "enternav") handleIDAction('entertitle', 'c', 'enter');
elseif(this.id == "racedaynav") handleIDAction('racedaytitle', 'd', 'raceday');
elseif(this.id == "gallerynav") handleIDAction('gallerytitle', 'e', 'gallery');
elseif(this.id == "newsnav") handleIDAction('newstitle', 'f', 'news');
elseif(this.id == "resultsnav") handleIDAction('resultstitle', 'g', 'resu');
elseif(this.id == "contactnav") handleIDAction('contacttitle', 'h', 'contact');
}
};
function handleIDAction(titleId, letterId, scrollId){
$('.sectitle, .roger').css('color', 'grey');
$( '#'+titleId+', #'+letterId ).css('color', 'blue');
$('html, body').animate( { scrollTop: $('#'+scrollId).offset().top - 90 }, 2000);
}
As mentioned in konijn's answer the simplest and cleanest way would be to change '#resu' to '#result' and then use this.id to extrapolate the other two id's.
However without modifing your html I condensed most of you duplicate code into a function which take parameters for the things that change.
window.onload = function() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
if(this.id == "aboutnav") handleIDAction('abouttitle', 'a', 'about');
elseif(this.id == "routenav") handleIDAction('routetitle', 'b', 'route');
elseif(this.id == "enternav") handleIDAction('entertitle', 'c', 'enter');
elseif(this.id == "racedaynav") handleIDAction('racedaytitle', 'd', 'raceday');
elseif(this.id == "gallerynav") handleIDAction('gallerytitle', 'e', 'gallery');
elseif(this.id == "newsnav") handleIDAction('newstitle', 'f', 'news');
elseif(this.id == "resultsnav") handleIDAction('resultstitle', 'g', 'resu');
elseif(this.id == "contactnav") handleIDAction('contacttitle', 'h', 'contact');
}
};
function handleIDAction(titleId, letterId, scrollId){
$('.sectitle, .roger').css('color', 'grey');
$( '#'+titleId+', #'+letterId ).css('color', 'blue');
$('html, body').animate( { scrollTop: $('#'+scrollId).offset().top - 90 }, 2000);
}
As mentioned in konijn's answer the simplest and cleanest way would be to change '#resu' to '#result' and then use this.id to extrapolate the other two id's.
However without modifing your html I condensed most of you duplicate code into a function which take parameters for the things that change.
window.onload = function() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
if(this.id == "aboutnav") handleIDAction('abouttitle', 'a', 'about');
elseif(this.id == "routenav") handleIDAction('routetitle', 'b', 'route');
elseif(this.id == "enternav") handleIDAction('entertitle', 'c', 'enter');
elseif(this.id == "racedaynav") handleIDAction('racedaytitle', 'd', 'raceday');
elseif(this.id == "gallerynav") handleIDAction('gallerytitle', 'e', 'gallery');
elseif(this.id == "newsnav") handleIDAction('newstitle', 'f', 'news');
elseif(this.id == "resultsnav") handleIDAction('resultstitle', 'g', 'resu');
elseif(this.id == "contactnav") handleIDAction('contacttitle', 'h', 'contact');
}
};
function handleIDAction(titleId, letterId, scrollId){
$('.sectitle, .roger').css('color', 'grey');
$( '#'+titleId+', #'+letterId ).css('color', 'blue');
$('html, body').animate( { scrollTop: $('#'+scrollId).offset().top - 90 }, 2000);
}
As mentioned in konijn's answer the simplest and cleanest way would be to change '#resu' to '#result' and then use this.id to extrapolate the other two id's.
However without modifing your html I condensed most of you duplicate code into a function which take parameters for the things that change.
window.onload = function() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
if(this.id == "aboutnav") handleIDAction('abouttitle', 'a', 'about');
elseif(this.id == "routenav") handleIDAction('routetitle', 'b', 'route');
elseif(this.id == "enternav") handleIDAction('entertitle', 'c', 'enter');
elseif(this.id == "racedaynav") handleIDAction('racedaytitle', 'd', 'raceday');
elseif(this.id == "gallerynav") handleIDAction('gallerytitle', 'e', 'gallery');
elseif(this.id == "newsnav") handleIDAction('newstitle', 'f', 'news');
elseif(this.id == "resultsnav") handleIDAction('resultstitle', 'g', 'resu');
elseif(this.id == "contactnav") handleIDAction('contacttitle', 'h', 'contact');
}
};
function handleIDAction(titleId, letterId, scrollId){
$('.sectitle, .roger').css('color', 'grey');
$( '#'+titleId+', #'+letterId ).css('color', 'blue');
$('html, body').animate( { scrollTop: $('#'+scrollId).offset().top - 90 }, 2000);
}