6

Galera, preciso que a "Tag Script" fique dentro da "Tag Head" mas infelizmente ela só está funcionando quando a coloco no final do html. Por favor, se alguém souber o motivo pelo qual isso está ocorrendo, por favor, deem uma ajuda.

Esse é o 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="{&quot;preco&quot;:20,&quot;desc&quot;:&quot;R$20,00&quot;}">Brotinho - R$20,00</option>
                <option value="{&quot;preco&quot;:45,&quot;desc&quot;:&quot;R$45,00&quot;}">Pequena - R$45,00</option>
                <option value="{&quot;preco&quot;:70,&quot;desc&quot;:&quot;R$70,00&quot;}">Média - R$70,00</option>
                <option value="{&quot;preco&quot;:95,&quot;desc&quot;:&quot;R$95,00&quot;}">Grande - R$95,00</option>
                <option value="{&quot;preco&quot;:120,&quot;desc&quot;:&quot;R$120,00&quot;}">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="{&quot;preco&quot;:4.5,&quot;desc&quot;:&quot;R$4,50&quot;}">350ml - R$4,50</option>
                <option value="{&quot;preco&quot;:6.3,&quot;desc&quot;:&quot;R$6,30&quot;}">750ml - R$6,30</option>
                <option value="{&quot;preco&quot;:8.1,&quot;desc&quot;:&quot;R$8,10&quot;}">1L - R$8,10</option>
                <option value="{&quot;preco&quot;:9.9,&quot;desc&quot;:&quot;R$9,90&quot;}">2L - R$9,90</option>
                <option value="{&quot;preco&quot;:11.7,&quot;desc&quot;:&quot;R$11,70&quot;}">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>

Esse é o 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);
});
3
  • Por que você precisa ? Na verdade é bom ela ficar lá em baixo mesmo - nesse caso. Commented 8/07/2015 às 19:02
  • É um trabalho que estou tendo que fazer para a faculdade. Também preferiria lá em baixo, mas infelizmente é necessário que esteja dentro do <head> Commented 8/07/2015 às 19:32
  • 1
    Entendi. Então acredito que você pode aplicar a sugestão do @gustavox abaixo, colocando um window.onload. Commented 8/07/2015 às 19:34

2 Respostas 2

6

O teu código JavaScript na forma atual, acaba por ser lido antes dos elementos estarem disponíveis no DOM, motivo o qual não funciona dando um erro tipo:

TypeError: calcular is null

O ideal, quando falamos em desempenho, é ter o JavaScript imediatamente antes do fecho da tag </body>:

    <!-- ... -->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

A alternativa, quando é requerido que o mesmo esteja entre as tags <head></head> é colocar o código dentro de uma função, para que o mesmo não seja lido imediatamente mas sim quando a referida função for chamada.

Posteriormente, chamamos a função no momento mais adequado, no teu caso, logo que o DOM esteja disponível já podemos chama-la:

/**
 * A função com o código
 */
function calculando() {

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

// Chamar a função imediatamente assim que o DOM estiver disponível
document.addEventListener('DOMContentLoaded', calculando, false);

Exemplo:

<!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>
    function calculando() {

      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);
      });
    }
    document.addEventListener('DOMContentLoaded', calculando, false);
  </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="{&quot;preco&quot;:20,&quot;desc&quot;:&quot;R$20,00&quot;}">Brotinho - R$20,00</option>
        <option value="{&quot;preco&quot;:45,&quot;desc&quot;:&quot;R$45,00&quot;}">Pequena - R$45,00</option>
        <option value="{&quot;preco&quot;:70,&quot;desc&quot;:&quot;R$70,00&quot;}">Média - R$70,00</option>
        <option value="{&quot;preco&quot;:95,&quot;desc&quot;:&quot;R$95,00&quot;}">Grande - R$95,00</option>
        <option value="{&quot;preco&quot;:120,&quot;desc&quot;:&quot;R$120,00&quot;}">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="{&quot;preco&quot;:4.5,&quot;desc&quot;:&quot;R$4,50&quot;}">350ml - R$4,50</option>
        <option value="{&quot;preco&quot;:6.3,&quot;desc&quot;:&quot;R$6,30&quot;}">750ml - R$6,30</option>
        <option value="{&quot;preco&quot;:8.1,&quot;desc&quot;:&quot;R$8,10&quot;}">1L - R$8,10</option>
        <option value="{&quot;preco&quot;:9.9,&quot;desc&quot;:&quot;R$9,90&quot;}">2L - R$9,90</option>
        <option value="{&quot;preco&quot;:11.7,&quot;desc&quot;:&quot;R$11,70&quot;}">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>

2

Você pode fazer isso com window.load, veja abaixo:

<!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>
  <script>
  window.onload = function() {
    
    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);
});
    
    }
  
  </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="{&quot;preco&quot;:20,&quot;desc&quot;:&quot;R$20,00&quot;}">Brotinho - R$20,00</option>
                <option value="{&quot;preco&quot;:45,&quot;desc&quot;:&quot;R$45,00&quot;}">Pequena - R$45,00</option>
                <option value="{&quot;preco&quot;:70,&quot;desc&quot;:&quot;R$70,00&quot;}">Média - R$70,00</option>
                <option value="{&quot;preco&quot;:95,&quot;desc&quot;:&quot;R$95,00&quot;}">Grande - R$95,00</option>
                <option value="{&quot;preco&quot;:120,&quot;desc&quot;:&quot;R$120,00&quot;}">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="{&quot;preco&quot;:4.5,&quot;desc&quot;:&quot;R$4,50&quot;}">350ml - R$4,50</option>
                <option value="{&quot;preco&quot;:6.3,&quot;desc&quot;:&quot;R$6,30&quot;}">750ml - R$6,30</option>
                <option value="{&quot;preco&quot;:8.1,&quot;desc&quot;:&quot;R$8,10&quot;}">1L - R$8,10</option>
                <option value="{&quot;preco&quot;:9.9,&quot;desc&quot;:&quot;R$9,90&quot;}">2L - R$9,90</option>
                <option value="{&quot;preco&quot;:11.7,&quot;desc&quot;:&quot;R$11,70&quot;}">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>

Mas o script só vai funcionar depois que a página estiver totalmente carregada.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .