Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ment0r

Mostra imagem sequencialmente clicando em um botão

Por , em Javascript

Recommended Posts

ment0r    1

ment0r
Postado

Boa tarde caros amigos.

Mais uma vez venho aqui pedir ajuda a vocês. Bom, sem mais delongas... o que eu preciso é bem simples: digamos que seria um teclado, como assim? Eu gostaria de ter uma página simples com botões A, B, C, D... e ao clicar em algum deles, apareceria uma imagem com a letra, mas! se eu clicar duas vezes na letra A, deve aparecer 2 imagens com a letra A e assim por diante. Como se fosse um "editor de texto".

 

Já fiz algo muito próximo do que quero, mas não consigo fazer aparecer 2 ou mais vezes uma mesma imagem e outro problema, se eu clicar no botão C, depois no botão A, não fica CA e sim AC, ele sempre fica em ordem alfabética.

 

O código é esse:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<script>
function mostraA(){
	document.getElementById("a").style.display="block";
}
function mostraB(){
	document.getElementById("b").style.display="block";
}
function mostraC(){
	document.getElementById("c").style.display="block";
}
</script>
<style type="text/css">
img{
	float:left;
}
</style>
</head>

<body>

<div id='div_img'></div>

<input type='button' value="A" onclick = "mostraA('a');">
<input type='button' value="B" onclick = "mostraB('b');">
<input type='button' value="C" onclick = "mostraC('c');">

<label id="a" style="display: none"><img src="a.gif" name="a" /></label>
<label id="b" style="display: none"><img src="b.gif" name="b" /></label>
<label id="c" style="display: none"><img src="c.gif" name="c" /></label>

</body>
</html>

Não sou muito "fluente" em JS, mas creio que não deva ser difícil de se resolver. Conto com a ajuda de vocês e desde já, muito obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O "segredo" é ir fazendo append das letras:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <section id="letters">
    <button>A</button>
    <button>B</button>
    <button>C</button>
    <button>D</button>
    <button>E</button>
  </section>

  <div id="ret"></div>


<script>
var $ret = document.getElementById('ret'),
    $buttons = document.getElementById('letters').getElementsByTagName('button');


$buttons = [].slice.call($buttons);

$buttons.forEach(function($button) {
  $button.addEventListener('click', function(e) {
    var span = document.createElement('span');
    span.innerHTML = this.innerHTML;

    $ret.appendChild(span);
  });
});
</script>
</body>
</html>
agora vc pode trocar o span ali pela sua tag img, com a imagem correspondente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ment0r    1

ment0r
Postado

William Bruno, primeiramente muito obrigado pela ajuda. Era exatamente isso que eu queria. Desculpa minha ignorância, mas como e onde eu vou fazer para aparecer as várias imagens das letras? Eu devo colocar a tag simples <img src="a.gif">? se sim, e as outras <img src="b.gif">, <img src="c.gif"> e assim por diante?

 

Muito obrigado mais uma vez pela ajuda amigo :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

assim:

 

$buttons.forEach(function($button) {
  $button.addEventListener('click', function(e) {
    var img = document.createElement('img');
    img.src = this.innerHTML.toLowerCase() + '.gif';

    $ret.appendChild(img);
  });
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito