Reputation: 41

Js doesnt completely work in a .js file, but works in a html file with the <script> tag

I'm having trouble understanding why my volume slider doesn't work whenever the JS is in a JavaScript file, but works whenever its in a html file with the < script> tag.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>wynn</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
    <script src="script.js"></script> <!-- this has the same thing as the bottom JS has. -->
    <script>
      window.onload = function() {
        twemoji.parse(document.body, {
          folder: 'svg',
          ext: '.svg'
        });

      }

    </script>
    <style>
      img.emoji {
        width: 20px;
        pointer-events: none;
      }

    </style>
  </head>

  <body>

    <div class="center-screen">
      <div class="card" style="width: 500px;">
        <div class="card-body">
          <!-- BANNER -->
          <img src="" class="ay banner" style="width: 400px; height: 0px;">
          <!-- PFP + NAME -->
          <h5 class="card-title profiletext"><img src="https://cdn.discordapp.com/avatars/668093899683790859/a_57ab56ba8ed8be7ffef2686a81129ac3.gif" class="round profile" style="width: 100px; height: 100px;">wynn</h5>
          <!-- DESCRIPTION -->
          <p class="card-text">i am wynn u know me from some places or you're just clicking on random peoples profiles on discord, either way hi👽👽👽</p>
          <!-- VOLUME SLIDER -->
          <div class="card-footer">
            <span id="play-pause-button" class="input-group-text"><input type="range" id="volume-slider" min="0" max="100" value="50" style="width: 500px;">
            </span>
            <!-- DIVS -->
          </div>
        </div>
      </div>
    </div>

    <figure>
      <a href="https://discord.com/users/668093899683790859" target="_blank" class="corner_img"><i class="fab fa-discord"></i>
        <a href="https://twitter.com/heysorokin" target="_blank" class="corner_img2"><i class="fab fa-twitter"></i>
        </a>
      </a>
    </figure>

<script type="text/javascript">
        var audio = new Audio("audio.mp3");
      audio.volume = 0.5;
      audio.loop = true;
      document.onclick = function() {
        audio.play();
      }
      let volume = document.getElementById('volume-slider');
      volume.addEventListener("change", function(e) {
        audio.volume = e.currentTarget.value / 100;
      })
      $(function() {
        $('[data-toggle="tooltip"]').tooltip()
      })
</script>
  </body>

</html>

The Volume slider code is at the bottom. Another thing to note is that the volume slider won't work if the JavaScript is at the top of the code instead of the bottom, maybe it is due to loading errors? I'm not sure and I really need help.

Upvotes: 2

Answers (2)

Kazi Tajnur Islam

Reputation: 56

Add your custom script file as the last element of your body tag.

Following is your HTML file:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>wynn</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
  <style>
    img.emoji {
      width: 20px;
      pointer-events: none;
    }
  </style>
</head>

<body>

  <div class="center-screen">
    <div class="card" style="width: 500px;">
      <div class="card-body">
        <!-- BANNER -->
        <img src="" class="ay banner" style="width: 400px; height: 0px;">
        <!-- PFP + NAME -->
        <h5 class="card-title profiletext"><img
            src="https://cdn.discordapp.com/avatars/668093899683790859/a_57ab56ba8ed8be7ffef2686a81129ac3.gif"
            class="round profile" style="width: 100px; height: 100px;">wynn</h5>
        <!-- DESCRIPTION -->
        <p class="card-text">i am wynn u know me from some places or you're just clicking on random peoples profiles on
          discord, either way hi👽👽👽</p>
        <!-- VOLUME SLIDER -->
        <div class="card-footer">
          <span id="play-pause-button" class="input-group-text"><input type="range" id="volume-slider" min="0" max="100"
              value="50" style="width: 500px;">
          </span>
          <!-- DIVS -->
        </div>
      </div>
    </div>
  </div>

  <figure>
    <a href="https://discord.com/users/668093899683790859" target="_blank" class="corner_img"><i
        class="fab fa-discord"></i>
      <a href="https://twitter.com/heysorokin" target="_blank" class="corner_img2"><i class="fab fa-twitter"></i>
      </a>
    </a>
  </figure>

  <!-- Add Your Custom Script Here -->
  <script type="text/javascript" src="/myScript.js"></script>
</body>

</html>

Following is 'myScript.js' file:

window.onload = function () {
  twemoji.parse(document.body, {
    folder: 'svg',
    ext: '.svg'
  });

}


var audio = new Audio("audio.mp3");
audio.volume = 0.5;
audio.loop = true;
document.onclick = function () {
  audio.play();
}
let volume = document.getElementById('volume-slider');
volume.addEventListener("change", function (e) {
  audio.volume = e.currentTarget.value / 100;
})
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Upvotes: 1

Arezou Saremian

Reputation: 508

It is better to render your Html and css code first and then render your script because they are interdependent. Therefore, it is recommended that you add script tags at the bottom of your code

Upvotes: 0

Js doesnt completely work in a .js file, but works in a html file with the &lt;script&gt; tag

Answers (2)

Related Questions

Js doesnt completely work in a .js file, but works in a html file with the <script> tag