Menu
Community /Pin to ProfileBookmark
@cootheadJun 12.2020 — #@zxx54 ,
personally, I believe that it is preferable to remove
**style** from the JavaScript, as in this example...
Form input background color change based on the number inside it
I need to make form input background color change based on the number inside it everytime it is changed by user **or by script`function changeColor() {
document.getElementById(“form1”).childNodes.forEach(inputVal=>{
inputVal.addEventListener(‘input’,event=>{
if (inputVal.value == “0”) {
inputVal.setAttribute( ‘style’, ‘border: 4px solid #009900 !important;’);
inputVal.setAttribute( ‘style’, ‘background-color: rgba(40, 74, 14, 0.45) !important;’);
}
else if (inputVal.value == “1”) {
inputVal.setAttribute( ‘style’, ‘border: 4px solid #f5d442 !important;’);
}
});
});
}
**END OF IMPORTANT THINGS
*Any help greately appreciated
Btw, this is my first time here! (Seemed much friendlier here then on stackoverflow)
Sign in
to post a comment18 Comments(s) ↴
0
@cootheadJun 12.2020 — #personally, I believe that it is preferable to remove
**style** from the JavaScript, as in this example...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
label, input[type="number"] {
display: block;
margin: 0.5em 0;
}
input[type="number"] {
width: 3em;
font-size: 1em;
text-align: center;
}
.zero {
border: 0.25em solid #090;
background-color: rgba( 40, 74, 14, 0.45 );
}
.one {
border: 0.25em solid #f5d442 ;
}
</style>
</head>
<body>
<form id="form1" action="#">
<label for="inp1">input 1</label>
<input id="inp1" class="zero" type="number" min="0" max="1" value="0">
<label for="inp2">input 2</label>
<input id="inp2" class="zero" type="number" min="0" max="1" value="0">
<label for="inp3">input 3</label>
<input id="inp2" class="zero" type="number" min="0" max="1" value="0">
</form>
<script>
( function( d ) {
'use strict';
var c, inps,frm = d.getElementById( 'form1' );
frm.reset();
inps = frm.querySelectorAll( 'input[ type="number" ]' );
for ( c = 0; c < inps.length; c ++ ){
inps[ c ].addEventListener( 'change', styleInput( c ), false );
}
function styleInput( c ) {
inps[ c ].onchange = function(){
if ( inps[c].value === '0' ) {
inps[c].classList.remove( 'one' );
inps[c].classList.add( 'zero' );
}
else {
inps[c].classList.remove( 'zero' );
inps[c].classList.add( 'one' );
}
}
}
} ( document ) );
</script>
</body>
</html>
_coothead_<i>
</i>``