6
Guys, I need the "Tag Script" inside the "Tag Head" but unfortunately it’s only working when I put it at the end of the html. Please, if anyone knows the reason why this is happening, please help.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Artistic Pizzeria</title>
<meta charset="utf-8" />
<meta name="description" content="Pizzas artisticas">
<meta name="keywords" content="Pizza,Pizzaria,Pizzeria,Artistic,Art">
<meta name="author" content="Larissa Mourullo">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<a href="index.html"><img src="LOGO" title="LOGO" alt="LOGO" /></a>
<nav>
<a href="index.html">HOME</a>
<a href="historia.html">HISTÓRIA</a>
<a href="cardapio.html">CARDÁPIO</a>
<a href="contato.html">CONTATO</a>
<a href="login.html">LOGIN</a>
<a href="cadastrar.html">CADASTRO</a>
</nav>
</header>
<article>
<h1>Pizza 3</h1>
<form>
<p>Sabores:</p>
<select id="sabores">
<option value="">Nenhum</option>
<option value="1">Goiaba</option>
<option value="2">Tutifruti</option>
<option value="3">Mangericão</option>
</select>
<p>Tamanho da Pizza:</p>
<select id="tmhpizza">
<option value="{"preco":20,"desc":"R$20,00"}">Brotinho - R$20,00</option>
<option value="{"preco":45,"desc":"R$45,00"}">Pequena - R$45,00</option>
<option value="{"preco":70,"desc":"R$70,00"}">Média - R$70,00</option>
<option value="{"preco":95,"desc":"R$95,00"}">Grande - R$95,00</option>
<option value="{"preco":120,"desc":"R$120,00"}">Gigante - R$120,00</option>
</select>
<p>Quantidade de Pizzas:</p>
<select id="qntpizza" data-rel="tmhpizza">
<option value="0">Nenhum</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p>Refrigerante:</p>
<select id="refri">
<option value="">Nenhum</option>
<option value="Kuat">Kuat</option>
<option value="Soda">Soda</option>
<option value="Pepsi">Pepsi</option>
<option value="Sprite">Sprite</option>
<option value="Coca Zero">Coca Zero</option>
<option value="Fanta Uva">Fanta Uva</option>
<option value="Coca-Cola">Coca-Cola</option>
<option value="Mineirinho">Mineirinho</option>
<option value="Pepsi Twist">Pepsi Twist</option>
<option value="Guaraná Zero">Guaraná Zero</option>
<option value="Fanta Laranja">Fanta Laranja</option>
<option value="Guaraná Black">Guaraná Black</option>
<option value="Guaraná Antarctica">Guaraná Antarctica</option>
</select>
<p>Tamanho do Refrigerante:</p>
<select id="tmhrefri">
<option value="{"preco":4.5,"desc":"R$4,50"}">350ml - R$4,50</option>
<option value="{"preco":6.3,"desc":"R$6,30"}">750ml - R$6,30</option>
<option value="{"preco":8.1,"desc":"R$8,10"}">1L - R$8,10</option>
<option value="{"preco":9.9,"desc":"R$9,90"}">2L - R$9,90</option>
<option value="{"preco":11.7,"desc":"R$11,70"}">2,5L - R$11,70</option>
</select>
<p>Quantidade de Refrigerante:</p>
<select id="qntrefri" data-rel="tmhrefri">
<option value="0">Nenhum</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p>Preço:</p>
<input id="total" type="text" name="preco" />
<input type="button" id="calcular" value="Calcular" />
</form>
</article>
<footer>
<p>© 2015 Artistic Pizzeria. Todos os direitos reservados.</p>
</footer>
</body>
</html>
This is the Javascript:
var calcular = document.getElementById('calcular');
calcular.addEventListener('click', function () {
var selects = document.querySelectorAll('select[data-rel]');
var precos = [].map.call(selects, function (select) {
var multiplicador = parseInt(select.value, 10);
var json = document.getElementById(select.dataset.rel).value;
var produto = JSON.parse(json);
return parseFloat(produto.preco) * multiplicador;
});
document.querySelector('input[name="preco"]').value = precos.reduce(function (a, b) {
return a + b;
}, 0);
});
Why do you need to ? It’s actually good for her to stay down there anyway - in this case.
– Diego Souza
It’s a job I’m having to do for college. I’d also prefer it down there, but unfortunately it’s necessary to be inside the <head>
– Larissa Mourullo
Got it. So I believe you can apply the @gustavox suggestion below by putting a
window.onload.– Diego Souza