为什么该值不显示在我的输入滑块上？

2vuwiymt 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(285)

我试图解决这个问题已经有一段时间了，最让人困惑的是，我非常确定js代码是正确的。所以我肯定错过了一些东西，我试过chrome和mozilla。
因此，我在一个文件夹中本地创建了这些文件，因此我确信它们在css设置页面样式时正在连接。我无法理解为什么js不工作，也无法理解为什么该值不至少显示0。
js:

var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = slider.value;

slider.oninput = function() {
    output.innerHTML = this.value;
}

html:

<html>
    <head>
        <script src="oslider.js"></script>
        <link rel="stylesheet" href="oslider.css">
    </head>
    <body>
        <div class="sliderContainer">
            <input type="range" min="1" max="10" value="1" id="myRange" class="slider">
        </div>
        <p>Value: <span id="value"></span> </p>
    </body>
</html>

css:

body {
    background-color:orange;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    align-items: center;
}
p {
    margin-top: 50px;
}

.sliderContainer {
    width: 100%;
    margin-top: 200px
}

JavaScript Html

来源：https://stackoverflow.com/questions/68348111/why-doesnt-the-value-appear-on-my-input-slider

1条答案

按热度按时间

l5tcr1uw1#

你在那里。只需在一个名为 DOMContentLoaded . 试试这个-

window.addEventListener('DOMContentLoaded', () => {
  var slider = document.getElementById("myRange");
  var output = document.getElementById("value");

  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value;
  } 
})

body {
    background-color:orange;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    align-items: center;
}
p {
    margin-top: 50px;
}

.sliderContainer {
    width: 100%;
    margin-top: 200px
}

<div class="sliderContainer">
    <input type="range" min="1" max="10" value="1" id="myRange" class="slider"></div>
    <p>Value: <span id="value"></span> </p>
</body>

赞(0）回复(0）举报 2021-09-13

我来回答

为什么该值不显示在我的输入滑块上？

1条答案

相关问题

热门标签

最新问答