Ciclo for com problemas

viegasss · January 11, 2016 at 10:18 PM

Alguem pode ver se este meu código está bem feito!!! é que acho que nao, o resultado nao aparece! 😞

EU ACHO QUE TENHO O FOR E O IF MAL FEITO NAO ?

function mostrar_contas() {
   var lista = '<form>';
	   for (var l=0; l < conjunto_contas.length; l++){
		 if(conjunto_contas[l].linguagem == "Despesa"){
		   lista +='<label class="texto">Data:</label>'+conjunto_contas[l].nome
				   +'<br><label class="texto">Descriçao:</label>'+conjunto_contas[l].codigo
				   +'<br><label class="texto">Tipo:</label>'+conjunto_contas[l].linguagem
				   +'<br><label class="texto">Categoria:</label>'+conjunto_contas[l].categoria
				   +'<br><label class="texto">Preço:</label>'+conjunto_contas[l].observacoes+'<br>'
				   +'<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' +l + ')"> '+ '<input type="button" value="Remover" id="texto" onclick="removerlistasnippet(' +l + ')">';
		 }
		 lista +='</form>';
		  document.getElementById("despesa").innerHTML=lista;
		  if(conjunto_contas[l].linguagem == "Receita"){
		    lista +='<label class="texto">Data:</label>'+conjunto_contas[l].nome
				    +'<br><label class="texto">Descriçao:</label>'+conjunto_contas[l].codigo
				    +'<br><label class="texto">Tipo:</label>'+conjunto_contas[l].linguagem
				    +'<br><label class="texto">Categoria:</label>'+conjunto_contas[l].categoria
				    +'<br><label class="texto">Preço:</label>'+conjunto_contas[l].observacoes+'<br>'
				    +'<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' +l + ')"> '+ '<input type="button" value="Remover" id="texto" onclick="removerlistasnippet(' +l + ')">';
		  }
		  lista +='</form>';
		   document.getElementById("receitas").innerHTML=lista;

    }

Rechousa · January 11, 2016 at 10:57 PM

Viva,

Se fizeres um console.log da variável lista, o que é que te aparece na consola?

viegasss · January 11, 2016 at 11:06 PM

Viva,

Se fizeres um console.log da variável lista, o que é que te aparece na consola?

nada!!!

Pela foto e facil de perceber... eu fiz um if e o for para percorrer... com for receita vai para um lado quando for despesa vai para outro....

Rechousa · January 11, 2016 at 11:31 PM

Viva,

1) Pela foto não é nada fácil de perceber. Sugeri que fizesses um console.log, para mostrar na consola o valor da tua variável;

2) O teu código deve estar errado, pois estás dentro do ciclo a fechar varias vezes a tag form (além do código duplicado).

Experimenta fazer o console.log e vê o HTML que foi gerado.

viegasss · January 11, 2016 at 11:38 PM

Rechousa · January 11, 2016 at 11:42 PM

Coloca a linha console.log(lista) dentro da tua função.

Exemplo:

lista +='</form>';
console.log(lista);
document.getElementById("receitas").innerHTML=lista;

Também podes usar as "developer tools" para fazer debug.

viegasss · January 11, 2016 at 11:52 PM

<div id="lista"></div>

Aparece isto

Rechousa · January 11, 2016 at 11:57 PM

Colocaste a linha dentro da função, como te disse?

viegasss · January 12, 2016 at 12:00 AM

function mostrar_contas() {
lista +='</form>';
console.log(lista);
document.getElementById("receitas").innerHTML=lista;
	   var lista = '<form>';
			   for (var l=0; l < conjunto_contas.length; l++){
					 if(conjunto_contas[l].linguagem == "Despesa"){
					   lista +='<label class="texto">Data:</label>'+conjunto_contas[l].nome
									   +'<br><label class="texto">Descriçao:</label>'+conjunto_contas[l].codigo
									   +'<br><label class="texto">Tipo:</label>'+conjunto_contas[l].linguagem
									   +'<br><label class="texto">Categoria:</label>'+conjunto_contas[l].categoria
									   +'<br><label class="texto">Preço:</label>'+conjunto_contas[l].observacoes+'<br>'
									   +'<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' +l + ')"> '+ '<input type="button" value="Remover" id="texto" onclick="removerlistasnippet(' +l + ')">';
					 }
					 lista +='</form>';
					  document.getElementById("despesa").innerHTML=lista;
					  if(conjunto_contas[l].linguagem == "Receita"){
					    lista +='<label class="texto">Data:</label>'+conjunto_contas[l].nome
									    +'<br><label class="texto">Descriçao:</label>'+conjunto_contas[l].codigo
									    +'<br><label class="texto">Tipo:</label>'+conjunto_contas[l].linguagem
									    +'<br><label class="texto">Categoria:</label>'+conjunto_contas[l].categoria
									    +'<br><label class="texto">Preço:</label>'+conjunto_contas[l].observacoes+'<br>'
									    +'<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' +l + ')"> '+ '<input type="button" value="Remover" id="texto" onclick="removerlistasnippet(' +l + ')">';
					  }
					  lista +='</form>';
					   document.getElementById("receitas").innerHTML=lista;
	    }

ERA ASSIM ?

Rechousa · January 12, 2016 at 12:04 AM

Não... Coloca este código:

function mostrar_contas() {
var lista = '<form>';
for (var l = 0; l < conjunto_contas.length; l++) {
	if (conjunto_contas[l].linguagem == "Despesa") {
		lista += '<label class="texto">Data:</label>' + conjunto_contas[l].nome + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].codigo + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].linguagem + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].observacoes + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerlistasnippet(' + l + ')">';
	}
	lista += '</form>';


	console.log('vai mostrar a variavel lista apos verificar se é despesa', lista);
	document.getElementById("despesa").innerHTML = lista;


	if (conjunto_contas[l].linguagem == "Receita") {
	  lista += '<label class="texto">Data:</label>' + conjunto_contas[l].nome + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].codigo + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].linguagem + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].observacoes + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerlistasnippet(' + l + ')">';
	}
	lista += '</form>';

	console.log('vai mostrar a variavel lista apos verificar se é receita', lista);
	document.getElementById("receitas").innerHTML = lista;
}

console.log('Fim do ciclo. Conteúdo da variavel lista: ', lista);
}

viegasss · January 12, 2016 at 12:27 AM

Eu vou chumbar a esta cadeira... que bela me****!

Ele introduz bem, com o meu código e com o que me deste só que nao aparece nada nos meus outros dois htmls...

VOU-TE ENVIAR O MEU CÓDIGO EU DEVO TER AI ALGUMA COISA MAL FEITA SÓ PODE! ENFIM... JA ESTOU HÁ 5 HORAS DE VOLTA DISTO.... NO COMENTS...

CÓDIGO JS!

// _________________________________________________________________________
//| Criação de um array com o nome conjunto_contas para onde vão os meus dados |
//|__________________________________________________________________________|
var conjunto_contas = new Array ();
//__Estrutura dos Elementos com os seus atributos__
var ElementoConta={
constructor: function i (data, descricao , tipo , categoria , preco){
 this.data = data;
 this.descricao= descricao;
 this.tipo = tipo;
 this.categoria = categoria;
 this.preco = preco;
},
// ________________________________________________________________________________________________
//| Vai buscar para a função os atributos por ID ou seja pelos ID's que atribuimos a cada atributo |
//|________________________________________________________________________________________________|
getdata: function(){ return this.data; },
getdescricao: function(){ return this.descricao; },
gettipo: function(){ return this.tipo; },
getCategoria: function(){ return this.categoria; },
getpreco: function(){ return this.preco; }
};

// ___________________________________
//| Função para criar um elemento novo |
//|___________________________________|
function criar() {
var elementoNovo = Object.create(ElementoConta);
elementoNovo.constructor(document.getElementById("data").value,
					 document.getElementById("descricao").value,
					 document.getElementById("tipo").value,
					 document.getElementById("categoria").value,
					 document.getElementById("preco").value);
 conjunto_contas.push(elementoNovo);
 salvar_atributos();
}
// Funcao, que mostra todos os atributos inseridos....
function mostrar_contas() {
 var lista = '<form>';
 for (var l = 0; l < conjunto_contas.length; l++) {
		 if (conjunto_contas[l].tipo == "Despesa") {
				 lista += '<label class="texto">Data:</label>' + conjunto_contas[l].data + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].descricao + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].tipo + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].preco + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerlista(' + l + ')">';
		 }
		 lista += '</form>';

		 console.log('vai mostrar a variavel lista apos verificar se é despesa', lista);
		 document.getElementById("despesa").innerHTML = lista;

		 if (conjunto_contas[l].tipo == "Receita") {
			 lista += '<label class="texto">Data:</label>' + conjunto_contas[l].data + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].descricao + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].tipo + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].preco + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerlista(' + l + ')">';
		 }
		 lista += '</form>';
		 console.log('vai mostrar a variavel lista apos verificar se é receita', lista);
		 document.getElementById("receitas").innerHTML = lista;
 }
 console.log('Fim do ciclo. Conteúdo da variavel lista: ', lista);
}

// _____________________________
//| Função para remover elemento |
//|_____________________________|
function removerlista(l){
 conjunto_contas.splice(l,1);
 salvar_atributos();
 mostrar_contas();
	 alert("Elemento removido.");
}

// ____________________________
//| Função de suporte storage |
//|____________________________|
function supports_html5_storage() {
try
{
 return 'localStorage' in window && window['localStorage'] !== null;
}
catch(e)
{
 return false;
}
}

// ___________________________________________
//| Função para salvar os atributos inseridos |
//|___________________________________________|
function salvar_atributos(){
if(supports_html5_storage()){
 // guarda os atributos em artigos, cada artigo tem os diferentes atributos inseridos
	 localStorage.setItem('artigo' , JSON.stringify(conjunto_contas));
	 alert("Elemento adicionado.");
}
}
// __________________________________________
//| Função para carregar os atributos salvos |
//|__________________________________________|
function carregar_atributos(){
if(supports_html5_storage()){
 // guarda os atributos em artigos, cada artigo tem os diferentes atributos inseridos
 var i=localStorage.getItem('artigo');
	 if (i!=null){
		 conjunto_contas=JSON.parse(i);
	 }
}
mostrar_contas();
}
// ____________________________________
//| Função para limpar o local storage |
//|____________________________________|
function limpar_storage(){
localStorage.clear();
}
// ____________________________________________
//| Função para filtrar select o local storage |
//|____________________________________________|
function filtrar() {
 var lista = '<form>';
 for (var l=0; l < conjunto_contas.length; l++){
	 if(conjunto_contas[l].tipo == document.getElementById("filtro").value){
		 lista +='<label class="texto">data:</label>'+conjunto_contas[l].data
				 +'<br><label class="texto">Categoria:</label>'+conjunto_contas[l].categoria
				 +'<br><label class="texto">tipo:</label>'+conjunto_contas[l].tipo+'<br>'
				 +'<input type="button" value="Ver Elemento" id="texto" onclick=""> '+ '<input type="button" value="Remover" id="texto" onclick="removerlista(' +l + ')">'+ '<br>';
	 }
 lista +='</form>';
 }
			 document.getElementById("lista").innerHTML=lista;
// compara com o id=filtro se o inserido é igual, caso seja mostra
if(document.getElementById("filtro").value == "tudo"){
	 mostrar_contas();
 }
}

INDEX

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>As Minhas Contas</title>
 <link rel="stylesheet" type="text/css" href="./css/6colgrid.css" />
 <link rel="stylesheet" type="text/css" href="./css/css.css" />
 <script type="text/javascript" src="./js/JS.js"></script>
</head>
<body onload="carregar_atributos()">
 <div class="grid-container outline">
	 <div class="row">
		 <div class="col-2" id="caixa1">
			 <img src="./img/img1.jpg" alt=""/>
		 </div>
		 <div class="col-2" id="caixa2">
			 <h2 class="tipo1">As minhas Contas</h2>
			 <h2 class="tipo1">Inserir as Minhas Receitas/Despesas</h2>
			 <div>
				 <form id="inicio">
						 <label class="texto">Data:<br></label>
						 <input type="text" size="35" id="nome" required="true" placeholder="dd/mm/aaaa">
						 <br> <br>
					 <label class="texto">Descrição:<br></label>
						 <textarea rows="4" cols="26" id="descricao" placeholder="..."></textarea>
						 <br><br>
					 <label class="texto">Tipo:</label><br>
						 <select id="tipo" name="tipo">
							 <option value="">
							 <option value="Despesa">Despesa</option>
							 <option value="Receita">Receita</option>
						 </select>
						 <br/><br>

					 <label class="texto">Categoria:<br></label>
						 <input type="text" size="35" id="categoria" required="true" placeholder="..."><br><br>
						 <label class="texto">Preço:<br></label>
						 <input type="text" size="35" id="preco" placeholder="Introduça o Preço"><br>
						 <br><br>
						 <input type="button" value="INTRODUZIR" id="texto" onclick="criar();mostrar_contas();">
						 <input type="button" value="VOLTAR" id="texto" onclick=""><br>
						 <a href="./lista_despesas.html"><input type="button" value="Despesas" onclick=""></a>
						 <a href="./lista_receitas.html"><input type="button" value="Receitas" onclick=""></a>
						 <input type="button" value="Voltar" id="texto" onclick="">
			 </div>

		 </div>
		 <div class="col-2" id="caixa3">
			 <p></p>
		 </div>
	 </div>
	 </div>
 </div>
</body>
</html>

Agora ja nem introduz.... antes introduzia mas ficava no LocalStorage so que nao passava para as outras duas paginas...

viegasss · January 12, 2016 at 12:37 AM

agora so escreve na parte das Despesas, nas Reservas nada.... enfim

Rechousa · January 12, 2016 at 12:40 AM

Se analisares a consola, poderás ver também possíveis erros de javascript.

Por exemplo, verifiquei que o elemento HTML com o ID "data" não existe. Pois não, chamaste-lhe "nome".

viegasss · January 12, 2016 at 12:53 AM

VE AGORA TENHO TUDO EM ORDEM ELE ACEITA!!! FICA NO LOCAL STORAGE SO QUE NAO VAI PARA AS OUTRAS PÁGINAS (DESCULPA O CAPS)

JS

// _________________________________________________________________________
//| Criação de um array com o nome conjunto_contas para onde vão os Elementos  |
//|__________________________________________________________________________|
var conjunto_contas = new Array ();
//__Estrutura dos Elementos com os seus atributos__
var ElementoConta={
  constructor: function i (date, codigo , tipo , categoria , preco){
   this.date = date;
   this.codigo= codigo;
   this.tipo = tipo;
   this.categoria = categoria;
   this.preco = preco;
  },
  // ________________________________________________________________________________________________
  //| Vai buscar para a função os atributos por ID ou seja pelos ID's que atribuimos a cada atributo |
  //|________________________________________________________________________________________________|
  getdate: function(){ return this.date; },
  getCodigo: function(){ return this.codigo; },
  gettipo: function(){ return this.tipo; },
  getCategoria: function(){ return this.categoria; },
  getpreco: function(){ return this.preco; }
};

// ___________________________________
//| Função para criar um Elemento novo |
//|___________________________________|
function criarElemento() {
  var ElementoNovo = Object.create(ElementoConta);
  ElementoNovo.constructor(document.getElementById("date").value,
					   document.getElementById("codigo").value,
					   document.getElementById("tipo").value,
					   document.getElementById("categoria").value,
					   document.getElementById("preco").value);
   conjunto_contas.push(ElementoNovo);
   salvar_atributos();
}
// Funcao, que mostra todos os atributos inseridos....
function mostrar_contas() {
    var lista = '<form>';
    for (var l = 0; l < conjunto_contas.length; l++) {
		    if (conjunto_contas[l].tipo == "Despesa") {
				    lista += '<label class="texto">Data:</label>' + conjunto_contas[l].date + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].codigo + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].tipo + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].preco + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerElemento(' + l + ')">';
		    }
		    lista += '</form>';

		    console.log('vai mostrar a variavel lista apos verificar se é despesa', lista);
		    document.getElementById("despesas").innerHTML = lista;

		    if (conjunto_contas[l].tipo == "Receita") {
			  lista += '<label class="texto">Data:</label>' + conjunto_contas[l].date + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].codigo + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].tipo + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].preco + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerElemento(' + l + ')">';
		    }
		    lista += '</form>';
		    console.log('vai mostrar a variavel lista apos verificar se é receita', lista);
		    document.getElementById("receitas").innerHTML = lista;
    }
    console.log('Fim do ciclo. Conteúdo da variavel lista: ', lista);
}
// _____________________________
//| Função para remover Elemento |
//|_____________________________|
function removerElemento(l){
   conjunto_contas.splice(l,1);
   salvar_atributos();
   mostrar_contas();
	   alert("Elemento removido.");
}

// ____________________________
//| Função de suporte storage  |
//|____________________________|
function supports_html5_storage() {
  try
  {
   return 'localStorage' in window && window['localStorage'] !== null;
  }
  catch(e)
  {
   return false;
  }
}

// ___________________________________________
//| Função para salvar os atributos inseridos |
//|___________________________________________|
function salvar_atributos(){
  if(supports_html5_storage()){
   // guarda os atributos em artigos, cada artigo tem os diferentes atributos inseridos
	   localStorage.setItem('artigo' , JSON.stringify(conjunto_contas));
	   alert("Elemento adicionado.");
  }
}
// __________________________________________
//| Função para carregar os atributos salvos |
//|__________________________________________|
function carregar_atributos(){
  if(supports_html5_storage()){
   // guarda os atributos em artigos, cada artigo tem os diferentes atributos inseridos
   var i=localStorage.getItem('artigo');
	   if (i!=null){
		   conjunto_contas=JSON.parse(i);
	   }
  }
  mostrar_contas();
}
// ____________________________________
//| Função para limpar o local storage |
//|____________________________________|
function limpar_storage(){
  localStorage.clear();
  }
// ____________________________________________
//| Função para filtrar select o local storage |
//|____________________________________________|
function filtrar() {
   var lista = '<form>';
   for (var l=0; l < conjunto_contas.length; l++){
	   if(conjunto_contas[l].tipo == document.getElementById("filtro").value){
		   lista +='<label class="texto">date:</label>'+conjunto_contas[l].date
				   +'<br><label class="texto">Categoria:</label>'+conjunto_contas[l].categoria
				   +'<br><label class="texto">tipo:</label>'+conjunto_contas[l].tipo+'<br>'
				   +'<input type="button" value="Ver Elemento" id="texto" onclick=""> '+ '<input type="button" value="Remover" id="texto" onclick="removerElemento(' +l + ')">'+ '<br>';
	   }
   lista +='</form>';
   }
			    document.getElementById("lista").innerHTML=lista;
  // compara com o id=filtro se o inserido é igual, caso seja mostra
  if(document.getElementById("filtro").value == "tudo"){
	   mostrar_contas();
   }
  }

index

<!DOCTYPE html>
<html>
   <head>
    <meta charset="UTF-8">
    <title>As Minhas Contas</title>
    <link rel="stylesheet" type="text/css" href="./css/6colgrid.css" />
    <link rel="stylesheet" type="text/css" href="./css/css.css" />
    <script type="text/javascript" src="./js/JS.js"></script>
   </head>
   <body onload="carregar_atributos()">
    <div class="grid-container outline">
	    <div class="row">
		    <div class="col-2" id="caixa1">
			  <img src="./img/img1.jpg" alt=""/>
		    </div>
		    <div class="col-2" id="caixa2">
			   <h2 class="tipo1">As minhas Contas</h2>
			    <h2 class="tipo1">Inserir as Minhas Receitas/Despesas</h2>
			    <div>
				    <form id="inicio">
						 <label class="texto">Data:<br></label>
						 <input type="text" size="35" id="date" required="true" placeholder="dd/mm/aaaa">
						 <br> <br>
					    <label class="texto">Descrição:<br></label>
						    <textarea rows="4" cols="26" id="codigo" placeholder="..."></textarea>
						    <br><br>
					    <label class="texto">Tipo:</label><br>
						    <select id="tipo" name="tipo">
							    <option value="">
							    <option value="Despesa">Despesa</option>
							    <option value="Receita">Receita</option>
						    </select>
						    <br/><br>

					    <label class="texto">Categoria:<br></label>
						    <input type="text" size="35" id="categoria" required="true" placeholder="..."><br><br>
						    <label class="texto">Preço:<br></label>
						    <input type="text" size="35" id="preco" placeholder="Introduça o Preço"><br>
						    <br><br>
						    <input type="button" value="INTRODUZIR" id="texto" onclick="criarElemento();mostrar_contas();">
						    <input type="button" value="VOLTAR" id="texto" onclick="mostrar_contas()"><br>
						    <a href="./lista_despesas.html"><input type="button" value="Despesas" onclick=""></a>
						    <a href="./lista_receitas.html"><input type="button" value="Receitas" onclick=""></a>
						    <input type="button" value="Voltar" id="texto" onclick="">
			    </div>

		    </div>
		    <div class="col-2" id="caixa3">
			   <p></p>
		    </div>
	    </div>
	  </div>
  </div>
   </body>
</html>

Nao consigo perceber porque é que nao mostra nas outras duas paginas vou te enviar os outros dois....

LISTA_DESPESAS

<!DOCTYPE html>
<html>
   <head>
    <meta charset="UTF-8">
    <title>As Minhas Contas</title>
    <link rel="stylesheet" type="text/css" href="./css/6colgrid.css"/>
    <link rel="stylesheet" type="text/css" href="./css/css.css"/>
    <script type="text/javascript" src="./js/JS.js"></script>
   </head>
   <body onload="carregar_atributos()">
    <div class="grid-container outline">
	    <div class="row">
		    <div class="col-2" id="caixa1">
			  <img src="./img/img1.jpg" alt=""/>
		    </div>
		    <div class="col-2" id="caixa2">
			   <h2 class="tipo1">As minhas Contas</h2>
			    <h2 class="tipo1">Ver Minhas Receitas / Despesas </h2>
			    <div>
				    <form id="inicio">
						  <div class="">
						    <h2 id="caixa4">Lista Despesas:</h2>
						  </div>
						  <div id="despesas"></div>
				    </div>

			  </div>
		    <div class="col-2" id="caixa3">
			   <p>...</p>
		    </div>
	    </div>
	  </div>
  </div>
   </body>
