[英]How can I change color in javascript for each letter which has been written into an input if data attribute(HTML) === input text in javascript?
can you tell me please how can I change color (green is right, red is wrong) for each letter which has been written(in right order) into an input column if data attribute === input text in Javascript?如果数据属性 === Javascript 中的输入文本,您能告诉我如何更改已写入(按正确顺序)输入列中的每个字母的颜色(绿色是正确的,红色是错误的) ?
I mean if data="word" input value ="word"我的意思是如果 data="word" 输入值="word"
When I write w - letter color is green else letter color red.当我写 w -字母颜色为绿色时,字母颜色为红色。
wo -stay green else red;
wor - green else red;
word -green else red;
My code is here:我的代码在这里:
let all = document.querySelectorAll('#input_Text')
all.forEach(element => element.addEventListener('input',(e)=>{
if(e.target.value === element.getAttribute('data-verb')){
element.style.border = "5px solid green"
}else{element.style.border = "5px solid red"};
}));
Thx a lot多谢
You can use Document.querySelectorAll() to get all input elements 'input[data-verb]'
and attach an input
event to set style border if the element's value String.prototype.startsWith() the entered text:如果元素的值String.prototype.startsWith()输入的文本,您可以使用Document.querySelectorAll()获取所有输入元素'input[data-verb]'
并附加input
事件以设置样式边框:
document .querySelectorAll('input[data-verb]') .forEach(el => el.addEventListener('input', ({ target: { value }}) => { const color = el.getAttribute('data-verb').startsWith(value) ? 'green' : 'red' el.style.border = `5px solid ${color}` }))
<input type="text" data-verb="word">
id
to class
assuming there will be multiple inputs.假设会有多个输入,我已将您的id
更改为class
。String.prototype.startsWith
to check if data-verb
starts with current input value.此外,使用String.prototype.startsWith
检查data-verb
是否以当前输入值开头。element.style.border
to set the element border.使用element.style.border
设置元素边框。 let all = document.querySelectorAll('.input_Text') all.forEach(element => element.addEventListener('input',(e)=>{ var data = element.getAttribute('data-verb').toString(); var value = e.target.value; if (e.target.value == ""){ element.style.border = "none"; } else if (data.startsWith(value)){ element.style.border = "5px solid green"; } else{ element.style.border = "5px solid red"; } }));
<input type='text' class='input_Text' data-verb="word">
Assign the same class to each input that you want to check a word for, then loop through the contents of querySelectorAll
, adding an event listener to each of them.为要检查单词的每个输入分配相同的类,然后遍历querySelectorAll
的内容,为每个输入添加一个事件侦听器。
Then you can use includes
to see if the contents of what's typed matches the form's data attribute:然后您可以使用includes
来查看键入的内容是否与表单的数据属性匹配:
let words = document.querySelectorAll('.word'); words.forEach((word) => { word.addEventListener('input', () => { if (word.dataset.verb.includes(word.value)) { word.style.border = '5px solid green'; } else { word.style.border = '5px solid red'; } }); });
<input type="text" data-verb="apple" class="word"><br /> <input type="text" data-verb="banana" class="word">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.