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,

@Taplar sorry, it was window.onload not window.onbeforeunload, I have edited the code. — qtt qtt
– qtt qtt, Commented Nov 17, 2017 at 23:35
And you are including jquery some where on the page before that script? — Taplar
– Taplar, Commented Nov 17, 2017 at 23:36
You have to include jQuery on the page before your script if you expect the page to know that $ is jQuery. Otherwise you're console should be screaming at you that $ is undefined. — Taplar
– Taplar, Commented Nov 17, 2017 at 23:37
It can even be after the script, since the code is run in window.onload, which won't run until after all scripts are loaded. — Barmar
– Barmar, Commented Nov 17, 2017 at 23:46

Callam · Accepted Answer · 2017-11-18 00:00:52Z

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>

anomaaly · Accepted Answer · 2017-11-17 23:38:06Z

0

Maybe try DOMContentLoaded instead.

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

answered Nov 17, 2017 at 23:38

anomaaly

8414 silver badges15 bronze badges

Collectives™ on Stack Overflow

JavaScript / jQuery not being executed while in script tags

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related