Is "choose" a reserved keyword in JavaScript?

Question

I'll explain myself: I'm building a simple web, and at some point in the HTML I have this

<button id="choose" type="button" onclick="choose()">Choose</button>

In the <head> I added a script file so it knows where to find the choose() function

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

And lastly in that scripts.js file I defined the next function:

function choose() {
    choices = document.getElementById("choices");
    console.log(choices)
}

Now here it comes the problem. When I click the button, in the console I get an "Uncaught TypeError: choose is not a function", but just by deleting for example the last "e" in the function name it works perfectly.

I don't mind at all changing the name, but I'm really curious of what's happening.

Edit: some people are focusing on the "choices" element that isn't seen in the code I provided, but that's not he problem (in fact just by changing the name of the function it works). Anyway, here is the complete body code:

<body>
    <form>
        Introduce one element in each line:<br/>
        <textarea id="choices" rows="10" cols="70"></textarea><br/><br/>
        <button id="choose" type="button" onclick="choose()">Choose</button>
    </form>
    <div id="result"></div>
</body>

And by the way, for me it happens in Firefox too.

Your element has `id="choose"` your JS has `getElementById("choices");` not the same word — Liam, May 27 '21 at 14:16
@Liam Correct but not relevant for the problem (`Uncaught TypeError: choose is not a function`). — Andreas, May 27 '21 at 14:17
If you want to know what's valid you can see [this question](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Liam, May 27 '21 at 14:18
Oh yes, [and this](https://stackoverflow.com/questions/21477717/how-to-call-a-js-function-using-onclick-event) — Liam, May 27 '21 at 14:19
"choose" is not a reserved word (you can refer to the [list of reserved keywords on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords)) but when you set the `id` attribute of an element to `choose` a global variable is created, hence the conflict with the function name. If you change either the function name or the button `id` attribute to anything else (e.g. `setChoice` for the function or `chooseButton` for the button), you should be fine. — secan, May 27 '21 at 14:21
Oh, so ids override function names, good to know, thank you :) PS: I can't mark your answer as the final one, right? — jose_rullva, May 27 '21 at 14:29
I initially thought that would be the cause, but soon after got doubts, as it shouldn't overwrite existing properties. I also cannot reproduce this, my reproduction attempt does not throw (at least not the same error). — ASDFGerte, May 27 '21 at 14:30
I can't reproduce the problem with Firefox: https://jsfiddle.net/Lnopfmy8/ The example works. No errors. What browser do you use? — , May 27 '21 at 14:35

score -1 · Answer 1 · answered May 27 '21 at 14:35

No "choose" is not a reserved keyword in javascript, but in the code, you mentioned we are unable to find choices ID, please be in brief so that we can help you.

and instead of document.getElementById("choices") alternatively you can use this below syntax

document.querySelector("#choices");

even though I have proper code received from you I'm trying my best to give this answer, please see the below code

// html
<button id="choices" type="button" onclick="choose()">Choose</button>

// javascript
function choose() {
    choices = document.querySelector("#choices");
    console.log(choices);
}

Is "choose" a reserved keyword in JavaScript?

1 Answers1