Question

如果这是一个常见问题，请不要介意。我是javascript的初学者。我编写了一个JavaScript代码来比较每个表单与保存在数据库中的每个ans的相等性。但是当我运行代码时，它只会检查最后一个代码。和其他人显示不匹配。我希望它能够以各种形式工作，并将其与相对答案数据库列进行比较。代码在这里.......

<h1>Listing questions</h1>

<div align="center">
<table class="table table-bordered" style="width:30%" bgcolor="#00FF00" >
  <thead>
   
  <tbody >
    <% @questions.each do |question| %>
    <%= form_for question do |f| %>
    
    <tr>
        <td><%= question.q1 %></td> 
        <td>=</td> <%= f.hidden_field :ans1, :id=>"ans1" %>       
        <td><%= f.text_field :a1, :oninput => "check(this)" %> </td> 
    </tr>

    <tr>
        <td><%= question.q2 %></td> 
        <td>=</td> <%= f.hidden_field :ans2, :id=>"ans2" %>       
        <td><%= f.text_field :a2, :oninput => "check(this)" %> </td> 
    </tr>
    <tr>
        <td><%= question.q3 %></td> 
        <td>=</td> <%= f.hidden_field :ans3, :id=>"ans3" %>       
        <td><%= f.text_field :a3, :oninput => "check(this)" %> </td>      
    </tr>
        
     <tr>
        <td><%= question.q4 %></td> 
        <td>=</td> <%= f.hidden_field :ans4, :id=>"ans4" %>       
        <td><%= f.text_field :a4, :oninput => "check(this)" %> </td> 
    </tr>

     <tr>
        <td><%= question.q5 %></td> 
        <td>=</td> <%= f.hidden_field :ans5, :id=>"ans5" %>       
        <td><%= f.text_field :a5, :oninput => "check(this)" %> </td> 
    </tr>

     <tr>
        <td><%= question.q6 %></td> 
        <td>=</td> <%= f.hidden_field :ans6, :id=>"ans6" %>       
        <td><%= f.text_field :a6, :oninput => "check(this)" %> </td> 
    </tr>

     <tr>
        <td><%= question.q7 %></td> 
        <td>=</td> <%= f.hidden_field :ans7, :id=>"ans7" %>       
        <td><%= f.text_field :a7, :oninput => "check(this)" %> </td> 
    </tr>

     <tr>
        <td><%= question.q8 %></td> 
        <td>=</td> <%= f.hidden_field :ans8, :id=>"ans8" %>       
        <td><%= f.text_field :a8, :oninput => "check(this)" %> </td> 
    </tr>

     <tr>
        <td><%= question.q9 %></td> 
        <td>=</td> <%= f.hidden_field :ans9, :id=>"ans9" %>       
        <td><%= f.text_field :a9, :oninput => "check(this)" %> </td> 
    </tr>

     <tr>
      <td><%= question.q10 %></td> 
        <td>=</td> <%= f.hidden_field :ans10, :id=>"ans10" %>       
        <td><%= f.text_field :a10, :oninput => "check(this)" %> </td> 
    </tr>
        <%end%>  
       
      </tr>
    <% end %> 

  </tbody>
</table>

<br>

<%= will_paginate @questions, renderer: BootstrapPagination::Rails %>
</div>
<script language='javascript' type='text/javascript'>
              function check(input) {
                if (input.value != document.getElementById('ans1').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans2').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans3').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans4').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans5').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans6').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans7').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans8').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans9').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }
                function check(input) {
                if (input.value != document.getElementById('ans10').value) {
                     input.setCustomValidity('incorrect');
                     $("p").hide();
                 } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                  }
               }

            </script>

Answer 1

function check()的许多声明将覆盖函数的所有先前声明。只有最后test才有效。

在该处理程序中仅使用一个函数声明和$(input).parents('tr').find(':input:hidden')输入值。

tr将返回特定function check(input) { var pre = $(input).parents('tr').find(':input:hidden') if (input.value != pre.val()) { input.setCustomValidity('incorrect'); $("p").hide(); } else { input.setCustomValidity(''); } }

中的隐藏元素

试试这个：

Paint

在输入javascript验证只在最后一个

1 个答案: