Dzięki za pomoc!
Udało mi się uporać z problemem załadowania treści z innych plików. Ładuje tylko treść z innych plików do odpowiedniego diva w index.html. Czyli tak jakby bazuje tylko na index.html otwartym cały czas. I tutaj przychodzi kolejny problem, kiedy chciałem oskryptować "inne" zakładki (te które się załadują po kliknięciu w menu, za pomocą ajax), moje skrypty nie wykrywają tych elementów i wyrzucają błąd. Mimo że one są po sprawdzeniu w chrome->inspect element, to błąd jest wyrzucany.
Jak mogę rozwiązać ten problem?
Mój scripts.js wygląda tak:
/*-------------------------------------- 3. Skicams --------------------------------------*/
var image1 = document.getElementById("cam-img-1");
var image2 = document.getElementById("cam-img-2");
var image3 = document.getElementById("cam-img-3");
var image4 = document.getElementById("cam-img-4");
function loadCameraImages() {
if (image1) {
var skicamsReq = new XMLHttpRequest();
skicamsReq.open('GET', 'https://makevoid-skicams.p.mashape.com/cams.json');
skicamsReq.setRequestHeader("X-Mashape-Key", "moj klucz");
skicamsReq.send(null);
skicamsReq.onreadystatechange = function () {
if (skicamsReq.readyState == 4) {
var video = JSON.parse(skicamsReq.responseText)
image1.src = video['14'].cams['56'].url;
image2.src = video['14'].cams['57'].url;
image3.src = video['159'].cams['479'].url;
image4.src = video['159'].cams['480'].url;
}
}
}
}
/*-------------------------------------- 4. Navigation --------------------------------------*/
var menu = document.getElementById('menu');
var siteContent = document.getElementById('site-content')
menu.addEventListener('click', getClickedItem, false);
function getClickedItem(e) {
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
var req = new XMLHttpRequest();
req.open('GET', (clickedItem + '.html'), true);
req.send(null);
req.onreadystatechange = function () {
if (req.readyState == 4) {
siteContent.innerHTML = req.responseText;
loadCameraImages();
}
}
var activeSite = document.querySelectorAll("#menu .active");
activeSite[0].className = "";
document.getElementById(clickedItem).parentElement.className = "active";
}
e.stopPropagation();
}
/*-------------------------------------- 5. Contact Form Validation --------------------------------------*/
var sendForm = document.getElementById("contact-form__send");
var contact_form_name = document.getElementById("contact-form__name");
sendForm.addEventListener('click', checkLength(contact_form_name, 1, 24));
function checkLength(field, min_l, max_l){
var userText = field.value;
if(userText.length >= min_l && userText.length <= max_l){
return true;
}else{
document.getElementById('error-message').innerHTML = "Error! Please enter " + field;
return false;
}
}