Script error to make a market list

Asked

Viewed 40 times

0

The problem: When running on Google Chrome, the browser accuses having an error in the function lerLista although I have not managed to solve I believe that it is a problem the capture of the field product.

<!DOCTYPE html>
<head>
	<title>Lista de Compras</title>
	<meta charset="UTF-8"/> 
</head>
<html>
<body>
<h2>Item lista de compra</h2>
<form name="entradaDaLista">
		
		Produto: <input type="text" id="produtoId" name="produto" >
		Quantidade:<input type="text" id="quantidadeId" name="quantidade"  >
		Preço:<input type="text" id="precoId" name="preco" >
		<button type="button" onclick="criaLista()">Incluir</button>
		<p id="output"></p>
</form>

</body>
<script>


function item(){

this.produto=document.getElementById("produtoId");
this.quantidade=document.getElementById("quantidadeId").value;
this.preco=document.getElementById("precoId").value;

}
function criaLista(){
var lista=[]; 
	for( var i=0;i<lista.length;i++){
	lista[i].push(new item());
	}
lerLista(lista);
 
}






function lerLista(lista){
document.getElementById("output").innerHTML +="Lista de compras <br> Produto  
Quantidade  Preço  Total";
for (var i of lista){
document.getElementById("output").innerHTML +="<br>";
document.getElementById("output").innerHTML +=" "+ lista[i].produto;
document.getElementById("output").innerHTML +=" 
"+parse.int(lista[i].quantidade);
document.getElementById("output").innerHTML +=" "+parse.int(lista[i].preco);
document.getElementById("output").innerHTML +=" 
"+parse.int(lista[i].quantidade*lista[i].preco);
}
}
</script>
</html>

Error returned:

Uncaught Syntaxerror: Invalid or Unexpected token

  • 1

    The error is because there is line break in the code in: document.getElementById("output").innerHTML +="Lista de compras <br> Produto &#xA;Quantidade Preço Total"; also in: document.getElementById("output").innerHTML +=" &#xA;"+parse.int(lista[i].quantidade); and document.getElementById("output").innerHTML +=" &#xA;"+parse.int(lista[i].quantidade*lista[i].preco);

  • 1

    See the snippet, now gives to realize the line break in the code.

  • Hi Noobsaibot(stylish name kk). I’m sorry but I could tell what is snippet?

1 answer

1

Your creationList() function will never fill the list array because the list.length property is always zero once you’ve just created the array on the top line.

<!DOCTYPE html>
<head>
	<title>Lista de Compras</title>
	<meta charset="UTF-8"/> 
</head>
<html>
<body>
<h2>Item lista de compra</h2>
<form name="entradaDaLista">
		
		Produto: <input type="text" id="produtoId" name="produto" >
		Quantidade:<input type="text" id="quantidadeId" name="quantidade"  >
		Preço:<input type="text" id="precoId" name="preco" >
		<button type="button" onclick="adicionaItem()">Incluir</button>
		<p id="output"></p>
</form>

</body>
<script>
var lista=[]; 

function item(){

this.produto=document.getElementById("produtoId").value;
this.quantidade=document.getElementById("quantidadeId").value;
this.preco=document.getElementById("precoId").value;

}
function adicionaItem(){


	lista.push(new item());
	
  lerLista(lista);
 
}






function lerLista(lista){
document.getElementById("output").innerHTML ="Lista de compras <br> Produto  Quantidade  Preço  Total";
for (var item of lista){
document.getElementById("output").innerHTML +="<br>";
document.getElementById("output").innerHTML += item.produto;
document.getElementById("output").innerHTML += item.quantidade;
document.getElementById("output").innerHTML += item.preco;
document.getElementById("output").innerHTML += parseInt(item.quantidade)*parseInt(item.preco);
}
}
</script>
</html>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.