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
– Avinash Dalvi, Commented Jun 22, 2020 at 11:17

d0zinator · Accepted Answer · 2020-06-22 11:39:54Z

3

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>

answered Jun 22, 2020 at 11:39

d0zinator

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oliver Gebert · Accepted Answer · 2020-06-22 11:33:55Z

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, 2020 at 11:33

Oliver Gebert

1,1761 gold badge6 silver badges20 bronze badges

2 Comments

Teemu Over a year ago

void is an operator, not a function.

Oliver Gebert Over a year ago

that's true, but still: stackoverflow.com/questions/1291942/… - you could write "void 0" as well.

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected end of input js

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related