Example: https://stackoverflow.com/a/37289566/710887
I see this happening more and more often.
I was always taught to keep javascript, css, and html separate (with html linking to the sources/scripts of course).
Is using an Javascript in an HTML attribute (such as onclick, onchange, etc:) bad practice?
<span id="valBox">25</span>
<input type="range" min="5" max="50" step="1" value="25" onchange="valBox.textContent = this.value">
In general, yes, it is very bad practice, however, sometimes, while testing/doing a quick implementation, it is much faster:
<button onclick="alert('Hello World!');">Hey There!</button>
VS
<script>
window.onload = function()
{
document.getElementById("button").onclick = function()
{
alert("Hello World!");
}
}
</script>
<button id="button">Hey There!</button>
Having said that, the latter is much preferable for debugging/code maintenance.
It is not wrong, per se, but yes, it is seen as bad practice by the vast majority of people.
Good practice is to separate the HTML and Javascript as much as you can. It is the same concept as with CSS. Mixing up the HTML, CSS and Javascript in the same file can become unmanageable very quickly, and should be avoided, if at all possible.
Ideally, the two should be in separate files (.html and .js files), but separating them in the HTML is a good first step.
You can separate the two by using event listeners, like so:
<!-- The elements -->
<span id="valBox">25</span>
<input id="inputBox" type="range" min="5" max="50" step="1" value="25">
<script>
// Grab the elements here
var val = document.getElementById("valBox");
var inp = document.getElementById("inputBox");
// Add an event listener to the input element and
// set the span value when it changes
inp.addEventListener("change", function () {
val.textContent = this.value;
});
</script>
See this answer if you need to support IE<=9.
Each attribute is a new listener. The more attributes you have, the heavier. Mixing JS and HTML is not considered good practice. Think of it as separation of concern. The markup is there to provide the client with a UI. JS's job (in a browser) is to enhance the user experience. They have to work together, but have different tasks. Hence, they should be treated as separate entities.
It is messy and can be unmanageable, in that if you get errors or unexpected results you will have a harder time tracing the code that causes the error, meaning it is technically a bad practice. You could very easily replace the code you provided with a
<script>
//Scripts
...
function MyMethodName(val){
...("#valbox").text = val;
};
</script>
...
<span id="valBox">25</span>
<input type="range" min="5" max="50" step="1" value="25"
onchange="MyMethodName(this.value)">
or whatever is syntactically correct.
EDIT: This is a non-inline equivalent using jQuery
<script>
$('#inputID').change(function(){
$('#valbox').text($('#inputID').val());
});
<span id="valBox">25</span>
<input id="inputID" type="range" min="5" max="50" step="1" value="25">
</script>
