Why does my code only works in html but does not work when I put it into a Javascript page?
Question
I wanna separate the javascript code from the html page and put it into a separate javascript document, but when I do so, the code does not work anymore. PS I did specify in the html page to retrieve the codes from the separate javascript document.
<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>
2 answers
solution1
0 2015-09-02 16:56:21
That's probably because of the way you ordered it. If you put it before the elements that you are referencing, it won't work. There are a few solutions, the simplest is probably moving the script to the end of the document and the cleaner way is to download jQuery and wrap your code in a.
$(function(){ /* Code goes here */ }
solution2
0 2015-09-02 17:27:08
here is html page as follows
<!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>
and 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);
}
you will get your output
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
TestComplete: Why does my Javascript code only works when there is a breakpoint?
Why does this code only work when the isNaN is put last?
When I write the script in HTML file it works, when I put the same code in a js-file and link it it does not work?
HTML and Javascript. Why does my code not work
My javascript code is crashing when I put a random number generator/guesser into a function. Why does it crash?
Why does my click event only work once when generating HTML, but works correctly when console.logging?
I am trying to change the style of a html link with javascript functions. Why does my code not work?
JavaScript does not work when I put it on the server
Why does my Javascript audio not work after I refresh a page?
Why does my javascript only fire when the code is repeated?
Related Tags