When I click on the text it does not change (js)

Asked

Viewed 73 times

4

I’m learning JS and I can’t understand why I don’t change H1’s text when I click on it.

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<title>Testes JavaScript</title>
</head>
<body>
	<h1 id="title">Somente alguns testes em JS</h1>

	<script>
		var x = document.getElementById("title");
		x.onclick = {
			clicado: 0,
			click: function(){
				this.innerHTML = "teste";
				clicado = 1;
			},
			check: function(){
				if(clicado === 0){
					return false;
				}else if (clicado === 1){
					return true;
				}
			}
		};
		x.onclick.click();
	</script>
</body>
</html>

javascript javascript-events

  • Where did you get this code ?

  • I wrote that.

3 answers

3


The estate onclick returns the code of the click event handler on the current element.

The correct use would be:

var x = document.getElementById("title");
x.onclick = function() {
    this.innerHTML = 'O usuário clicou, o titulo foi alterado!';
}
<h1 id="title">Somente alguns testes em JS</h1>

Note that you do not need to check up on if it was clicked. It can also be done like this:

var x = document.getElementById("title");
function minha_funcao() {
    this.innerHTML = 'O usuário clicou, o titulo foi alterado!';
}
x.onclick = minha_funcao;
<h1 id="title">Somente alguns testes em JS</h1>

Using object:

var x = document.getElementById("title");
var objeto= {
    clicks: 0,
    check: function() {
      if (this.clicks === 0) {
        return false;
      } else {
        return true;
      }
    },
    click: function() {
      x.innerHTML = 'O usuário clicou, o titulo foi alterado!';
      objeto.clicks++;
      console.log(objeto.clicks);
    }
};
x.onclick = objeto.click;
<h1 id="title">Somente alguns testes em JS</h1>

You can also use the method addEventListener to add an event to the element.

var x = document.getElementById("title");
var objeto = {
  clicks: 0,
  check: function() {
    console.log(objeto.clicks);
    if (objeto.clicks === 1) {
      x.addEventListener('click', objeto.click_B);
    }
  },
  click_A: function() {
    objeto.clicks++;
    x.innerHTML = 'O usuário clicou, o titulo foi alterado! Clicou ' + objeto.clicks + ' vez';
    objeto.check();
  },
  click_B: function() {
    x.innerHTML = 'O usuário clicou, o titulo foi alterado novamente! Clicou ' + objeto.clicks + ' vezes';
  },
};
x.addEventListener('click', objeto.click_A);
<h1 id="title">Somente alguns testes em JS</h1>

Observing:

The way the AP described in your question, it works as long as you do:

var x = document.getElementById("title");
x.onclick = {
  click: function() {
    console.log('Ele clicou no H1');
  }
}.click;
<h1 id="title">Somente alguns testes em JS</h1>

But an extremely important point to note, is that if it has another method in this object, it cannot be executed. See the following example:

var x = document.getElementById("title");
x.onclick = {
  funcao_a: function() {
    console.log('Função A');
  },
  click: function() {
    console.log('Click');
    x.onclick.funcao_a();
  }
}.click;
<h1 id="title">Somente alguns testes em JS</h1>

References

  • Could you explain to me better what the code of the event handler would be ?

  • 1

    A tutorial in English: Manipulating Events

1

You can also use jQuery to create a Event Handler (event handler) for the element. In this case, for the event click:

$("#title").click(function(){
    $(this).html("teste");
});

or

$("#title").on("click", function(){
    $(this).html("teste");
});

The difference between one and the other you can check in this answer.

$("#title").click(function(){
    $(this).html("teste");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title">Somente alguns testes em JS</h1>

If you don’t know jQuery, it’s a Javascript library that makes it easy to manipulation of DOM elements. You can load the library adding the script to your <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In case you want to call one trigger (same thing you did with x.onclick.click();):

$("#title").click(function(){
    $(this).html("teste");
});

$("#title").trigger("click");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title">Somente alguns testes em JS</h1>

-1

Try

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Testes JavaScript</title>
</head>
<body>
<h1 id="title" onclick = "teste();">Somente alguns testes em JS</h1>
<script> function teste(){ var x = document.getElementById("title"); x.innerHTML = "teste";}</script>
</body>
</html>

  • I made x.onclick an object to train JS, so I’d like to understand why it doesn’t work this way ?

  • Favour, try is doubtful answer, explain to AP where he is erring, do not answer only by answering.

Browser other questions tagged javascript javascript-events

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