HTML range滑块功能失效问题排查（未引入jQuery）

你的代码无法运行和未引入jQuery没有任何关系，是几个基础语法和逻辑错误叠加导致的：

• 核心报错原因：JS代码中通过document.getElementById("demo")获取滑块值的显示容器，但整个HTML结构里根本不存在id="demo"的元素，这行代码执行时会返回null，后续给null的innerHTML属性赋值会直接抛出JS错误，整个脚本终止运行。
• HTML结构混乱：缺少标准HTML文档的基础骨架（<!DOCTYPE html>、<html>、<head>标签），<body>标签位置错误，CSS引用的<link>标签散落在结构外，末尾还多写了一个无匹配的</div>闭合标签，会导致浏览器DOM解析异常。
• CSS选择器写法错误：直接用div作为选择器会命中页面所有div元素，包括包裹滑块的.slidecontainer，再加上这个黑块是fixed定位，层级默认高于普通流元素，会直接把滑块完全盖住，就算JS不报错用户也没法拖动滑块。

1. 在滑块DOM附近补上id为demo的元素，用来显示滑块实时值
2. 修正HTML结构，补全标准文档骨架，把CSS引用统一放到<head>区域，删掉多余的闭合标签
3. 把通用的div选择器改成专属类选择器，避免样式污染其他元素，同时给黑块设置低层级，防止遮挡交互控件

修正后的代码如下：

HTML文件 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>年龄滑块</title>
    <link rel="stylesheet" href="uwu.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <center><h1>How old are you?</h1></center>
    <div class="slidecontainer">
        <input type="range" min="1" max="18" value="1" class="slider" id="myRange">
        <!-- 补全缺失的值显示节点 -->
        <p>选择值：<span id="demo"></span></p>
    </div>
    <!-- 黑块使用独立class，避免样式污染 -->
    <div class="bg-block"></div>
    <script src="slider.js"></script>
</body>
</html>

CSS文件（uwu.css） #

/* 替换原来的通用div选择器，只命中黑块元素 */
.bg-block {
    height: 200px;
    width: 400px;
    background: black;
    position: fixed;
    top: 50%;
    left: 16%;
    margin-top: -100px;
    margin-left: -200px;
    /* 放到最底层避免遮挡滑块 */
    z-index: -1;
}

JS文件（slider.js） #

你的JS逻辑本身没有问题，DOM结构正确的情况下不需要修改，原样保留即可：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // 显示默认滑块值

// 拖动滑块时实时更新显示值
slider.oninput = function() {
  output.innerHTML = this.value;
}

内容的提问来源于stack exchange，提问作者KiokiKaller