Changing Onclick Javascript does not work

Asked

Viewed 4,021 times

3

Hello

I’m developing a very simple javascript script, where when you first click on the button, it calls the function pupil() and by clicking the second time on same button calls the function teacher(), but nay I’m getting through alter the content of onclick, where I may be missing ?

<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

javascript

  • does the following, does the 2 functions attached to a different id when vc clika in the first after executing the function q vc either changes the id of the clikado item to the id that corresponds to the action of the second function.

3 answers

0

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

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>

  • All suggestions are very cool, thanks to all for the help.

0

In your model you are complicating several things. In addition to working with dynamic events. To simplify, why not do the function aluno() alter the onclick() for teacher and vice versa?

Your example would look this way:

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 don’t need to change the id. I just changed the value to enter the button text, and change the onclick() in each function with the setAttribute().

  • 1

    Your code may be better by passing the object as parameter @Randrade. I say <input type="button" id="btnAlunos" value="Alunos" onclick="aluno(this)" />....

  • 1

    @Marconi would certainly look better. But I preferred to keep as close to the AP code as possible, so as not to complicate too much. But thanks for the comment, if the AP understand the changes I did good, I change a little more.

0


I’ll explain first why your code doesn’t work:

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

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

if you see in the console that gives up error because you are calling .onclick on top of null which is the response of document.getElementById("btnProfessor") when element is not found.

You don’t really need this line because the code works with the other .onclick whereas it is tied to the element regardless of whether the ID or content has been changed or not.

Another thing that doesn’t work the way you expect it is btnAlunos.onclick = "professor()";, the issue here is the difference between properties and attributes. I’ve talked about it (and others here) in another answer, but basically you have to change the attribute in HTML and not the property of the DOM element. You can do it like this: btnAlunos.setAttribute('onclick', "professor()");. With these changes your code is already getting closer to what you want (https://jsfiddle.net/8hvx41ke/).

But you could do that feature 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 element clicked, and you may have a question (ternary) to decide on 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: https://jsfiddle.net/8hvx41ke/2/

Browser other questions tagged javascript

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