Question

我有一个值列表：

<ul>
   <li>Value1</li>
   <li>Value2</li>
   <li>Value3</li>
</ul>

然后我有一系列输入字段

<form>
    <input type="text" class="textinput" />
    <input type="text" class="textinput" />
    <input type="text" class="textinput" />
</form>

当它完全风格化时，它将被布置为：

list item    input field
list item    input field
list item    input field

我想要做的是创建一个记忆练习，用户将列表项中显示的文本输入到旁边的相应输入字段中。然后使用JavaScript我想验证输入到每个输入的值是否正确对应于列表项。一旦整个练习完成，那么它将允许您继续下一个练习。

Answer 1

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);

}

JSFiddle

Answer 2

使用列表项作为文本框的ID。

<ul>
<li>item1<input type="text" id="item1"></li>
</ul>

现在使用java脚本获取文本框的值。

Var textbox1=document.getElementById(item1);
Var textboxval1=textbox1.value;

谷歌java脚本代码。可能是我的错误。但你可以遵循这个逻辑。我希望它能运作。

Answer 3

您可以尝试这一点，但请记住，列表和文本框的总数必须相等

<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

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;
    }
  }

}

如何获取输入字段的值并确保它与列表项的值匹配？

3 个答案: