javascript - && statement between input text and input select-CodePudding

I want to get output based on text input and select input, the value of strength will be determined by nvalue and type(select)

my current code:

function findStrength() {
  var n = document.getElementById('nvalue');
  if ($(".select-box option[value='clay']").attr('selected') && $(n.value == '30')) {
    document.getElementById('soil_strength').value = 'HARD';
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="nvalue" name="nvalue" min="0" max="50" required />

<select  name="soil_type" id="soil_type2">
  <option value="" disabled selected hidden>Type</option>
  <option value="clay">CLAY</option>
  <option value="silt">SILT</option>
  <option value="sand">SAND</option>
  <option value="gravel">GRAVEL</option>
</select>

<input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />

CodePudding user response：

You should not mix jQuery and DOM access. Here I delegate from form and any change to the fields will update the strength

Also you had typos in the max and required attributes

Lastly why not use a number field?

const soilForm = document.getElementById('soilForm');
soilForm.addEventListener("input", function() {
  const n =  this.nvalue.value; // cast to number
  const soil = this.soil_type.value;
  if (soil === "clay" && n === 30) {
    this.soil_strength.value = 'HARD';
  }
  else this.soil_strength.value = "";
})

<form id="soilForm">
  <input type="number" id="nvalue" name="nvalue" min="0" max="50" required />

  <select  name="soil_type" id="soil_type2">
    <option value="" disabled selected hidden>Type</option>
    <option value="clay">CLAY</option>
    <option value="silt">SILT</option>
    <option value="sand">SAND</option>
    <option value="gravel">GRAVEL</option>
  </select>

  <input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
</form>

jQuery version

$('#soilForm').on('input', function() {
  const n =  $('#nvalue').val(); // cast to number
  const soil = $('#soil_type2').val(); // why name="soil_type" and id="soil_type2" ?
  let strength = "";
  if (soil === 'clay' && n === 30) {
    strength = 'HARD';
  }
  $('#soil_strength').val(strength);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="soilForm">
  <input type="number" id="nvalue" name="nvalue" min="0" max="50" required />

  <select  name="soil_type" id="soil_type2">
    <option value="" disabled selected hidden>Type</option>
    <option value="clay">CLAY</option>
    <option value="silt">SILT</option>
    <option value="sand">SAND</option>
    <option value="gravel">GRAVEL</option>
  </select>

  <input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
</form>

CodePudding user response：

You can use jQuery more effectively.

<script>
    $(document).ready(function() {
        $('#nvalue, #soil_type2').on('change',function(){
            let type = $('#soil_type2').val();
            let nvalue = $('#nvalue').val();
            if (type == 'clay' && nvalue == '30') {
                $('#soil_strength').val('HARD');
            } else {
                $('#soil_strength').val('EASY');
            }
        });
    });
</script>