</html>

LISTA_RECEITAS

<!DOCTYPE html>
<html>
   <head>
    <meta charset="UTF-8">
    <title>As Minhas Contas</title>
    <link rel="stylesheet" type="text/css" href="./css/6colgrid.css"/>
    <link rel="stylesheet" type="text/css" href="./css/css.css"/>
    <script type="text/javascript" src="./js/JS.js"></script>
   </head>
   <body onload="carregar_atributos()">
    <div class="grid-container outline">
	    <div class="row">
		    <div class="col-2" id="caixa1">
			  <img src="./img/img1.jpg" alt=""/>
		    </div>
		    <div class="col-2" id="caixa2">
			   <h2 class="tipo1">As minhas Contas</h2>
			    <h2 class="tipo1">Ver Minhas Receitas / Despesas </h2>
			    <div>
				    <form id="inicio">
						  <div class="">
						    <h2 id="caixa4">Lista Receitas:</h2>
						  </div>
						  <div id="receitas"></div>
				    </div>

			  </div>
		    <div class="col-2" id="caixa3">
			   <p>...</p>
		    </div>
	    </div>
	  </div>
  </div>
   </body>
</html>

CSS

body{
 color: #ffffff;
}
#caixa1{
   margin-left: -45%;
   margin-right: -45%;
}
#caixa1 img{
 width: auto;
 height: auto;
 margin-left: -10%;
 margin-top: -10%;
 background-size: 10000%;
}
#caixa2{
   border:#00FF00 solid 5px;
   border-radius: 8px;
   box-shadow:1px 1px 10px #ffffff;
   width:700px;
   margin-left: 10%;
   margin-right: 10%;
}
#caixa2 br{
 color: #ffffff;
}
#caixa3{
   margin-left: 100%;
   margin-right: 100%;
}
#caixa4{
   text-decoration-style:solid;
   font-family:Arial;
   color:#ffffff;
   margin-left: 3px;
   margin-right: 3px;
}

.tipo1{
  text-decoration-style:solid;
  font-family:Russo One;
  padding-left:10px;
  color:#ffffff;
  margin-left: 3px;
  margin-right: 3px;
  text-align: center
}

.fundo{
 position:absolute;
 width:100%;
height:100%;
 /*z-index: -1;*/
background-image: url("../img/img1.jpg");
background-size: 100%;
 background-repeat: repeat;
}
#inicio{
   margin-left:10px;
   margin-right:10px;
   margin-bottom:10px;
   float: left;
}
#inicio p{
 color: #ffffff;
}
#texto{
   color:black;
   text-align:left;
   margin-left: 1px;
   margin-right: 3px;
   margin-bottom: 20px;
   margin-top: 20px;
   font-family: Arial;
   border-radius: 20px;
}
.parte_codigo{
   background-color:#ffffff;
   text-decoration-style:solid;
   font-family:Russo One;
   margin-left: 10px;
   margin-right: 10px;
   border-radius: 18px;
}

CSS GRID

* {box-sizing: border-box;}
.grid-container{
 width: 100%;
 max-width: 1000px;
 margin-left:auto;
 margin-right:auto;
 background-color:#ffffff;
}
/*-- our cleafix hack -- */
.row:before,
.row:after {
   content:"";
   display: table ;
   clear:both;
}
[class*='col-'] {
   float: left;
   min-height: 1px;
   width: 16.66%;
   /*-- our gutter -- */
   padding-bottom:10px;
   padding-right:10px;
   /*padding-left:10px;
   /*padding-top:10px;*/
}
.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%;    }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%;   }
.outline{
   outline-offset:inherit;
   padding:5px;
}
/*-- Responsive part --*/
@media all and (max-width:800px){
   .col-1{ width: 33.33%;  }
   .col-2{ width: 50%;	 }
   .col-3{ width: 100%;    }
   .col-4{ width: 100%;    }
   .col-5{ width: 100%;    }
   .col-6{ width: 100%;    }
   .row .col-2:last-of-type{
    width: 100%;
   }
   .row .col-5 ~ .col-1{
    width: 100%;
   }
}

@media all and (max-width:650px){
   .col-1{ width: 50%;	 }
   .col-2{ width: 100%;    }
   .col-3{ width: 100%;    }
   .col-4{ width: 100%;    }
   .col-5{ width: 100%;    }
   .col-6{ width: 100%;    }
}
@media all and (max-width:450px){
   .col-1{ width: 100%;    }
   .col-2{ width: 100%;    }
   .col-3{ width: 100%;    }
   .col-4{ width: 100%;    }
   .col-5{ width: 100%;    }
   .col-6{ width: 100%;    }
}

ESTOU A DAR EM DOIDO

viegasss · January 12, 2016 at 10:43 PM

Só para dizer que ja consegui resolver o problema, com um pouca de dedicação, concentração e tentativa, lá consegui....

obrigado pela ajuda que foi aqui dita

tuga74 · January 12, 2016 at 11:57 PM

OK...... algumas coisinhas...comentei no ficheiro JS

// _________________________________________________________________________
//| Criação de um array com o nome conjunto_contas para onde vão os Elementos |
//|__________________________________________________________________________|
var conjunto_contas = new Array();
//__Estrutura dos Elementos com os seus atributos__
var ElementoConta = {
constructor: function i(date, codigo, tipo, categoria, preco) {
 this.date = date;
 this.codigo = codigo;
 this.tipo = tipo;
 this.categoria = categoria;
 this.preco = preco;
},
// ________________________________________________________________________________________________
//| Vai buscar para a função os atributos por ID ou seja pelos ID's que atribuimos a cada atributo |
//|________________________________________________________________________________________________|
getdate: function () {
 return this.date;
},
getCodigo: function () {
 return this.codigo;
},
gettipo: function () {
 return this.tipo;
},
getCategoria: function () {
 return this.categoria;
},
getpreco: function () {
 return this.preco;
}
};
// ___________________________________
//| Função para criar um Elemento novo |
//|___________________________________|
function criarElemento() {
var ElementoNovo = Object.create(ElementoConta);
ElementoNovo.constructor(document.getElementById("date").value,
 document.getElementById("codigo").value,
 document.getElementById("tipo").value,
 document.getElementById("categoria").value,
 document.getElementById("preco").value);
conjunto_contas.push(ElementoNovo);
salvar_atributos();
}
// Funcao, que mostra todos os atributos inseridos....
/* otimiza com variavel, se passares a variavel ele mostra só aquele tipo, como não percebi bem o que queres fazer
na função no HTML fazer <body onload="carregar_atributos('despesas')">
function mostrar_contas() {
*/
function mostrar_contas(pagina) {
var lista = '<form>';
for (var l = 0; l < conjunto_contas.length; l++) {
 /*
	 Neste caso vai correr todas as depesas e receitas, independentemente se são receitas ou despesas. Se estás na
	 páginas das receitas pelo que vi não precisas das despesas, logo poderias otimizar o código com uma variavel "página"
	 */
 /* otimiza com variavel
	 if (conjunto_contas[l].tipo == "Despesa") {
	 */
 if (conjunto_contas[l].tipo == "Despesa" && pagina == "despesas") {
	 lista += '<label class="texto">Data:</label>' + conjunto_contas[l].date + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].codigo + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].tipo + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].preco + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerElemento(' + l + ')">';
	 console.log('vai mostrar a variavel lista apos verificar se é despesa', lista);
	 document.getElementById("despesas").innerHTML = lista;
 }
 /*
	 lista += '</form>';
	 console.log('vai mostrar a variavel lista apos verificar se é despesa', lista);
	 document.getElementById("despesas").innerHTML = lista;
	 */
 /* otimiza com variavel
	 if (conjunto_contas[l].tipo == "Receita") {
	 */
 if (conjunto_contas[l].tipo == "Receita" && pagina == 'receitas') {
	 lista += '<label class="texto">Data:</label>' + conjunto_contas[l].date + '<br><label class="texto">Descriçao:</label>' + conjunto_contas[l].codigo + '<br><label class="texto">Tipo:</label>' + conjunto_contas[l].tipo + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria + '<br><label class="texto">Preço:</label>' + conjunto_contas[l].preco + '<br>' + '<input type="button" value="Ver contas" id="texto" onclick="mostrar_contas(' + l + ')"> ' + '<input type="button" value="Remover" id="texto" onclick="removerElemento(' + l + ')">';
	 console.log('vai mostrar a variavel lista apos verificar se é receita', lista);
	 document.getElementById("receitas").innerHTML = lista;
 }
 /* Este elemento não vais querer aqui, tem de estar fora do "for" senão a cada conta vai fechar o form
	 lista += '</form>';
	 */
 /* é melhor colocar dentro do "if" para que vais procurar por um id que não existe?
	 console.log('vai mostrar a variavel lista apos verificar se é receita', lista);
	 document.getElementById("receitas").innerHTML = lista;
	 */
}
/*
 Fora do for colocas o fim do elemento form
 */
