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

Question

我有这段代码，在尝试了所有操作后我一直收到同样的错误。我还检查了其他类似的stackoverflow问题，但仍然没有答案，请你帮帮我

错误： 未捕获的语法错误：输入意外结束

Javascript

const 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 => {&nbsp; &nbsp; color.addEventListener('click', (e) => {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; console.log(color.dataset.color);&nbsp; &nbsp; });});.s-colors {&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; 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&nbsp;href="javascript:void(0)"javascript:void 是一个不完整的陈述，这就是您在这里遇到问题的原因。