Uncaught SyntaxError: Unexpected end of input js

Question

I Have this code where i keep getting the same error after trying everything. I have also checked other similar stackoverflow question but still no answer worked please can you help me out

ERROR: Uncaught SyntaxError: Unexpected end of input

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>

this code not giving any issue. add your css also in snippet — Avinash Dalvi, Jun 22 '20 at 11:17

score 3 · Answer 1 · answered Jun 22 '20 at 11:39

The code below should do the trick. I replaced the javascript links with # links and prevent the URL from changing on click by using the preventDefault function. Give it a try.

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>

score 2 · Accepted Answer · answered Jun 22 '20 at 11:33

2

you need to do

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

javascript:void is an incomplete statement, that's why you run into problems here.

answered Jun 22 '20 at 11:33

Oliver Gebert

1,166
1
6
20

`void` is an operator, not a function. – Teemu Jun 22 '20 at 11:35
that's true, but still: https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean - you could write "void 0" as well. – Oliver Gebert Jun 22 '20 at 11:38

Uncaught SyntaxError: Unexpected end of input js

2 Answers2