Jump to content

Ciclo for com problemas


viegasss
 Share

Recommended Posts

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;

    }
Link to comment
Share on other sites

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.

Pedro Martins

Sharing is Knowledge!

http://www.linkedin.com/in/rechousa

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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);
}

Pedro Martins

Sharing is Knowledge!

http://www.linkedin.com/in/rechousa

Link to comment
Share on other sites

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...

Capturar2.pngCapturar3.png

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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by tuga74

http://www.nova.news

Nova aprende automaticamente o que gostas de ler e mostra os conteúdos que te interessam.

Link to comment
Share on other sites

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 by viegasss
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.