Ir para conteúdo

POWERED BY:

Arquivado

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

EvaRisTo_LoL

abrir imagem ao digitar o nome dela

Por , em Desenvolvimento frontend

Recommended Posts

EvaRisTo_LoL    0

EvaRisTo_LoL
Postado

Ola

 

Estou tentando escrever um código em que, quando eu digito o nome da imagem no textbox, a imagem apareça.

 

O exemplo que irei passar so contem uma imagem mas estou querendo colocar mais de 500.

 

<!doctype html>
<html>
<head>
 
<script> 
function imgLetra(){ 
if ( letra = "tijolo" ) { 
document.getElementById( 'oi' ).innerHTML = "<img src = 'tijolo.png' >"; 
} 
} 
</script> 
 
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
 
<body>
 
<div id = 'oi'></div> 
<input type="text" autofocus required id="oi" autocomplete="on" onChange="letra">
 
</body>
</html>

Alguém pode me ajudar fazendo favor, a imagem nao aparece quando eu digito tijolo no textbox.

 

Agradeço desde jah!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Escreva no input uma das 3 opções: [mickey, minnie ou tijolo]

Saia do input (evento onblur), com um tab, clicando fora.. qualquer coisa, ai será disparada a função que faz o append da imagem na tela.

 

Funcionando:

http://wbruno.github.io/examples/text-images/

 

Código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<p>Imagens existentes: </p>
<ul>
  <li>mickey</li>
  <li>minnie</li>
  <li>tijolo</li>
</ul>

<input type="text" id="text" />

<div id="view"></div>

<script type="text/javascript">
var $text = document.getElementById('text'),
    $view = document.getElementById('view');

$text.addEventListener('blur', function(){
  var img = document.createElement('img');
  img.src = this.value + '.png';

  $view.appendChild(img);
});
</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvaRisTo_LoL    0

EvaRisTo_LoL
Postado

Muito obrigado pela reposta bruno.

 

Consegui reproduzir o seu exemplo aqui e funcionou certinho como eu queria.

 

Mas estou precisando que quando eu digito o nome da segunda imagem as outras imagem desapareçam, elas estão ficando uma do lado da outra.

 

A culpa foi minha, por não ser claro no pedido.

 

Agradeço desde jah.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Você pode adicionar um innerHTML = ''; para limpar o elemento view

 

<script type="text/javascript">
var $text = document.getElementById('text'),
    $view = document.getElementById('view');

$text.addEventListener('blur', function(){
  var img = document.createElement('img');
  img.src = this.value + '.png';

  $view.innerHTML = '';
  $view.appendChild(img);
});
</script>

Compartilhar este post

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

Informação importante

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

  Aceito