-2

Tenho uma tabela com algumas listas suspensas e os demais valores resultados da busca em um array de acordo com a seleção nestas listas, e esse script é executado diretamente na pagina de um blog: inserir a descrição da imagem aqui

No codigo estou tentando calcular a soma de "peso" + "agua" multiplicando por um input numerico de "comprimento" Mas na celula Total o "resultado" só dá NaN

<td id="comprimento">
<label for="numero"></label>
  <input type="number" id="numero" name="numero" style="background-color: #ddd; width: 30%">
</td>
      
<td id="resultado">
 
  
  <script>
  function calcular() {
  // Acessa os valores das células de origem
  var valorPeso = document.getElementById("peso").innerHTML;
  var valorAgua = document.getElementById("agua").innerHTML;
  var valorComprimento = document.getElementById("comprimento").value;

  // Converte os valores em números e faz a soma
  var soma = (parseFloat(valorPeso) + parseFloat(valorAgua)) * parseFloat(valorComprimento);

  // Define o valor da célula de destino como a soma
  document.getElementById("resultado").innerHTML = soma;
}
    

// Adiciona um ouvinte de eventos para o botão "Calcular"
document.getElementById("calcular").addEventListener("click", calcular);

  </script>
    
</td>
        
      </tr>

      </tbody> 
  </table>
  
  <button onclick="calcular()">Calcular</button>
5
  • 1
    Com o fragmento mostrado na pergunta não é possível reproduzir a sua tabela. Mas tenho algumas observações, onde usa innerHTML não seria innerText? Aqui var valorComprimento = document.getElementById("comprimento").value; não seria var valorComprimento = document.getElementById("numero").value;? Commented 19/03/2023 às 8:12
  • @AugustoVasques pode colocar seu comentário como resposta ? As horas em madrugada não me fizeram enxergar isso :/
    – h1k3rpath
    Commented 19/03/2023 às 15:22
  • 1
    Não posso colocar o comentário como resposta porque não consigo a partir do exemplo chegar ao problema descrito na pergunta. Me sinto desconfortável em dar uma resposta e também tem o fato de ser uma tabela de calculo, se houver outra linha para calculo nessa tabela não irá funcionar então minha abordagem ao problema seria outra. Commented 19/03/2023 às 18:16
  • Era problema de sintaxe, como voce bem colocou. de qualquer forma, obrigado.
    – h1k3rpath
    Commented 19/03/2023 às 20:17
  • Não é só um problema de sintaxe. Você tem problemas explicito com aproveitamento de memoria e desempenho que a resposta aceita ignora e a correção do modelo de alocação de variáveis também não foi coberto pela resposta. Commented 19/03/2023 às 20:26

1 Resposta 1

-1

Sim deve usar o document.getElementById("numero").value;, pois ele que vai fazer referência ao input, no qual tem o valor do comprimento o document.getElementById("comprimento").value; faz referencia ao elemento td.

É por isso que está dando NaN.

O innerHTML ele pega a sintaxe do html, exemplo se voce tem um paragrafo

<p>Ola <span>como vai</span></p>

e voce usa o innerHTML para pegar o conteudo dessa paragrafo ele irá retornar

Ola <span>como vai</span>

Já o innerText ele pega o conteúdo renderizado, so o texto.

2
  • Aceitei essa resposta, pois realmente estava com problema de sintaxe. obrigado.
    – h1k3rpath
    Commented 19/03/2023 às 20:17
  • kkk desculpa por ter mandado sobre o innerHTML e o innerText achei que vc tinha perguntado isso, mas era um comentário de outro usuario, sou novo aqui.
    – João
    Commented 20/03/2023 às 1:56

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