lista += '</form>';
console.log('Fim do ciclo. Conteúdo da variavel lista: ', lista);
}
// _____________________________
//| Função para remover Elemento |
//|_____________________________|
function removerElemento(l) {
conjunto_contas.splice(l, 1);
salvar_atributos();
mostrar_contas();
alert("Elemento removido.");
}
// ____________________________
//| Função de suporte storage |
//|____________________________|
function supports_html5_storage() {
try {
 return 'localStorage' in window && window['localStorage'] !== null;
}
catch (e) {
 return false;
}
}
// ___________________________________________
//| Função para salvar os atributos inseridos |
//|___________________________________________|
function salvar_atributos() {
if (supports_html5_storage()) {
 // guarda os atributos em artigos, cada artigo tem os diferentes atributos inseridos
 localStorage.setItem('artigo', JSON.stringify(conjunto_contas));
 alert("Elemento adicionado.");
}
}
// __________________________________________
//| Função para carregar os atributos salvos |
//|__________________________________________|
/*
mudei para poderes chamar só 1 tipo de atributos
function carregar_atributos() {
*/
function carregar_atributos(pagina) {
if (supports_html5_storage()) {
 // guarda os atributos em artigos, cada artigo tem os diferentes atributos inseridos
 var i = localStorage.getItem('artigo');
 if (i != null) {
	 conjunto_contas = JSON.parse(i);
 }
}
/*
 só para 1 tipo de atributos
 mostrar_contas();
 */
if (typeof pagina === "undefined")
 pagina = "todas";
mostrar_contas(pagina);
}
// ____________________________________
//| Função para limpar o local storage |
//|____________________________________|
function limpar_storage() {
localStorage.clear();
}
// ____________________________________________
//| Função para filtrar select o local storage |
//|____________________________________________|
function filtrar() {
var lista = '<form>';
for (var l = 0; l < conjunto_contas.length; l++) {
 if (conjunto_contas[l].tipo == document.getElementById("filtro").value) {
	 lista += '<label class="texto">date:</label>' + conjunto_contas[l].date
		 + '<br><label class="texto">Categoria:</label>' + conjunto_contas[l].categoria
		 + '<br><label class="texto">tipo:</label>' + conjunto_contas[l].tipo + '<br>'
		 + '<input type="button" value="Ver Elemento" id="texto" onclick=""> ' + '<input type="button" value="Remover" id="texto" onclick="removerElemento(' + l + ')">' + '<br>';
 }
 lista += '</form>';
}
document.getElementById("lista").innerHTML = lista;
// compara com o id=filtro se o inserido é igual, caso seja mostra
if (document.getElementById("filtro").value == "tudo") {
 mostrar_contas();
}
}

HTML

corrige o codigo HTML , ter vários elementos com o mesmo id não é boa ideia para além de estar incorreto.

PS. Parece que cheguei atrasado, fica a boa vontade

Edited January 12, 2016 at 11:58 PM by tuga74

viegasss · January 15, 2016 at 08:15 PM

TUGA74 Obrigado! Já consegui resolver o problema....

Digam-me uma coisa existe alguma maneira de colocar uma mask permanente na data ?

este é o meu código da data

function verificar_data(){

var data = document.getElementById("dataa").value;
var dia = data.substring(0,2)
var mes = data.substring(3,5)
var ano = data.substring(6,10)
//Criar um objeto Date usando os valores ano, mes e dia.
var novaData = new Date(ano,(mes-1),dia);

var mesmoDia = parseInt(dia,10) == parseInt(novaData.getDate());
var mesmoMes = parseInt(mes,10) == parseInt(novaData.getMonth())+1;
var mesmoAno = parseInt(ano) == parseInt(novaData.getFullYear());
if (!((mesmoDia) && (mesmoMes) && (mesmoAno))){
 return false;
}
return true;
}

e vi este código mas nao funciona

function carregar_mask(){
 var errorMessage = "Invalid date: ${value}. Expected format: ${mask}";
 var dateMask1 = new DateMask("dd/MM/yyyy", "date1");
 dateMask1.validationMessage = errorMessage;
}

este é o html

<label class="texto">Data:<br></label>
<input type="text" size="35" id="dataa" name="date1" maxlength="19" required="true" placeholder="DD/MM/AAAA">

Edited January 15, 2016 at 08:28 PM by viegasss

Ciclo for com problemas

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information