Mudar Onclick Javascript não funciona - Stack Overflow em Português
Eu estou desenvolvendo um script bem simples em javascript, onde ao clicar pela primeira vez no botão, ele chama a função aluno() e ao clicar a segunda vez no mesmo botão chama a função professor(), mas não estou conseguindo alterar o conteudo de onclick, onde eu posso estar errando ?
<title>Mudar Botão</title>
<input type="button" id="btnAlunos" value="Alunos" onclick="alunos()" />
alert("Eu sou um aluno");
function professor() {
alert("Agora eu sou professor");
document.getElementById("btnAlunos").onclick = function() {
var btnAlunos = document.getElementById("btnAlunos");
btnAlunos.value = "Professor";
btnAlunos.onclick = "professor()";
btnAlunos.id = "btnProfessor";
document.getElementById("btnProfessor").onclick = function() {
editada 12/09/16 às 17:52
perguntada 12/09/16 às 16:24
75399 medalhas de prata2121 medalhas de bronze
faz o seguinte , faz as 2 funções bindadas a um id diferente qando vc clika na primeira apos executar a função q vc quer muda o id do item clikado para o id que corresponde a ação da segunda função.
12/09/16 às 16:37
Vou explicar primeiro porque o teu código não funciona:
Esta linha não funciona pois quando é lida pelo browser o elemento com esse ID ainda não existe:
se vires na consola isso dá até erro pois estás a chamar .onclick em cima de null que é a resposta de document.getElementById("btnProfessor") quando o elemento não é encontrado.
Na verdade não precisas desta linha pois o código funciona com o outro .onclick visto que ele está amarrado ao elemento, independentemente do ID ou conteúdo ter sido mudado ou não.
Outra coisa que não funciona como esperas é btnAlunos.onclick = "professor()";, a questão aqui é a diferença entre propriedades e atributos. Já falei sobre isso (e outros aqui) noutra resposta, mas basicamente tens de mudar o atributo no HTML e não na propriedade do elemento DOM. Podes fazer isso assim: btnAlunos.setAttribute('onclick', "professor()");. Com estas mudanças o teu código já começa a aproximar-se do que queres (https://jsfiddle.net/8hvx41ke/).
Porem podias fazer essa funcionalidade assim:
var idOriginal = this.id;
this.value = "Professor";
this.id = "btnProfessor";
idOriginal == "btnProfessor" ? professor() : aluno();
e sem onclick no HTML. Repara que dentro dessa função no JavaScript o this é o elemento clicado, e podes ter uma pergunta (ternário) a decidir sobre que função chamar. Neste caso ficaria assim:
<input type="button" id="btnAlunos" value="Alunos" />
jsFiddle: https://jsfiddle.net/8hvx41ke/2/
respondida 12/09/16 às 18:00
Para o caso que voce quer fazer, isso já resolve e nao precisa trocar a função do click, apenas ceritificar de chamar o metodo que quer:
function aluno()
function professor()
document.getElementById("btnAlunos").onclick = function ()
if(btnAlunos.value == "Professor")
respondida 12/09/16 às 16:44
Todas as sugestões são bem legais, obrigado a todos pelas ajudas.
12/09/16 às 17:22
Em seu modelo você está complicando várias coisas. Além de trabalhar com eventos dinâmicos. Para simplificar, porque não fazer a function aluno() alterar o onclick() para professor e vice-versa?
Seu exemplo ficaria desta forma:
document.getElementById("btnAlunos").value = 'Professor';
document.getElementById("btnAlunos").setAttribute('onclick','professor()');
document.getElementById("btnAlunos").value = 'Aluno';
document.getElementById("btnAlunos").setAttribute('onclick','aluno()');
<input type="button" id="btnAlunos" value="Alunos" onclick="aluno()" />
Note que não necessito alterar o id. Apenas alterei o value para indicar o texto do botão, e altero o onclick() em cada função com o setAttribute().
respondida 12/09/16 às 16:46
Seu código pode ser melhor passando o objeto como parâmetro @Randrade. Digo <input type="button" id="btnAlunos" value="Alunos" onclick="aluno(this)" />....
12/09/16 às 17:12
@Marconi Com certeza ficaria melhor. Mas preferi deixar o mais próximo do código do AP possível, para não complicar muito. Mas obrigado pelo comentário, se o AP entender as mudanças que eu fiz de boa, eu altero um pouco mais.