Question

代码运行正常，但if条件不起作用，每次单击提交按钮时显示NA。请在下面找到HTML和Javascript代码。

请检查。

HTML部分 -

<!DOCTYPE html>
<html>
  <body>
    <label style="color:blue;margin-left:30px;">Category:</label>
    <input type="text" list="cat" />
    <datalist id="cat">
      <option value="Air Conditioner">
      <option value="Chimney & Hoods">
    </datalist>
   <br><br>
   <label style="color:blue;margin-left:30px;">Brand:</label>
   <input type="text" list="brand" />

   <datalist id="brand">
     <option value="abc">
     <option value="pqr">
     <option value="xyz">
     <option value="aaa">
     <option value="bbb">
   </datalist>
   <br><br>

   <button onclick="change()">Submit</button>
   <br><br>  

   <label>Segmentation:</label>
   <input type="text" id="segmentation" name="" value=""><br><br>
  </body>
</html>

Javascript部分 -

<script>
/*the javascript function not working correctly*/
function change() {
  if (((document.getElementById("cat").value =='Air Conditioner') && ((document.getElementById("brand").value == 'abc')||(document.getElementById("brand").value =='pqr')))
    || ((document.getElementById("cat").value =='Chimney & Hoods') && ((document.getElementById("brand").value =='Glen')||                                                                                      (document.getElementById("brand").value =='aaa')||                              (document.getElementById("brand").value =='pqr'))))
  {
    document.getElementById("segmentation").value = 'Service';
  }     /*this condition not working*/  
  else {
    document.getElementById("segmentation").value = 'NA';
  }     
}

Answer 1

Use `<input>` element's id to get the value of `<datalist>` element.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
/*the javascript function not working correctly*/
function change() {

        if (((document.getElementById("cat1").value =='Air Conditioner') && ((document.getElementById("brandName").value == 'abc')||
                                                                            (document.getElementById("brandName").value =='pqr')))



        || ((document.getElementById("cat1").value =='Chimney & Hoods') && ((document.getElementById("brandName").value =='Glen')||
                                                                                    (document.getElementById("brandName").value =='aaa')||
                                                                                    (document.getElementById("brandName").value =='pqr'))))
      {
      document.getElementById("segmentation").value = 'Service';

        }       
    else {
        document.getElementById("segmentation").value = 'NA';
        }       
  }

</script>
    </head>
    <body>
  <label style="color:blue;margin-left:30px;">Category:</label>
  <input type="text" list="cat" id="cat1" />
  <datalist id="cat">
  <option value="Air Conditioner">
  <option value="Chimney & Hoods">
  </datalist>
 <br><br>
<label style="color:blue;margin-left:30px;">Brand:</label>
<input type="text" list="brand" id="brandName"/>
<datalist id="brand">
<option value="abc">
<option value="pqr">
<option value="xyz">
<option value="aaa">
<option value="bbb">
 </datalist>
<br><br>
<button onclick="change()">Submit</button>
<br><br>  
<label>Segmentation:</label>
<input type="text" id="segmentation" name="" value=""><br><br>
</body>
</html>
    </body>
</html>

如果条件不能在javascript中工作，则只执行else部分

1 个答案: