Javascript calculator that works in jsfiddle but not as HTML page, no error showing

Question

I have a jsfiddle of a Javascript calculator. It works in the jsfiddle. I then put them together in an HTML page in the following manner, but the values at the bottom are not updating after dragging the bars. There are no errors in the Chrome console.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style><!--
    :root {
      /* ... */
    }
  --></style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>// <![CDATA[
      $(".calculator input").on("input change", function (event) {
        // ...
      });
      // ]]>
  </script>

</head>
<body>
  <div id="bmr-calculator" class="wrapper" style="margin-top: 100px; margin-bottom: 100px;">
    <!-- ... -->
  </div>
</body>
</html>

I tried putting JS before </head> but that didn't work either.

Your script is running before your DOM has built. Wrap your script in a `$(function() { ... });` block... or move it to the end of the `` (just before ``). JSFiddle automatically puts the script at the end of body for you — freefaller, Jun 14 '23 at 10:38

Javascript calculator that works in jsfiddle but not as HTML page, no error showing

0 Answers0