How to resolve Uncaught Typeerror: Hidden is not a Function at Htmlbuttonelement.onclick?

Asked

Viewed 247 times

0

I have a javascript file with this code:

const newTopic = document.getElementById('topic');
const introduction = document.getElementById('introduction');

function hidden(){
    if(introduction.classList.contains("hidde")){
        introduction.classList.add('hidde');
        introduction.classList.remove('discussions-introduction');
        newTopic.classList.remove('hidde');
    }
}

and in my html you have this button here:

<button id="btn" onclick="hidden()">criar tópico</button>

but when I use this function it does not work, and the console returns me this error:

index.html:150 Uncaught TypeError: hidden is not a function
    at HTMLButtonElement.onclick

javascript is being called here:

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

what may be going wrong?

javascript html function button onclick

1 answer

1

Change the name of function because there is a conflict between the name of function hidden. For the hidden is a Global Attribute. The same kind of conflict happens when you put something like HTML Attributes (HTML attributes), HTML Global Attributes (HTML Global Attributes as example Hidden), Global Events Attributes (Attributes of Global Events) with the same name for the function. The same kind of conflict happens when you put a id or name in the button with the same name as function

  • HTML attributes are additional values that configure the elements or adjust their behavior in various ways to suit criteria that users want.
  • Global Attributes are attributes common to all HTML elements; The global attributes are attributes that can be used with all HTML elements, although the attributes have no effect on some elements.
  • Attributes of Global Events: actions in a browser, how to start a Javascript when a user clicks on an element. ( Mouse Events, Keyboard Events, Form Events, Window Events, etc...)

And that instead of putting Hidden put hidde, or something that is better for your identification.

const newTopic = document.getElementById('topic');
const introduction = document.getElementById('introduction');

function hidde(){
    alert('teste Está funcionando')
    if(introduction.classList.contains("hidde")){
        introduction.classList.add('hidde');
        introduction.classList.remove('discussions-introduction');
        newTopic.classList.remove('hidde');
    }
}
<button  id="btn" onclick="hidde()"> </button>

List of all attributes that, if it doesn’t work, you check there:

Browser other questions tagged javascript html function button onclick

You are not signed in. Login or sign up in order to post.