Getting an error on a line with function

[toolman]

Hi there,

I have the following fiddle which shows monthly/yearly prices and toggles between the two.

Edit fiddle - JSFiddle - Code Playground

It all works fine, except I am getting an error on this line:

function flip() {

This is the error I’m getting:

Any ideas what is wrong with this line?

Thanks

[James_Hibbard]

That is likely coming from ESLint or whatever linter you are using.

no-unused-vars - ESLint - Pluggable JavaScript Linter

The reason you are seeing this is that you have defined flip, but you are calling it using an in-line event handler (that ESLint cannot see).

<input type="radio" id="r-monthly" name="yc-form-switch" value="monthly" onclick="flip()" checked />
<input type="radio" id="r-yearly" name="yc-form-switch" value="yearly" onclick="flip()" />

To get around it, use eaddEventListener.

<input type="radio" id="r-monthly" name="yc-form-switch" value="monthly" checked>
<input type="radio" id="r-yearly" name="yc-form-switch" value="yearly">

And in your JS:

const radioButtons = document.querySelectorAll('input[name="yc-form-switch"]');
radioButtons.forEach((radioButton) => {
  radioButton.addEventListener('change', flip);
});

HTH

[toolman]

Hi,

Thank you for the reply, that has worked perfectly