未捕获的 SyntaxError：输入 js 的意外结束

Question

我有这段代码，在尝试了所有操作后我一直收到同样的错误。我还检查了其他类似的stackoverflow问题，但仍然没有答案，请你帮帮我错误： 未捕获的语法错误：输入意外结束Javascriptconst colors = document.getElementsByClassName('s-colors');for(var i = 0; i < colors.length; i++) {    colors[i].addEventListener('click', () => {            console.log(this.getAttribute("data-color"));    })}html<div class="pdt-color">    <h4>Color</h4>    <div class="colors">        <a href="javascript:void" class="s-colors" data-color="red"            style="background-color: red;"></a>        <a href="javascript:void" class="s-colors" data-color="black"            style="background-color: black;"></a>        <a href="javascript:void" class="s-colors" data-color="yellow"            style="background-color: yellow;"></a>        <a href="javascript:void" class="s-colors" data-color="blue"            style="background-color: blue;"></a>    </div></div>

Answer 1

下面的代码应该可以解决问题。我用 # 链接替换了 javascript 链接，并使用 preventDefault 函数防止 URL 在单击时更改。试试看。

const colors = document.querySelectorAll('.s-colors');

colors.forEach(color => {

    color.addEventListener('click', (e) => {

        e.preventDefault();

        console.log(color.dataset.color);

    });

});

.s-colors {

    width: 100px;

    height: 50px;

    display: inline-block;

}

<h4>Color</h4>

<a href="#" class="s-colors" data-color="red" style="background-color: red;"></a>

<a href="#" class="s-colors" data-color="black" style="background-color: black;"></a>

<a href="#" class="s-colors" data-color="yellow" style="background-color: yellow;"></a>

<a href="#" class="s-colors" data-color="blue" style="background-color: blue;"></a>

Answer 2

你需要做

<a href="javascript:void(0)"

javascript:void 是一个不完整的陈述，这就是您在这里遇到问题的原因。