Just nu i M3-nätverket
Jump to content

Javascript-problem big time


Lothlórien
 Share

Recommended Posts

Jag har tåv script på min hemsida. Ett styr menyn och det andra styr ett enkelt fotoalbum. Det funderade under flera veckor men nu har det hänt nåt som gör att scripten inte gör det de ska. Jag har inte varit inne i scripten och ändrat.

 

Så här ser head ut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta charset="utf-8">
<title>kyrkoruiner.se</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="keywords" content="kyrkoruin, kyrkoruiner,ruin, ruiner, kyrka, kyrkor, gravar, gravstenar, gravhällar, domkyrka, domkyrkor, runor, runstenar">
<link rel="shortcut icon" href="bilder/favicon.ico">

<link href="kyrkomain.css" rel="stylesheet" type="text/css">
<link href="mediaqueries.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="album.js"></script>
<script type="text/javascript" src="meny.js"></script>

</head>

 

javascriptet till menyn:

/* Open when someone clicks on the span element */
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}

 

Och till albumet: 

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}  

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}}

 

och include/header.php

<div id="header">
    <a href="index.php"><h1>Kyrkoruiner.se</h1></a>

</div>

<div id="header_meny">
    
<div id="menybox">
    
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <div class="overlay-content">
    
        <?php include 'meny/meny.php';?>
    
  </div>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

Kan någon hjälpa mig med mitt problem? Jag är nybörjare på detta så va snälla ;)

Link to comment
Share on other sites

album.js slänger ett fel om man kollar js-konsollen när sidan laddas. På rad 28 är det en måsvinge för mycket, alltså }} istället för }. Ta bort en av dem och testa igen.

Link to comment
Share on other sites

Tack men det hjälpte inte. Eftersom båda scripten slutade fungera samtidigt känns det som det är nåt annat och inte koden i scripten.. :(

Link to comment
Share on other sites

På 2018-10-02 på 22:02, skrev Lothlórien:

Tack men det hjälpte inte. Eftersom båda scripten slutade fungera samtidigt känns det som det är nåt annat och inte koden i scripten.. :(

 

Fast om du har syntaxfel i album.js så kan det absolut förhindra att resten av dina script körs.

 

Du har fortfarande fel i album.js, man ser det i js-konsollen när man laddar sidan. Dina slide-element blir inte selectade i showSlides eftersom js-koden körs innan HTML:en har hunnit rendera, är min gissning. Så slides blir undefined och när du försöker ändra style på dem så smäller det.

 

Du måste vänta på att DOM:en är redo innan du kan börja selecta element från den. Du kan lägga en onload-handler runt det första anropet till showSlides som görs vid sidladdning, alltså såhär:

 

window.onload = function() {
  showSlides(slideIndex);
};

 

Edited by ChromaWoods
Rättade felaktig kod
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share



×
×
  • Create New...