[英]How do I take the value of an input field and make sure that it matches the value of a list item?
I have a list of values: 我有一个值列表:
<ul>
<li>Value1</li>
<li>Value2</li>
<li>Value3</li>
</ul>
I then have a series of input fields 然后,我有一系列输入字段
<form>
<input type="text" class="textinput" />
<input type="text" class="textinput" />
<input type="text" class="textinput" />
</form>
When it's fully styled it would then be laid out like: 完全样式化后,其布局将如下所示:
list item input field
list item input field
list item input field
What I would like to do is create a memorization exercise where the user inputs the text as shown in the list item into the corresponding input field next to it. 我想做的是创建一个记忆练习,用户将列表项中所示的文本输入到旁边的相应输入字段中。 Using JavaScript I then want to validate that the value typed into each input correctly corresponds to the list item. 然后,我要使用JavaScript验证输入到每个输入中的值正确对应于列表项。 Once the entire exercise is complete then it would allow you to move on to the next exercise. 整个练习一旦完成,便可以继续进行下一个练习。
var ip = document.getElementsByTagName('form')[0];
var lis = document.getElementsByTagName('ul')[0];
for (var i = 0, len = ip.children.length; i < len; i++) {
(function (index) {
ip.children[i].onblur = function () {
var lisText = lis.children[index].innerHTML;
if (this.value == lisText) {
alert("Valid");
} else {
alert("Not Valid");
}
}
})(i);
}
Use list item as id of textbox. 使用列表项作为文本框的ID。
<ul>
<li>item1<input type="text" id="item1"></li>
</ul>
Now using java script get value of thw textbox. 现在使用Java脚本获取文本框的值。
Var textbox1=document.getElementById(item1);
Var textboxval1=textbox1.value;
Google the java script code.may be mine is wrong.but u can follow this logic.I hope it will work. 谷歌的Java脚本代码。可能是我的错。但是你可以遵循这个逻辑。我希望它会工作。
you can try this, but keep in mind that the total number of list and text boxes must be equal 您可以尝试这样做,但请记住,列表框和文本框的总数必须相等
<ul id="matcher">
<li>Value1</li>
<li>Value2</li>
<li>Value3</li>
</ul>
<form>
<input type="text" class="textinput" id="inpuText0"/>
<input type="text" class="textinput" id="inpuText1"/>
<input type="text" class="textinput" id="inpuText2"/>
</form>
JavaScript 的JavaScript
function validate()
{
var ul = document.getElementById('matcher');
var ele = ul.getElementsByTagName('li');
for( var i=0;i<ele.length;i++)
{
var text = ele[i].textContent || ele[i].innerText;
if(text != document.getElementById('inputText'+i).value)
{
alert('value not matching for '+i+' row');
ele[i].focus();
return false;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.