为什么我的代码只在html中工作，而在我将其放入Javascript页面时不工作？_Javascript_Html

为什么我的代码只在html中工作，而在我将其放入Javascript页面时不工作？

javascript html

为什么我的代码只在html中工作，而在我将其放入Javascript页面时不工作？,javascript,html,Javascript,Html,我想将javascript代码从html页面中分离出来，并将其放入一个单独的javascript文档中，但是当我这样做时，代码就不再工作了。另外，我在html页面中指定从单独的javascript文档中检索代码 <script type="text/javascript"> function updateTextInput() { var valueHue = document.getElementById('sliderHue').value; var valueSatur

我想将javascript代码从html页面中分离出来，并将其放入一个单独的javascript文档中，但是当我这样做时，代码就不再工作了。另外，我在html页面中指定从单独的javascript文档中检索代码

<script type="text/javascript">
function updateTextInput() {
  var valueHue = document.getElementById('sliderHue').value;
  var valueSaturation = document.getElementById('sliderSaturation').value;
  var valueLightness = document.getElementById('sliderLightness').value;

  document.getElementById('textHue').value = valueHue;
  document.getElementById('textSaturation').value = valueSaturation + "%";
  document.getElementById('textLightness').value = valueLightness + "%";

  var color = "hsl(" + valueHue + ", " + valueSaturation + "%, " + valueLightness + "%)";
  document.getElementById('colorDisplay').setAttribute('style', "background-color:" + color);
} 
</script>


<div>
Hue:
<br>
<input id="sliderHue" type="range" min="0" max="360" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textHue" value="">
<br>
<br>
<br>Saturation:
<br>
<input id="sliderSaturation" type="range" min="0" max="100" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textSaturation" value="">
<br>
<br>
<br>Lightness:
<br>
<input id="sliderLightness" type="range" min="0" max="100" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textLightness" value="">
</div>

那可能是因为你点的方式。如果将它放在引用的元素之前，它将不起作用。有几种解决方案，最简单的方法可能是将脚本移动到文档末尾，更简洁的方法是下载jQuery并将代码包装在一个文档中

$(function(){ /* Code goes here */ }

下面是html页面，如下所示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="ds.js"></script>
</head>

<body>


<div>
Hue:
<br>

<input id="sliderHue" type="range" min="0" max="360" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textHue" value="">

<br>
<br>
<br>Saturation:
<br>
<input id="sliderSaturation" type="range" min="0" max="100" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textSaturation" value="">
<br>
<br>
<br>Lightness:
<br>
<input id="sliderLightness" type="range" min="0" max="100" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textLightness" value="">
</div>

</body>
</html>

您将获得您的输出

您需要确保在使用Windows运行脚本时加载文档。onLoad能否在包含js的位置添加代码？希望此链接有助于：

function updateTextInput() {
  var valueHue = document.getElementById('sliderHue').value;
  var valueSaturation = document.getElementById('sliderSaturation').value;
  var valueLightness = document.getElementById('sliderLightness').value;

  document.getElementById('textHue').value = valueHue;
  document.getElementById('textSaturation').value = valueSaturation + "%";
  document.getElementById('textLightness').value = valueLightness + "%";

  var color = "hsl(" + valueHue + ", " + valueSaturation + "%, " + valueLightness + "%)";
  document.getElementById('colorDisplay').setAttribute('style', "background-color:" + color);
}