Changing Javascript Onclick does not work

Navigation
3

Hello

I'm developing a very simple script in javascript, where when I click the button for the first time, it calls the student () function and when clicking the same button strong> call teacher () , but not I am able to change content / strong>, where can I be wrong? 

<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>

Thank you in advance

    
asked by anonymous 12.09.2016 / 18:24

3 answers

0

I'll explain first why your code does not work:

This line does not work because when it is read by the browser the element with this ID does not yet exist: 

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

If you look at the console this gives an error because you are calling .onclick over null which is the response of document.getElementById("btnProfessor") when the element is not found.

You do not actually need this line because the code works with the other .onclick since it is tied to the element, regardless of whether the ID or content has been changed or not.

Another thing that does not work as expected is btnAlunos.onclick = "professor()"; , the issue here is the difference between properties and attributes. I've already talked about this (and others here) another answer , but basically you have to change the attribute in HTML instead of property of the DOM element. You can do this like this: btnAlunos.setAttribute('onclick', "professor()"); . With these changes your code is already getting closer to what you want ( link ).

But you could do this like this: 

document.getElementById("btnAlunos").onclick = function() {
    var idOriginal = this.id;
    this.value = "Professor";
    this.id = "btnProfessor";
    idOriginal == "btnProfessor" ? professor() : aluno();
};

and without onclick in HTML. Note that within this function in JavaScript this is the clicked element, and you may have a question (ternary) to decide which function to call. In this case it would look like this: 

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: link

    
12.09.2016 / 20:00
0

For the case you want to do, this already solves and does not need to change the function of the click, just ceritif to call the method that wants: 

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>
    
12.09.2016 / 18:44
0

In your model you are complicating several things. In addition to working with dynamic events. For simplicity, why not make function aluno() change onclick() to teacher and vice versa?

Your example would look like this: 

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 that I do not need to change the id . I just changed value to indicate button text, and I change onclick() in each function with setAttribute () .

    
12.09.2016 / 18:46
Ajax play audio after running successfully RmiRegistry not found