JS 轮播 - 未捕获的语法错误：意外的标识符

Question

I'm getting an error for this code(' Uncaught SyntaxError: Unexpected identifier' -- index.html:1 ):我收到此代码的错误（' Uncaught SyntaxError: Unexpected identifier' -- index.html:1 ）：

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

Sorry for pasting a hudge chunk of code, but at this point I'm really not sure what is wrong.很抱歉粘贴了一大段代码，但此时我真的不确定出了什么问题。

So the thing is, I'm making kind of a carousel that changes background color and it should change both after 3 seconds (as it does now) but also when a user clicks on div that represents a dot.所以问题是，我正在制作一种改变背景颜色的旋转木马，它应该在 3 秒后（就像现在一样）以及当用户单击代表一个点的div 时改变。 And when I click on it I get error and nothing happens, it continues to change every 3 seconds.当我点击它时，我收到错误并且没有任何反应，它每 3 秒继续更改一次。 So I suppose I could be passing the wrong arrguments (tho I think I'd get a different error msg then).所以我想我可能会传递错误的参数（虽然我想我会得到一个不同的错误消息）。 Any eagle eyes out there that see what I'm missing?有没有鹰眼看到我错过了什么？

Answer 1

You're passing a string as a parameter while your code expects a function您将字符串作为参数传递，而您的代码需要一个函数

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

Is your culprit是你的罪魁祸首吗

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

Should fix it.应该修复它。

This code isn't doing what you want it to do, but it does solve your current error.这段代码没有做你想要它做的事情，但它确实解决了你当前的错误。

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