getElementsByTagNameを使用してタグを選択

Question

私はフォームの選択列で入力テキストフィールドの値を検証するためにjavascriptを使用しています。

3列サンプルポイント、サンプリングタイプと低TPC。 の選択欄（サンプリングタイプ）に関するルールを作成したい。機器オプションと人員オプション。 装置オプションのルールは正常ですが、人物オプションを4行目に選択すると、他の行の値（低TPC列）は常に実行されます人事オプションルール。ここで

は私のコード：

<div class="form-group"> 
    <label for="location" class="col-md-2 control-label" style="text-align:left;">location</label>  
    <div class="col-sm-3"> 
     <select name="location" id="location" class="form-control" onselect="setColor()"> 
     <option value=""></option> 
     <option value="CMP">CMP</option> 
     <option value="DRP">DRP</option> 
     </select> 
    </div> 
</div> 
[...] 

<div class="row"> 
    <div class="col-md-12"> 
    <div class="table-responsive"> 
    [...] 
     <td> 
     <input type="text" name="sample_point[]" id="sample_point" size="17" value=""/></td> 
     <td> 
     <select name ="sampling_type[]" id="sampling_type"> 
      <option value=""></option> 
      <option value="Equipment">Equipment</option> 
      <option value="Personnel">Personnel</option> 
      <option value="Environment">Environment</option> 
     </select> 
     </td> 
     <td> 
     <input type="text" name="low_tpc[]" id="low_tpc" onkeyup="setColor()" size="5" value=""/></td> 
[...] 



<script type="text/javascript"> 

    function setColor() { 
     var dropdown = document.getElementById('location').value; 

     switch (dropdown) { 
      case 'DRP': 
       var obj = document.getElementsByTagName('input'); 
       for(var i=0; i<obj.length; i++) { 
        if (obj[i].name == "sample_point[]") { 
         var sp = obj[i].value; 
        } 
        if (obj[i].name == "low_tpc[]") { 
         var low = obj[i].value; 

         var sels = document.getElementsByTagName("select"); 
         for(var j=0; j<sels.length;j++) { 
          var sel = sels[j]; 
          var type = sel.options[sel.selectedIndex].value; 

          switch (type) { 
           case 'Equipment': 
            if(sp.match(/black/i)) { 
             if(low > 5000) { 
              obj[i].style.backgroundColor = "#fd6969"; 
             } else { 
              obj[i].style.backgroundColor = ""; 
             } 
            } else if(sp.match(/red/i) || sp.match(/blue/i)) { 
             obj[i].style.backgroundColor = ""; 
            } else { 
             if(low > 3200) { 
              obj[i].style.backgroundColor = "#fd6969"; 
             } else { 
              obj[i].style.backgroundColor = ""; 
             } 
            } 
            break; 
           case 'Personnel': 
            if(sp.match(/black/i)) { 
             if(low > 50) { 
              obj[i].style.backgroundColor = "#fd6969"; 
             } else { 
              obj[i].style.backgroundColor = ""; 
             } 
            } else { 
             obj[i].style.backgroundColor = ""; 
            } 
            break; 
           default: 
           break; 
          } 
         }            
        }     
       } 
      break; 


      default: 
      break;  
     }   
    } 

    setColor(); 

</script> 

選択は、影響を受けた他の選択ルールなしで、各ルールで実行できるようにする方法は？

Answer 1

コードはinputのすべての要素をループし、次にinputのすべてに対して、selectのすべてのタグをループしています。これは非効率的ではありませんが、同じ行の要素をターゲットにしていることを確認することもできません。

私はすべての行をループして、その行内のコントロールを特に対象とするように関数を書き直すことをお勧めします。ここでは例です：

function setColor() { 
 
    var dropdown = document.getElementById('location').value; 
 

 
    switch (dropdown) { 
 
    case 'DRP': 
 
     var rows = document.getElementsByClassName("row"); 
 

 
     //loop through all the rows 
 
     [].forEach.call(rows, function(row) { 
 
     //get inputs in the current row 
 
     var sp = row.querySelector('[name="sample_point[]"]').value; 
 
     var type = row.querySelector('[name="sampling_type[]"]').value; 
 
     var obj = row.querySelector('[name="low_tpc[]"]'); 
 
     var low = obj.value; 
 

 
     switch (type) { 
 
      case 'Equipment': 
 
      if(sp.match(/black/i)) { 
 
       if(low > 5000) { 
 
       obj.style.backgroundColor = "#fd6969"; 
 
       } else { 
 
       obj.style.backgroundColor = ""; 
 
       } 
 
      } else if(sp.match(/red/i) || sp.match(/blue/i)) { 
 
       obj.style.backgroundColor = ""; 
 
      } else { 
 
       if(low > 3200) { 
 
       obj.style.backgroundColor = "#fd6969"; 
 
       } else { 
 
       obj.style.backgroundColor = ""; 
 
       } 
 
      } 
 
      break; 
 
      case 'Personnel': 
 
      if(sp.match(/black/i)) { 
 
       if(low > 50) { 
 
       obj.style.backgroundColor = "#fd6969"; 
 
       } else { 
 
       obj.style.backgroundColor = ""; 
 
       } 
 
      } else { 
 
       obj.style.backgroundColor = ""; 
 
      } 
 
      break; 
 
     } 
 
     }); 
 
    } 
 
} 
 

 
function addRow() { 
 
    var table = document.getElementById("table"); 
 
    var newRow = table.querySelector(".row").cloneNode(true); 
 
    table.appendChild(newRow); 
 
    setColor(); 
 
} 
 

 
setColor();

<div class="form-group"> 
 
    <label for="location" class="col-md-2 control-label" style="text-align:left;">location</label>  
 
    <div class="col-sm-3"> 
 
    <select name="location" id="location" class="form-control" onselect="setColor()"> 
 
     <option value=""></option> 
 
     <option value="CMP">CMP</option> 
 
     <option value="DRP" selected>DRP</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<input type="button" value="Add Row" onclick="addRow()" /> 
 

 
<div id="table"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="table-responsive"> 
 
     <td> 
 
      <input type="text" name="sample_point[]" size="17" value="black"/> 
 
     </td> 
 
     <td> 
 
      <select name ="sampling_type[]" onchange="setColor()"> 
 
      <option value=""></option> 
 
      <option value="Equipment" selected>Equipment</option> 
 
      <option value="Personnel">Personnel</option> 
 
      <option value="Environment">Environment</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="2500"/> 
 
     </td> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="table-responsive"> 
 
     <td> 
 
      <input type="text" name="sample_point[]" size="17" value="red"/> 
 
     </td> 
 
     <td> 
 
      <select name ="sampling_type[]" onchange="setColor()"> 
 
      <option value=""></option> 
 
      <option value="Equipment" selected>Equipment</option> 
 
      <option value="Personnel">Personnel</option> 
 
      <option value="Environment">Environment</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="6500"/> 
 
     </td> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="table-responsive"> 
 
     <td> 
 
      <input type="text" name="sample_point[]" size="17" value="yellow"/></td> 
 
     <td> 
 
      <select name ="sampling_type[]" onchange="setColor()"> 
 
      <option value=""></option> 
 
      <option value="Equipment" selected>Equipment</option> 
 
      <option value="Personnel">Personnel</option> 
 
      <option value="Environment">Environment</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="1500"/> 
 
     </td> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="table-responsive"> 
 
     <td> 
 
      <input type="text" name="sample_point[]" size="17" value="black"/></td> 
 
     <td> 
 
      <select name ="sampling_type[]" onchange="setColor()"> 
 
      <option value=""></option> 
 
      <option value="Equipment">Equipment</option> 
 
      <option value="Personnel" selected>Personnel</option> 
 
      <option value="Environment">Environment</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="low_tpc[]" onkeyup="setColor()" size="5" value="55"/> 
 
     </td> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>