Convert slider to external javascript
Question
Hi I have a slider on a page the updates a number using javascript. I need to put all javascript out of the html to an external js file. Any help is appreciated. Sorry if explanation is not clear. Thanks.
<script>
function outputUpdate(n) {
document.querySelector('.names').value = n;
}
</script>
<form name="infonum">
<textarea rows="3" name="output" onclick="this.select()"></textarea><br />
<input type="button" class="button" value="Go" onclick="populateform(this.form.names.value)"><br />
<input type=range class=rangeInput name="numnames" min=1 value=1 max=15 step=1 oninput="outputUpdate(value)"><br />
<output for=rangeInput class=names>5</output>
</form>
2 answers
solution1
0 2015-07-18 05:32:58
You need to create a new file myjsfile.js and paste all the code (inside tag). Any external java script files are reference as follows in your html
<html>
<head>
<script type="text/javscript" src="myjsfile.js"></script>
....
JS file
function outputUpdate(n) {
document.querySelector('.names').value = n;
}
HTML
<html>
<head>
<script type="text/javscript" src="myjsfile.js"></script>
</head>
<body>
<form name="infonum">
<textarea rows="3" name="output" onclick="this.select()"></textarea><br />
<input type="button" class="button" value="Go" onclick="populateform(this.form.names.value)"><br />
<input type=range class=rangeInput name="numnames" min=1 value=1 max=15 step=1 oninput="outputUpdate(value)"><br />
<output for=rangeInput class=names>5</output>
</form>
</body>
</html>
solution2
0 2015-07-18 05:34:15
Insert your javascript into a JavaScript file like script.js(excluding the <script></script> tags).
<script src="javascript/script.js"></script>
If you are unfamiliar with JavaScript, you may want to check out http://www.w3schools.com/js/ or visit http://www.codeacademy.com for a nice interactive tutorial ranging from beginner JavaScript up through AngularJS.
Here is a plunker with a basic example of placing JavaScript in an external source http://plnkr.co/edit/ZOhpzn
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.