JS 輪播 - 未捕獲的語法錯誤：意外的標識符

Question

我收到此代碼的錯誤（' Uncaught SyntaxError: Unexpected identifier' -- index.html:1 ）：

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;
}

JS

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 = "";
    }
}

很抱歉粘貼了一大段代碼，但此時我真的不確定出了什么問題。

所以問題是，我正在制作一種改變背景顏色的旋轉木馬，它應該在 3 秒后（就像現在一樣）以及當用戶單擊代表一個點的div 時改變。 當我點擊它時，我收到錯誤並且沒有任何反應，它每 3 秒繼續更改一次。 所以我想我可能會傳遞錯誤的參數（雖然我想我會得到一個不同的錯誤消息）。 有沒有鷹眼看到我錯過了什么？

Answer 1

您將字符串作為參數傳遞，而您的代碼需要一個函數

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

是你的罪魁禍首嗎

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

應該修復它。

這段代碼沒有做你想要它做的事情，但它確實解決了你當前的錯誤。

JS 輪播 - 未捕獲的語法錯誤：意外的標識符

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-05 13:00:57

JS 輪播 - 未捕獲的語法錯誤：意外的標識符

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-05 13:00:57

解決方案1
1 已采納 2017-10-05 13:00:57