0

Eu tenho um arquivo javascript com esse código:

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');
    }
}

e no meu html tem esse botao aqui:

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

mas quando eu vou usar essa funcao ela não funciona, e o console me retorna esse erro:

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

o javascript esta sendo chamado aqui:

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

o que pode estar dando errado?

1 Resposta 1

1

Altere o nome da function pois está ocorrendo um conflito entre o nome da function hidden. Pois o hidden é um Atributo Global. O mesmo tipo de conflito acontece ao você colocar algo como HTML Attributes (Atributos HTML), HTML Global Attributes (Atributos Globais HTML como o hidden de exemplo), Global Events Attributes (Atributos de Eventos Globais) com o mesmo nome para a function. O mesmo tipo de conflito acontece ao você colocar um id ou name no button com o mesmo nome da function

  • Atributos HTML são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias maneiras para atender aos critérios que os usuários desejam.
  • Atributos Globais são atributos comuns a todos elementos HTML; Os atributos globais são atributos que podem ser usados ​​com todos os elementos HTML, embora os atributos não tenham efeito em alguns elementos.
  • Atributos de Eventos Globais: eventos acionem ações em um navegador, como iniciar um JavaScript quando um usuário clica em um elemento. ( Mouse Events, Keyboard Events, Form Events, Window Events, etc...)

E que ao invés de colocar hidden coloque hidde, ou algo que seja melhor para sua identificação.

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>

Lista de todos atributos que, se caso não funcionar, você confere aí:

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .