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)
style
</C> this will assign the new value and overwrite everything that has been assigned before.<br/>
Solutions:<br/>
a) Assign all rules in one instruction like this:<br/>
<C>
inputVal.setAttribute( 'style', 'border: 4px solid #009900; background-color: rgba(40, 74, 14, 0.45);');
`inputVal.style.border = '4px solid #009900';
inputVal.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';
``<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>
``
<br/>
var inputs;<br/>
inputs = document.getElementsByClass('cisla');<br/>
inputs.type = 'text';<br/>
/*<br/>
Zelená = #009900 Červená #bf2a2a Černá #000000<br/>
*/<br/>
if (inputs.value == "0") {<br/>
inputs.setAttribute( 'style', 'border: 4px solid #009900;');<br/>
inputs.setAttribute( 'style', 'background-color: rgba(40, 74, 14, 0.45);');<br/>
}<br/>
else if (inputs.value == "1") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "2") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "3") {<br/>
inputs.style.border = '4px solid #bf2a2a';<br/>
inputs.style.backgroundColor = 'rgba(191, 42, 42, 0.45)';<br/>
}<br/>
else if (inputs.value == "4") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "5") {<br/>
inputs.style.border = '4px solid #bf2a2a';<br/>
inputs.style.backgroundColor = 'rgba(191, 42, 42, 0.45)';<br/>
}<br/>
else if (inputs.value == "6") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "7") {<br/>
inputs.style.border = '4px solid #bf2a2a';<br/>
inputs.style.backgroundColor = 'rgba(191, 42, 42, 0.45)';<br/>
}<br/>
else if (inputs.value == "8") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "9") {<br/>
inputs.style.border = '4px solid #bf2a2a';<br/>
inputs.style.backgroundColor = 'rgba(191, 42, 42, 0.45)';<br/>
}<br/>
else if (inputs.value == "10") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "11") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "12") {<br/>
inputs.style.border = '4px solid #bf2a2a';<br/>
inputs.style.backgroundColor = 'rgba(191, 42, 42, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(0, 0, 0, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}<br/>
else if (inputs.value == "13") {<br/>
inputs.style.border = '4px solid #000000';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}<br/>
else {<br/>
inputs.style.border = '4px solid #ccc';<br/>
inputs.style.backgroundColor = 'rgba(40, 74, 14, 0.45)';<br/>
}
window.onload = function() {<br/>
var cislainput = document.getElementById('cisla');<br/>
cislainput.type = 'text';<br/>
cislainput.removeAttribute('autocomplete');<br/>
var src1 = document.getElementById("cislo1"),<br/>
src2 = document.getElementById("cislo2"),<br/>
src3 = document.getElementById("cislo3"),<br/>
src4 = document.getElementById("cislo4"),<br/>
src5 = document.getElementById("cislo5"),<br/>
src6 = document.getElementById("cislo6"),<br/>
src7 = document.getElementById("cislo7"),<br/>
src8 = document.getElementById("cislo8"),<br/>
src9 = document.getElementById("cislo9"),<br/>
src10 = document.getElementById("cislo10"),<br/>
src11 = document.getElementById("cislo11"),<br/>
src12 = document.getElementById("cislo12");<br/>
src1.addEventListener("keyup", event => {<br/>
if (event.isComposing || event.keyCode === 13) {<br/>
src12.value = src11.value;<br/>
src11.value = src10.value;<br/>
src10.value = src9.value;<br/>
src9.value = src8.value;<br/>
src8.value = src7.value;<br/>
src7.value = src6.value;<br/>
src6.value = src5.value;<br/>
src5.value = src4.value;<br/>
src4.value = src3.value;<br/>
src3.value = src2.value;<br/>
src2.value = src1.value;<br/>
src1.value = "";<br/>
zmenitBarvu()<br/>
}<br/>
});<br/>
};
var elem = document.documentElement;
document.addEventListener('keyup', function(e){<br/>
if(e.keyCode == 106) /* Vymazat čísla při stisknutí hvězdičky */<br/>
var src01 = document.getElementById("cislo1"),<br/>
src02 = document.getElementById("cislo2"),<br/>
src03 = document.getElementById("cislo3"),<br/>
src04 = document.getElementById("cislo4"),<br/>
src05 = document.getElementById("cislo5"),<br/>
src06 = document.getElementById("cislo6"),<br/>
src07 = document.getElementById("cislo7"),<br/>
src08 = document.getElementById("cislo8"),<br/>
src09 = document.getElementById("cislo9"),<br/>
src010 = document.getElementById("cislo10"),<br/>
src011 = document.getElementById("cislo11"),<br/>
src012 = document.getElementById("cislo12");<br/>
src01.value = "";<br/>
src02.value = "";<br/>
src03.value = "";<br/>
src04.value = "";<br/>
src05.value = "";<br/>
src06.value = "";<br/>
src07.value = "";<br/>
src08.value = "";<br/>
src09.value = "";<br/>
src010.value = "";<br/>
src011.value = "";<br/>
src012.value = "";
})
document.addEventListener('keyup', function(e){<br/>
if(e.keyCode == 107) /* Full screen při stisknutí + */<br/>
elem.webkitRequestFullscreen();<br/>
})
document.addEventListener('keyup', function(e){<br/>
if(e.keyCode == 109) /* Odejít z full screen při stisknutí - */<br/>
document.webkitExitFullscreen();<br/>
})<br/>
inputs = document.getElementsByClass('cisla');
</C><br/>
enters a node<STRONG>**list**</STRONG> into the variable <C>
inputs
`inputs = document.getElementsByClass('cisla');
inputs.forEach(function(theinput) {
// parameter theinput contains the current input
// do with it whatever you like
});
<i>
</i><style>
input[value="1"] {
background: #f00;
}
input[value="2"] {
background: #0f0;
}
input[value="3"] {
background: #00f;
}
</style>
<input type="text">
<script>
document.querySelector('input').addEventListener('input', function() {
this.setAttribute('value', this.value);
});
</script>
make the script trigger even when input is changed by JavaScript, not just by the user?[/quote]
Shawn Regan
`<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colorise Inputs</title>
<style>
</style>
</head>
<body>
<!-- Your form as defined in your jsfiddle -->
<form id="cisla">
<input name="cislo1" value="" type="text" class="cisla" placeholder="" id="cislo1" autofocus /><br>
<input name="cislo2" value="" type="text" class="cisla" placeholder="" id="cislo2" /><br>
<input name="cislo3" value="" type="text" class="cisla" placeholder="" id="cislo3" /><br>
<input name="cislo4" value="" type="text" class="cisla" placeholder="" id="cislo4" /><br>
<input name="cislo5" value="" type="text" class="cisla" placeholder="" id="cislo5" /><br>
<input name="cislo6" value="" type="text" class="cisla" placeholder="" id="cislo6" /><br>
<input name="cislo7" value="" type="text" class="cisla" placeholder="" id="cislo7" /><br>
<input name="cislo8" value="" type="text" class="cisla" placeholder="" id="cislo8" /><br>
<input name="cislo9" value="" type="text" class="cisla" placeholder="" id="cislo9" /><br>
<input name="cislo10" value="" type="text" class="cisla" placeholder="" id="cislo10" /><br>
<input name="cislo11" value="" type="text" class="cisla" placeholder="" id="cislo11" /><br>
<input name="cislo12" value="" type="text" class="cisla" placeholder="" id="cislo12" /><br>
</form>
<button id="change-val">Change Value</button>
<script>
// object containing background color
// for each value of the input
const colors = {
'1': 'lightblue',
'2': 'lightgrey',
'3': 'lightsalmon',
'4': 'lightgreen',
'5': 'yellow'
}
var registered = [];
<i> </i> // detect value change by javascript
<i> </i> // source for this function:
<i> </i> // https://stackoverflow.com/questions/32383349/detect-value-change-in-input-tag-with-vanilla-javascript-and-mutationobserver
<i> </i> var setDetectChangeHandler = function (field) {
<i> </i> if (!registered.includes(field)) {
<i> </i> var superProps = Object.getPrototypeOf(field);
<i> </i> var superSet = Object.getOwnPropertyDescriptor(superProps, "value").set;
<i> </i> var superGet = Object.getOwnPropertyDescriptor(superProps, "value").get;
<i> </i> var newProps = {
<i> </i> get: function () {
<i> </i> return superGet.apply(this, arguments);
<i> </i> },
<i> </i> set: function (t) {
<i> </i> var _this = this;
<i> </i> setTimeout(function () { _this.dispatchEvent(new Event("change")); }, 50);
<i> </i> return superSet.apply(this, arguments);
<i> </i> }
<i> </i> };
<i> </i> Object.defineProperty(field, "value", newProps);
<i> </i> registered.push(field);
<i> </i> }
<i> </i> }
<i> </i> document.querySelectorAll('#cisla input').forEach((item, idx) => {
<i> </i> setDetectChangeHandler(item);
<i> </i> item.addEventListener('change', (event) => {
<i> </i> const inp = event.target;
<i> </i> inp.style.backgroundColor = colors[inp.value];
<i> </i> });
<i> </i> });
<i> </i> // The following code only for testing
<i> </i> // that the colorising works when the value
<i> </i> // is changed by javascript
<i> </i> let val = 1;
<i> </i> const firstInput = document.getElementById('cislo1');
<i> </i> document.getElementById('change-val').addEventListener('click', () => {
<i> </i> firstInput.value = val;
<i> </i> val++;
<i> </i> if (val > 5) val = 1;
<i> </i> });
<i> </i></script>
</body>
</html>
Note that the test button affects the first input only.'5': 'red'
`0.1.9 — BETA 5.4