Ir para conteúdo

POWERED BY:

Arquivado

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

fakealgoz123

Script Inserir imagem com tabela Dom

Por , em Javascript

Recommended Posts

fakealgoz123    0

fakealgoz123
Postado

Olá galera estou fazendo uma tabela interativa com DOM simples para trabalho da facul para entregar amanhã, criei um form com os select fazendo referência com cada ação que eu quero (texto,senha,radio,etc..) , mas no último case(roupa) eu queria inserir uma Imagem , porém já tentei de diversas formas mas não to conseguindo fazer a referência correta para ele aparecer na tela quando eu selecionar esse case. Tentei algo do tipo :

 

Script : 

		case "rpa": 
                   var img = document.createElement("IMG");  
                   img.src = "img/roupas/capacete.png";  
                   document.getElementById('image').appendChild(img);  
	            break;

Html : 

<form id="frmIncluir" method="post" action="">
  <p>Campo de formulário: 
    <select name="base_campo" id="base_campo">
      <option value="txt">Texto</option>
      <option value="pwd">Senha</option>
      <option value="rad">Radio</option>
      <option value="chk">Checkbox</option>
      <option value="btn">Botão</option>
      <option value="rpa">Roupa</option>
    </select>
    <br />
  Nome: 
  <input type="text" name="base_nome" id="base_nome" />
  <br />
  ID:
  <input type="text" name="base_id" id="base_id" />
  <br />
  <input type="button" name="btnAcrescenta" id="btnAcrescenta" value="acrescenta"  onclick="inclui();" />
  </p>
</form>
<form id="frmDom" method="post" action="">
</form>

Preciso de ajuda urgentemente , quem puder me ajudar serei muito grato ! :pinch:

Compartilhar este post

Link para o post
Compartilhar em outros sites

fakealgoz123    0

fakealgoz123
Postado

Sim, a imagem seria sempre a mesma quando eu selecionasse "roupa" , ela vem do meu diretório : img/roupas/capacete.png , porém a imagem não aparece quando eu seleciono...Da uma olhada no código completo :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script type="text/javascript">

function inclui(){

	//Recuperando as informações
	// que serão usadas no novo campo
	var oRotulo = document.getElementById("base_nome").value;
	var oId = document.getElementById("base_id").value;
	var oTipo_obj = document.getElementById("base_campo");
	aOpcao = oTipo_obj.value;
	
	//Verificando a existência do ID
	if (document.getElementById(oId)) {
		alert("O ID já existe no formulário");
		return false;
	}
	
	
	// Recuperando o formulário inferior
	var frm = document.getElementById("frmDom");

	if (aOpcao != "btn")	{
		//criando a parte do rótulo
		//
		var lbl = document.createElement("label");
		// criando um atributo
		lbl.setAttribute("for", oId);
		// criando texto do elemento
		txtNode = document.createTextNode(oRotulo + " : ");
		// adicionando o texto no elemento
		lbl.appendChild(txtNode);
			
		//Adicionando o label
		frm.appendChild(lbl);
	}
	
	var campo;
	
	switch(aOpcao){
		case "txt":
				campo = document.createElement("input");
				campo.setAttribute("type", "text");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				break;

		case "pwd":
				campo = document.createElement("input");
				campo.setAttribute("type", "password");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				break;

		case "rad":
				campo = document.createElement("input");
				campo.setAttribute("type", "radio");
				campo.setAttribute("name", oId);
				var maior = 0;
				
				// recupera todos os radios com o mesmo nome:
				var campos = document.getElementsByTagName("input");
				for (i=0; i<campos.length;i++){
					// testando para pegar o último número
					var radioAtu =campos.item(i);
					var radioName = radioAtu.getAttribute("name");
					var radioId = radioAtu.getAttribute("id");
					var radiotipo = radioAtu.getAttribute("type");
					
					// Verifica se é do tipo radio e 
					// pertence ao mesmo grupo
					if (
						(radioName == oId)
						&&
						(radiotipo == "radio")
						 ){
					
						var tam = oId.length;
						radioNum = parseInt(radioId.substring(tam));
						if( isNaN(radioNum ))
							radioNum = 0;
						
						//Verifica se o nome é igual aoa informado
						// e se seu valor é o maior
						if (radioNum > maior){
							maior = radioNum;
						}
					}
				}
				//Próximo
				maior++
			
				//Criando o atributo com id diferente
				campo.setAttribute("id", oId + "" + maior);
				
				// colocado para testar o que ocorre
				// Pode usar isso nos estudos, bastando alterar
				// a função testa
//				campo.setAttribute("onclick", "testa(this);");
				
				break;

		case "chk":
				campo = document.createElement("input");
				campo.setAttribute("type", "checkbox");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				break;

		case "btn":
				campo = document.createElement("input");
				campo.setAttribute("type", "button");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				campo.setAttribute("value", oRotulo);
				break;
				
		case "rpa": 
                   var img = document.createElement("IMG");  
                   img.src = "img/roupas/capacete.png";  
                   document.getElementById('image').appendChild(img);  
	            break;
				break;
	}
	//Adicionando o campo
	frm.appendChild(campo);
	//Adicionando a quebra de linha
	br = document.createElement("br");
	frm.appendChild(br);
	
}
</script>
<script>
function testa(campo){
	alert(campo.getAttribute("id"));
}
</script>
</head>

<body>
<h1>DOM</h1>
<h2>Criando formulários </h2>
<form id="frmIncluir" method="post" action="">
  <p>Campo de formulário: 
    <select name="base_campo" id="base_campo">
      <option value="txt">Texto</option>
      <option value="pwd">Senha</option>
      <option value="rad">Radio</option>
      <option value="chk">Checkbox</option>
      <option value="btn">Botão</option>
      <option value="rpa">Roupa</option>
    </select>
    <br />
  Nome: 
  <input type="text" name="base_nome" id="base_nome" />
  <br />
  ID:
  <input type="text" name="base_id" id="base_id" />
  <br />
  <input type="button" name="btnAcrescenta" id="btnAcrescenta" value="acrescenta"  onclick="inclui();" />
  </p>
</form>
<form id="frmDom" method="post" action="">
</form>
<p> </p>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Silva_109261    6

Leonardo Silva_109261
Postado

Bom o que eu fiz para seu script funcionar foi colocar uma função sendo chamada no evento onchange e aí eu indetifico se é rpa se for ele coloca a imagem. Crie um div com o ID imagem para que ele exiba a imagem.

 

Obs: Você faz o apende em um elemento com o ID imagem porém o elemento não existe na página.

 

Código da função de teste:

function teste(){

  var valor = document.getElementById('base_campo').value;

  if(valor == 'rpa'){

    //alert('Roupa selecionada!');
    
    // Aqui chamei seu código.
    var img = document.createElement("IMG");  
    img.src = "capacete.jpg";  
    document.getElementById('image').appendChild(img);  

  }

}

É só acrescentar a div com o Id imagem no HTML da página para ver o resultado.

 

Espero ter ajudado, abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

fakealgoz123    0

fakealgoz123
Postado

Hum deu certo, eu sabia que tava faltando botar um elemento de referência em algum lugar mas não tava conseguindo por, e o prof° quer apenas como esse modo por tabela , agora só vou por pra ser uma imagem arrastavel e pronto, mto obrigado amigao :joia:

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