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

Question

我想将javascript代码与html页面分开，然后将其放入单独的javascript文档中，但是当我这样做时，该代码将不再起作用。 PS我确实在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>

Answer 1

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

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

Answer 2

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

和ds.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);
}

你会得到你的输出

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

问题描述

2 个解决方案

解决方案1
0 2015-09-02 16:56:21

解决方案2
0 2015-09-02 17:27:08

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

问题描述

2 个解决方案

解决方案1 0 2015-09-02 16:56:21

解决方案2 0 2015-09-02 17:27:08

解决方案1
0 2015-09-02 16:56:21

解决方案2
0 2015-09-02 17:27:08