JS Karussell - Uncaught Syntaxerror: Unerwartete Kennung

Ich erhalte einen Fehler für diesen Code ('Uncaught Syntaxerror: Unerwartete Kennung' - index.html: 1):JS Karussell - Uncaught Syntaxerror: Unerwartete Kennung

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="code.js"></script> 
     <link rel="stylesheet" href="style.css" type="text/css" /> 
    </head> 
    <body> 
     <header> 
      <div class="bgImg0" id="header"> 
       <div id="carousel-dots" class="bg-dark txt-center"> 
        <div class="dot bg-base-color pointer fast-tr" id="selected_dot"></div> 
        <div class="dot bg-base-color pointer fast-tr"></div> 
        <div class="dot bg-base-color pointer fast-tr"></div> 
        <div class="dot bg-base-color pointer fast-tr"></div> 
        <div class="dot bg-base-color pointer fast-tr"></div> 
       </div> 
      </div> 
     </header> 
    </body> 
</html>

CSS

:root { 
    --main-color1: #CCA43B; 
    --base-color: dodgerblue; 
    --dark: #363636; 
    --slow-tr: all 0.5s linear; 
} 
html, body, header { 
    width: 500px; 
    height: 500px; 
} 
#header { 
    width: 500px; 
    height: 200px; 
    background-color: var(--dark); 
} 
#header::before { 
    content: ""; 
    position: absolute; 
    width: 500px; 
    height: 500px; 
    z-index: -1; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: top; 
    background-attachment: fixed; 
    -webkit-transition: var(--slow-tr); 
    -moz-transition: var(--slow-tr); 
    -ms-transition: var(--slow-tr); 
    -o-transition: var(--slow-tr); 
    transition: var(--slow-tr); 
} 
#carousel-dots { 
    height: 30px; 
} 
.dot { 
    margin: 0 5px; 
    width: 10px; 
    height: 10px; 
    display: inline-block; 
    border-radius: 50%; 
    opacity: 0.4; 
} 
.dot:hover { 
    opacity: 1; 
    background-color: var(--main-color1); 
} 
#selected_dot { 
    opacity: 1; 
} 
#header.bgImg0::before { 
    background-color: red; 
} 
#header.bgImg1::before { 
    background-color: orange; 
} 
#header.bgImg2::before { 
    background-color: green; 
} 
#header.bgImg3::before { 
    background-color: purple; 
} 
#header.bgImg4::before { 
    background-color: yellowgreen; 
} 
.bg-base-color { 
    background-color: var(--base-color); 
} 
.pointer { 
    cursor: pointer; 
} 
.txt-center { 
    text-align: center; 
}

var header_element; 
var selected_dot; 
var headerCarousel_flag = { 
    value: 0 
}; 
$(document).ready(function(){ 
    header_element = document.getElementById("header"); 
    selected_dot = document.getElementsByClassName("dot"); 
    var j = 0; 
    for(; j < 5 ; j++){ 
     selected_dot[j].setAttribute("onclick", "next('header', " + headerCarousel_flag + ", 'bgImg')"); 
    } 
    Carousel(header_element, headerCarousel_flag, 'bgImg'); 
}); 
function Carousel(element, flag, class_name){ 
    var element_id = $(element).attr('id'); 
    if(flag.value == 0){ 
     next(element_id, flag, class_name); 
    } 
    else if(flag.value == 1){ 
     next(element_id, flag, class_name); 
    } 
    else if(flag.value == 2){ 
     next(element_id, flag, class_name); 
    } 
    else if(flag.value == 3){ 
     next(element_id, flag, class_name); 
    } 
    else { 
     next(element_id, flag, class_name); 
    } 
    setTimeout(function(){ 
     Carousel(element, flag, class_name); 
    }, 3000); 
} 
function next(element_id, flag, class_name){ 
    var element_obj = document.getElementById(element_id); 
    element_obj.className = class_name + flag.value; 
    resetIDs(); 
    selected_dot[flag.value].id = "selected_dot"; 
    flag.value++; 
    if(flag.value == 5) flag.value = 0; 
} 
function resetIDs(){ 
    var i = 0; 
    for(; i < 5; i++){ 
     selected_dot[i].id = ""; 
    } 
}

Entschuldigung für das Einfügen eines großen Teils des Codes, aber an dieser Stelle bin ich mir wirklich nicht sicher, was falsch ist.

Also die Sache ist, ich mache Art eines Karussells, die Hintergrundfarbe ändert und es sollte sowohl nach 3 Sekunden ändern (wie jetzt), sondern auch, wenn ein Benutzer klickt auf div die einen Punkt darstellt. Und wenn ich darauf klicke, bekomme ich einen Fehler und nichts passiert, es ändert sich weiterhin alle 3 Sekunden. Ich vermute also, dass ich die falschen Argumente weitergeben könnte (tho denke ich würde dann eine andere Fehlermeldung bekommen). Irgendwelche Adleraugen da draußen, die sehen, was ich vermisse?

Quelle

2017-10-05 Anonymous

Sie übergeben eine Zeichenfolge als Parameter, während Ihr Code eine Funktion erwartet. – Roberrrt

Ty @ Roberrrt. Wenn ich also 'selected_dot [j] .setAttribute (" onclick "," next ('header', "+ headerCarousel_flag +", 'bgImg') ");' mit 'selected_dot [j] .setAttribute (" onclick ", next ('header', headerCarousel_flag, 'bgImg')); 'Ich bekomme keinen Fehler, aber stattdessen bekomme ich meine nächste() Funktion 5 Mal aufgerufen, wenn ich den Browser öffne, aber wenn ich auf Punkt klicke, passiert nichts:/ –

Sie als Parameter ein String übergeben, während der Code eine Funktion

selected_dot[j].setAttribute("onclick", "next('header', " + headerCarousel_flag + ", 'bgImg')");

erwartet Ist Ihr Täter

selected_dot[j].addEventListener('click', function() { 
     next('header', headerCarousel_flag, 'bgImg'); 
})

Sollte es beheben.

Dieser Code tut nicht, was Sie wollen, aber es löst Ihren aktuellen Fehler.

Quelle

2017-10-05 13:00:57 Roberrrt

Ja , müssen noch meine _headerCarousel_ Werte korrigieren, aber jetzt, da dies funktioniert, sollte es einfach sein. Tyvm –

JS Karussell - Uncaught Syntaxerror: Unerwartete Kennung

Antwort

Verwandte Themen