I'm having trouble getting a button with onclick method that calls a js function to work

Question

The basic premise of this app is like a radio that saves stations to certain channels to be recalled when clicked. I keep getting the index.html:111 Uncaught ReferenceError: saveOne is not defined at HTMLButtonElement.onclick (index.html:111) error in the console and also when I mouse over the function in my VSCode i get this error: 'saveOne' is declared but its value is never read.ts(6133)

I've looked everywhere for a while now and can't find any solution or clear explanation as to why it's not working.

Thanks!

//HTML// sorry I'm new to stack overflow ::facepalm:: I assure you the html is accurate, but I don't understand how to get it to work since im a stack overflow noob.

button onclick="" value="90.1" type="button" id="channel1" class="btn btn-secondary">One /button>

button type="button" onclick="saveOne()" id="save1" class="btn btn-dark save_btns">Save1 /button>

// JS FILE //

let channel1 = document.getElementById("channel1").value

function saveOne(){
    let saveChnl1 = current_station.innerHTML
    channel1 = saveChnl1
    // console.log(channel1) //100.3
    return channel1
    
}

How the HTML and JavaScript files come together? Of you are using TypeScript, then you must have a build step of some sort, right? — acdcjunior, Sep 12 '21 at 23:44
@Someone_who_likes_SE ... know that javascript generally does not explicitly need `;`, as javacript handles _automatic semicolon insertion_, or [ASI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion) — Paul T., Sep 13 '21 at 01:08
@PaulT. [without the semicolon a lot of weird stuff can happen](https://stackoverflow.com/a/31013390/15578194) — no ai please, Sep 13 '21 at 01:08
@Someone_who_likes_SE ... I believe it. Thanks for the link info. I use semicolons myself with javascript (habit of C/C++, Java, and PHP coding), as I don't like to rely on the automatic handling, but I'm sure weird things can surely happen. I've seen quite a bit of javascript code without terminating `;` usage over the years. (even within some js frameworks) — Paul T., Sep 13 '21 at 01:13
It's not the semicolon... even with those in place it still has the same errors. ty tho! — JHer117, Sep 13 '21 at 20:32

Wowkster · Answer 1 · 2021-09-17T03:16:31.080

OK there are so many things wrong with your question so I'll help you out.

Firstly, your html is completely invalid as it is missing correct open and close brackets.

button onclick="" value="90.1" type="button" id="channel1" class="btn btn-secondary">One /button>

button type="button" onclick="saveOne()" id="save1" class="btn btn-dark save_btns">Save1 /button>

Should be

<button value="90.1" type="button" id="channel1" class="btn btn-secondary">One</button>

<button type="button" onclick="saveOne()" id="save1" class="btn btn-dark save_btns">Save1</button>

Secondly, if you import your script correctly, you wont get any not defined errors.

Make sure that in your html head tag, you have a script tag with a src attribute like so:

<script src="script.js"></script>

and make sure that the path is correct. For information about html pathing, see HTML File Paths

Lastly, the javascript you provided wasn't valid either, but I'll assume that it uses some kind of global reference.

The JS file is loaded and does work, I always test it out with an alert to be sure, and I have other functions running that work just fine. Ty tho! — JHer117, Sep 13 '21 at 20:30

I'm having trouble getting a button with onclick method that calls a js function to work

1 Answers1