而在脚本标签

Question

这是我的代码的JavaScript/jQuery的未执行：

<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>

当JavaScript是保持独立的.js文件我的代码工作正常。但是，当它在使用脚本标签的HTML中时，它不起作用。滑块值的输出未被输出。我研究了这一点，发现我应该添加window.onload = function() {}但是，即使在添加之后它没有输出滑块的值。

请让我知道如何解决这个问题。 谢谢，

Answer 1

您应该看到控制台中出现错误，表示符号$未被识别。这是因为你的文档不包含jQuery脚本。以下添加到您的标题：

<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

也许尝试DOMContentLoaded代替。

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