3

Olá

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 ?

<html>
    <head>
        <title>Mudar Botão</title>
    </head>
    <body>
        <input type="button" id="btnAlunos" value="Alunos" onclick="alunos()" />
        <script type="text/javascript">
            function aluno() {
                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";
                aluno();
            };
            document.getElementById("btnProfessor").onclick = function() {
                professor();
            };
        </script>
    </body>

</html>

Agradeço desde já

1
  • 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. Commented 12/09/2016 às 16:37

3 Respostas 3

0

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:

document.getElementById("btnProfessor").onclick = function() {
    professor();
};

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:

document.getElementById("btnAlunos").onclick = function() {
    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:

function aluno() {
    alert("Eu sou um aluno");
}

function professor() {
    alert("Agora eu sou professor");
}
document.getElementById("btnAlunos").onclick = function() {
    var idOriginal = this.id;
    this.value = "Professor";
    this.id = "btnProfessor";
    idOriginal == "btnProfessor" ? professor() : aluno();
};
<input type="button" id="btnAlunos" value="Alunos" />

jsFiddle: https://jsfiddle.net/8hvx41ke/2/

0

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()
{
  alert("Eu sou um aluno");
}

function professor()
{
  alert("Agora eu sou professor");
}

document.getElementById("btnAlunos").onclick = function ()
{

  var btnAlunos = document.getElementById("btnAlunos");
  
  if(btnAlunos.value == "Professor")
    {
      professor();
      }
  else    
    {
  aluno();
    }  
  
  btnAlunos.value = "Professor";
};
<html>
<head>
<title>Mudar Botão</title>
</head>

<body>

<input type="button" id="btnAlunos" value="Alunos" onclick="alunos()" /> 

</body>
</html>

1
  • Todas as sugestões são bem legais, obrigado a todos pelas ajudas.
    – abduzeedo
    Commented 12/09/2016 às 17:22
0

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:

function aluno()
{
  document.getElementById("btnAlunos").value = 'Professor';
  document.getElementById("btnAlunos").setAttribute('onclick','professor()');
  alert("Eu sou um aluno");
}

function professor()
{
  document.getElementById("btnAlunos").value = 'Aluno';
  document.getElementById("btnAlunos").setAttribute('onclick','aluno()');
  alert("Agora eu sou professor");
}
<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().

2
  • 1
    Seu código pode ser melhor passando o objeto como parâmetro @Randrade. Digo <input type="button" id="btnAlunos" value="Alunos" onclick="aluno(this)" />....
    – Marconi
    Commented 12/09/2016 às 17:12
  • 1
    @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.
    – Randrade
    Commented 12/09/2016 às 17:15

Você deve fazer log-in para responder a esta pergunta.

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