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

Navigation
4

I'm learning JS and I can not figure out why not change the text of h1 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>
    
asked by anonymous 19.01.2018 / 01:01

3 answers

3

The property onclick returns the event handler code of click 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 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 addEventListener method 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>

Note:

The way AP described in your question, it works as long as it does: 

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 on that object, it can not 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

19.01.2018 / 01:15
1

You can also use jQuery to create an event handler (event handler) for the element. In case, for 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><h1id="title">Somente alguns testes em JS</h1>
  

If you do not 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>

Ifyouwanttocalla 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><h1id="title">Somente alguns testes em JS</h1>
    
19.01.2018 / 01:34
-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>
    
19.01.2018 / 01:06
Filter a field according to the format of the text Include a digit before the phone in the DB [duplicate]