如何獲取輸入字段的值並確保其與列表項的值匹配？

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

}