Hi guys, i’ve just finished to build this website, but i have a problem with the JS code that show the results price in the PREZZI section. It’s in conflict with the code of the slides images and i don’t understand why. Thanks.
LINK to the repo on github: https://github.com/Easaaa/HotelVittoria
LINK to the github pages: https://easaaa.github.io/HotelVittoria/
If you need specific help, provide the code and what you expect the result should be.
Oh really sorry. This is the code. The screenshot shows the PREZZI (in italian = prices in eng) section, when i click on the input the dropdown doesn’t works.
// SLIDE IMG INDEX PAGE. --- CONFLICT
var slide_index = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slide_index++;
if (slide_index > x.length) {
slide_index = 1
}
x[slide_index - 1].style.display = "block";
setTimeout(carousel, 3000);
}
//------------------
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 40) {
$('#topBtn').fadeIn();
} else {
$('#topBtn').fadeOut();
}
})
$('#topBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 800);
});
});
/*Dropdown Menu Prices*/
$('.dropdown-selection').click(function () {
$(this).attr('tabindex', 1).focus();
$(this).toggleClass('active');
$(this).find('.dropdown-menu-selection').slideToggle(300);
});
$('.dropdown-selection').focusout(function () {
$(this).removeClass('active');
$(this).find('.dropdown-menu-selection').slideUp(300);
});
$('.dropdown-selection .dropdown-menu-selection li').click(function () {
$(this).parents('.dropdown-selection').find('span').text($(this).text());
$(this).parents('.dropdown-selection').find('input').attr('value', $(this).attr('id'));
});
/*End Dropdown Menu*/
/* $('.dropdown-menu-selection li').click(function () {
var input = '<strong>' + $(this).parents('.dropdown-selection').find('input').val() + '</strong>',
msg = '<span class="msg">Hidden input value: ';
$('.msg').html(msg + input + '</span>');
}); */
// INPUT FORM
const input = document.querySelectorAll('input');
const inputSeason = input[0];
const inputPerson = input[1];
const inputView = input[2];
// Results
const imgResult = document.querySelector('.dinamic-img');
const roomFor = document.querySelector('.number');
const price = document.querySelector('.price');
const viewWord = document.querySelector('.view-word');
//LISTEN FOR SUBMIT AND LOGIC
document.getElementById('search-form').addEventListener('submit', searchOn);
function searchOn(e){
if(inputSeason.value === 'high-season' && inputPerson.value === 'single' && inputView.value === 'lake-view') {
window.alert("Sorry this rooms is not available.");
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'double' && inputView.value === 'lake-view') {
imgResult.setAttribute('src', 'images/rooms-index2.png');
roomFor.textContent = '2';
price.textContent = '€ 100';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'triple' && inputView.value === 'lake-view') {
imgResult.setAttribute('src', 'images/rooms-index2.png');
roomFor.textContent = '3';
price.textContent = '€ 130';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'quadruple' && inputView.value === 'lake-view') {
window.alert("Sorry this rooms is not available.");
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'single' && inputView.value === 'garden-view') {
window.alert("Sorry this rooms is not available.");
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'double' && inputView.value === 'garden-view') {
imgResult.setAttribute('src', 'images/rooms-index.jpg');
viewWord.textContent = 'giardino';
roomFor.textContent = '2';
price.textContent = '€ 96';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'triple' && inputView.value === 'garden-view') {
imgResult.setAttribute('src', 'images/rooms-index.jpg');
viewWord.textContent = 'giardino';
roomFor.textContent = '3';
price.textContent = '€ 125';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'quadruple' && inputView.value === 'garden-view') {
imgResult.setAttribute('src', 'images/rooms-index.jpg');
viewWord.textContent = 'giardino';
roomFor.textContent = '4';
price.textContent = '€ 160';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'single' && inputView.value === 'mountain-view') {
imgResult.setAttribute('src', 'images/rooms-index1.jpg');
viewWord.textContent = 'montagna';
roomFor.textContent = '1';
price.textContent = '€ 50';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'double' && inputView.value === 'mountain-view') {
imgResult.setAttribute('src', 'images/rooms-index1.jpg');
viewWord.textContent = 'montagna';
roomFor.textContent = '2';
price.textContent = '€ 96';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'triple' && inputView.value === 'mountain-view') {
imgResult.setAttribute('src', 'images/rooms-index1.jpg');
viewWord.textContent = 'montagna';
roomFor.textContent = '3';
price.textContent = '€ 110';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'high-season' && inputPerson.value === 'quadruple' && inputView.value === 'mountain-view') {
window.alert("Sorry this rooms is not available.");
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'single' && inputView.value === 'lake-view') {
imgResult.setAttribute('src', 'images/rooms-index2.png');
roomFor.textContent = '1';
price.textContent = '€ 76.50';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'double' && inputView.value === 'lake-view') {
imgResult.setAttribute('src', 'images/rooms-index2.png');
roomFor.textContent = '2';
price.textContent = '€ 90';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'triple' && inputView.value === 'lake-view') {
imgResult.setAttribute('src', 'images/rooms-index2.png');
roomFor.textContent = '3';
price.textContent = '€ 120';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'quadruple' && inputView.value === 'lake-view') {
window.alert("Sorry this rooms is not available.");
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'single' && inputView.value === 'garden-view') {
window.alert("Sorry this rooms is not available.");
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'double' && inputView.value === 'garden-view') {
imgResult.setAttribute('src', 'images/rooms-index.jpg');
viewWord.textContent = 'giardino';
roomFor.textContent = '2';
price.textContent = '€ 88';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'triple' && inputView.value === 'garden-view') {
imgResult.setAttribute('src', 'images/rooms-index.jpg');
viewWord.textContent = 'giardino';
roomFor.textContent = '3';
price.textContent = '€ 115';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'quadruple' && inputView.value === 'garden-view') {
imgResult.setAttribute('src', 'images/rooms-index.jpg');
viewWord.textContent = 'giardino';
roomFor.textContent = '4';
price.textContent = '€ 140';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'single' && inputView.value === 'mountain-view') {
imgResult.setAttribute('src', 'images/rooms-index1.jpg');
viewWord.textContent = 'montagna';
roomFor.textContent = '1';
price.textContent = '€ 45';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'double' && inputView.value === 'mountain-view') {
imgResult.setAttribute('src', 'images/rooms-index1.jpg');
viewWord.textContent = 'montagna';
roomFor.textContent = '2';
price.textContent = '€ 86';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'triple' && inputView.value === 'mountain-view') {
imgResult.setAttribute('src', 'images/rooms-index1.jpg');
viewWord.textContent = 'montagna';
roomFor.textContent = '3';
price.textContent = '€ 100';
document.querySelector('.results').style.visibility = "visible";
e.preventDefault();
}
else if(inputSeason.value === 'low-season' && inputPerson.value === 'quadruple' && inputView.value === 'mountain-view') {
window.alert("Sorry this rooms is not available.");
}
}
You are erroring out trying to run code on pages that do not have the DOM elements the code is looking for. That is, you have one script file for multiple pages.
There are many ways of dealing with this from super simple to more advanced. Very simple, would be to only load the code you need on the page you need it on. Or run code based on some condition (the URL, a data attribute, the state of a selector etc.). Also, I believe if everything was written in Jquery it would gracefully ignore missing DOM elements (i think they just become no-ops).
In your case, I don’t think it’s bad if you have 3 script files. One file for the scroll loaded on all pages, one for the carousel loaded only on index, and one for the rest loaded only on the prices page. If you also minify the files it is so little code I don’t think the extra requests are that bad.