Mostra imagem sequencialmente clicando em um botão
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!
Discussão (4)
Carregando comentários...