script não enxergar script seguinte

[Biel. 9]

Olá pessoal. EX1 e EX2 o nome da function e a mesma e quero manter os nomes iguais. Quando clico no botao1, imprime aluno ao invés de aprendiz, porque javascript pega sempre o último valor. Existe alguma forma do EX1 não enxergar nenhum dado do EX2, mesmo os dados sendo iguais ?

EX1
<button onClick="myFunction1()">botao1</button>
<p id="toto"></p>
<script>
function myFunction1() {
var x = document.getElementById("toto").innerHTML = 'aprendiz';
}
</script>

<hr>

EX2
<button onClick="myFunction1()">botao2</button>
<p id="toto"></p>
<script>
function myFunction1() {
var x = document.getElementById("toto").innerHTML = 'aluno';
}
</script>

 

[wanderval 19]

Acho que está faltando mais detalhes na sua explicação, você está descrevendo o que quer involvendo a ação, mais está faltando o objetivo real dessa manipulação.

 

ex: você pode chmar o mesmo metodo deforma generica sem problema, mas o código precisa de uma referência para tratar essa diferença de forma particular e a unica coisa que vejo de diferente e o text do botão "botao1 , botao2", então você poderia ao invocar myFunction1() verificar o text assim tratar de forma diferente ou passar parametro para o metodo myFunction1(parm)

 

[Biel. 9]

5 horas atrás, wanderval disse:

Acho que está faltando mais detalhes na sua explicação, você está descrevendo o que quer involvendo a ação, mais está faltando o objetivo real dessa manipulação.

 

ex: você pode chmar o mesmo metodo deforma generica sem problema, mas o código precisa de uma referência para tratar essa diferença de forma particular e a unica coisa que vejo de diferente e o text do botão "botao1 , botao2", então você poderia ao invocar myFunction1() verificar o text assim tratar de forma diferente ou passar parametro para o metodo myFunction1(parm)

 

Queria colocar algum tipo de bloqueador no final do script 1 e impedir script 1 de enxergar algum dado do script 2  e fazer a mesma coisa com script 2 - colocar um bloqueador no final do script 2 e impedir script 2 de enxergar algum dado do script 3 e assim por diante . 

 

 

[wanderval 19]

Mas imagina o cenario você carrega esses 2 elementos e seus respectivos metodos, ao carregar o navegador vai ler o código linha a linha

eu outras linguagens daria erro de duplicidade, mas no seus caso ele está dando um override certo?

O que quer fazer quebra um principio importante de javascript funcional e simple responsability que focam muito na reusabilidade, então porque você precisa ter 2 metodos que executam da mesma forma so que tendo dados diferentes, não seria melhor ter o mesmo metodo recebendo dados diferentes ao invez de estarem sendo setados de forma estatica? 

 

 

Poderia fazer assim tb:

EX1
<button id="bt1">botao1</button>
<p id="toto"></p>
<script>
document.getElementById("bt1").addEventListener("click", function() {
  var x = document.getElementById("toto").innerHTML = 'aprendiz';
});
</script>

<hr>

EX2
<button id="bt2">botao2</button>
<p id="toto"></p>
<script>
  document.getElementById("bt2").addEventListener("click", function() {
  var x = document.getElementById("toto").innerHTML = 'aluno';
});

 

[Biel. 9]

1 hora atrás, wanderval disse:

Mas imagina o cenario você carrega esses 2 elementos e seus respectivos metodos, ao carregar o navegador vai ler o código linha a linha

eu outras linguagens daria erro de duplicidade, mas no seus caso ele está dando um override certo?

O que quer fazer quebra um principio importante de javascript funcional e simple responsability que focam muito na reusabilidade, então porque você precisa ter 2 metodos que executam da mesma forma so que tendo dados diferentes, não seria melhor ter o mesmo metodo recebendo dados diferentes ao invez de estarem sendo setados de forma estatica? 

 

 

Poderia fazer assim tb:

EX1
<button id="bt1">botao1</button>
<p id="toto"></p>
<script>
document.getElementById("bt1").addEventListener("click", function() {
  var x = document.getElementById("toto").innerHTML = 'aprendiz';
});
</script>

<hr>

EX2
<button id="bt2">botao2</button>
<p id="toto"></p>
<script>
  document.getElementById("bt2").addEventListener("click", function() {
  var x = document.getElementById("toto").innerHTML = 'aluno';
});

 

Ótima dica. Vou colocar o manipulador de evento sempre depois do document e nunca antes. Obrigado !

[wanderval 19]

59 minutos atrás, Biel. disse:

Ótima dica. Vou colocar o manipulador de evento sempre depois do document e nunca antes. Obrigado !

Da pra você usar varias coisas dependendo do cenario, pode usar class com metodos internos, pode cria rum metodo generico como disse, pode fazer web component. tipo assim nesse caso eu extrai o evento e o html ficou com um component mais enxuto

 

HTML

<button
  is="button-action"
  name="Aluno"
  content="Aluno"></button>
  
<button
  is="button-action"
  name="Professor"
  content="Professor"></button>
  
<button
  is="button-action"
  name="Aprendiz"
  content="Aprendiz"></button>

<p id="toto"></p>

JS

class ButtonAction extends HTMLButtonElement {
  constructor() {
    super();
    this.textContent = this.name;
    this.textDescription = this.getAttribute("content");
    
    this.addEventListener("click", () => {
      document.querySelector('#toto')
        .innerHTML = this.textDescription;
    });
  }
}

customElements.define("button-action", ButtonAction, {extends: 'button'});