I’ve been trying to change the input on a same valued inputs. The input ids are (Input${i} (Input0 , Input1 and etc., iterating them with loop), I have a button which evokes the function,
The best I got so far is this:
JavaScript
x
17
17
1
function fnValidate(current, value){2
var hasDuplicates = false3
4
for(var i =0; i<5 ; i++) {5
if(i !== current && document.getElementById(`Input` + i).value == value) {6
hasDuplicates = true7
break;8
}9
}10
11
12
document.getElementById(`Input${i}`).style.backgroundColor = hasDuplicates ? '#F00' : '#FFF'13
}14
15
16
fnValidate()17
Advertisement
Answer
I think you probably want to learn to do something like:
JavaScript
1
82
82
1
//<![CDATA[2
/* js/external.js */3
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC; // for use on other loads4
addEventListener('load', ()=>{5
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);6
mobile = nav.userAgent.match(/Mobi/i) ? true : false;7
S = (selector, within)=>{8
var w = within || doc;9
return w.querySelector(selector);10
}11
Q = (selector, within)=>{12
var w = within || doc;13
return w.querySelectorAll(selector);14
}15
hC = function(node, className){16
return node.classList.contains(className);17
}18
aC = function(){19
const a = [arguments];20
a.shift().classList.add(a);21
return aC;22
}23
rC = function(){24
const a = [arguments];25
a.shift().classList.remove(a);26
return rC;27
}28
tC = function(){29
const a = [arguments];30
a.shift().classList.toggle(a);31
return tC;32
}33
// you could put the below on a separate script in a load Event, if you want34
function aaIndex(value, arrayOfArrays){35
for(let i=0,v,l=arrayOfArrays.length; i<l; i++){36
v = arrayOfArrays[i].indexOf(value);37
if(v !== -1){38
return i;39
}40
}41
return -1;42
}43
function dups(collection){44
const a = [];45
for(let i=0,v,x,l=collection.length; i<l; i++){46
v = collection[i].value;47
for(let n=0; n<l; n++){48
if(v !== '' && i !== n && collection[n].value === v){49
x = aaIndex(i, a);50
if(x === -1){51
a.push([i, n]);52
}53
else{54
a[x].push(n);55
}56
}57
}58
}59
return a;60
}61
const q = Q('.test');62
for(let n of q){63
n.onfocus = ()=>{64
aC(n, 'focus');65
}66
n.onblur = ()=>{67
rC(n, 'focus');68
}69
n.onkeyup =()=>{70
let d = dups(q), m = 0;71
for(let v of q){72
rC(v, 'match1', 'match2', 'match3');73
}74
for(let a of d){75
m++;76
for(let i of a){77
aC(q[i], 'match'+m);78
}79
}80
}81
}82
}); // end loadJavaScript
1
25
25
1
/* css/external.css */2
*{3
box-sizing:border-box; font:22px Tahoma, Geneva, sans-serif; color:#000; padding:0; margin:0; overflow:hidden;4
}5
html,body,.main{6
width:100%; height:100%;7
}8
.main{9
background:#333; overflow-y:auto;10
}11
.test{12
width:calc(100% - 10px); padding:3px 5px; margin:5px; border:2px solid #ccc; border-radius:2px;13
}14
.focus{15
border-color:#cc0;16
}17
.match1{18
border-color:#f70;19
}20
.match2{21
border-color:#c0c;22
}23
.match3{24
border-color:#c00;25
}JavaScript
1
20
20
1
<!DOCTYPE html>2
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>3
<head>4
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />5
<title>Title Here</title>6
<link type='text/css' rel='stylesheet' href='css/external.css' />7
<script src='js/external.js'></script>8
</head>9
<body>10
<div class='main'>11
<input class='test' value='' />12
<input class='test' value='' />13
<input class='test' value='' />14
<input class='test' value='' />15
<input class='test' value='' />16
<input class='test' value='' />17
<input class='test' value='' />18
</div>19
</body>20
</html>You’ll notice this design supports more than one match.