JavaScript / jQuery not being executed while in script tags

Question

This is my code:

<form>
  <fieldset>
    <legend>Appearance</legend>
    <p>
      <label>Select Race:</label>
      <select id="Race">
        <option value="human">Human</option>
        <option value="faela">Faela</option>
        <option value="domovoi">Domovoi</option>
        <option value="arcon">Arcon</option>
        <option value="tsaaran">Tsaaran</option>
      </select>
    </p>
    <p>
      <label>Select Gender</label>
      <select id="Gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
    </p>
    <p>
      <label for="range">Select Age:</label>
      <input type="range" min="10" max="80" id="slider" value="10" name="range"> <span id="output"></span>

    </p>
  </fieldset>
</form>

<script>
  window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    $('#Race').change(function() {
      if (this.value == "faela") {
        $('#slider').prop({
          'min': 10,
          'max': 70
        });
      }
      if (this.value == "human") {
        $('#slider').prop({
          'min': 10,
          'max': 80
        });
      }
      $('#slider').val(10);
      output.html('10');
    });
  }

</script>

My code works fine when the javascript is kept seperate as a .js file. However, when its within the HTML using the script tags, it does not work. The output of the slider values are not being outputted. I researched this and found that I should add window.onload = function() {} However, even after adding that it didnt ouput the values of the slider.

Please let me know how I can fix this. Thanks,

Answer 1

You should be seeing an error in your console that says the symbol $ is not recognized. This is because your document doesn't include the jQuery script. Add the following to your header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(function() {
    let output = $('#output');
    let slider = $('#slider');

    output.html(slider.val());

    slider.on('change', function() {
        output.html(this.value);
    });

    $('#Race').on('change', function() {
        let min, max;

        switch (this.value) {
            case 'faela': min, max = 10, 70;
            case 'human': min, max = 10, 80;
        }

        slider.prop({ min, max });
        slider.val(min);

        output.html(min);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Appearance</legend>
    <p>
      <label>Select Race:</label>
      <select id="Race">
        <option value="human">Human</option>
        <option value="faela">Faela</option>
        <option value="domovoi">Domovoi</option>
        <option value="arcon">Arcon</option>
        <option value="tsaaran">Tsaaran</option>
      </select>
    </p>
    <p>
      <label>Select Gender</label>
      <select id="Gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
    </p>
    <p>
      <label for="range">Select Age:</label>
      <input type="range" min="10" max="80" id="slider" value="10" name="range"> <span id="output"></span>

    </p>
  </fieldset>
</form>

Answer 2

Maybe try DOMContentLoaded instead.

window.addEventListener('DOMContentLoaded', function () {
    //code
}, false);