Jump to content
Biel.

script não enxergar script seguinte

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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)

 

Share this post


Link to post
Share on other sites
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 . 

 

 

Share this post


Link to post
Share on other sites

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';
});

 

Share this post


Link to post
Share on other sites
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 !

Share this post


Link to post
Share on other sites
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'});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • By Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.