Блог

Привет всем, я застрял в одной проблеме, у меня есть два текстовых поля (длина * ширина), как показано на скриншоте, сначала у нас есть два захвата введенного значения, затем у нас есть два совпадения с ближайшим значением из измерения

Пример

Допустим, мы ввели 71 и 29, в этом случае сначала мы должны проверить ближайшее значение для 71, поэтому ближайшее значение для 71 равно 72 (72*30,72*36 ), теперь мы должны сопоставить второе значение 29, чтобы ближайшее значение было равно 30, тогда наш результат будет 72 * 30

JS

 document.getElementById("tmcp_textfield_7").addEventListener("blur", getValue);
document.getElementById("tmcp_textfield_8").addEventListener("blur", getValue);
function getValue() {
var entered = document.getElementById('tmcp_textfield_7');
var entered1 = document.getElementById('tmcp_textfield_8');
    alert(entered.value);
    alert(entered1.value);
}
  

HTML

    <li class="tmcp-field-wrap_tmcp_textfield_7">
    <label for="tmcp_textfield_7"></label>
      <input placeholder="Length" minlength="2" maxlength="4" class="tmcp-field dimension-layer-entersize1 tm-epo-field tmcp-textfield tm-valid" name="tmcp_textfield_5" type="number">

 </li>
     <li class="tmcp-field-wrap_tmcp_textfield_8">
    <label for="tmcp_textfield_8"></label>
      <input placeholder="Breadth" minlength="2" maxlength="4" class="tmcp-field dimension-layer-entersize2 tm-epo-field tmcp-textfield tm-valid" name="tmcp_textfield_6" type="number" >

 </li>
  

Вы пропускаете атрибут id во text входных данных, поэтому дайте им идентификатор следующим образом :

 <input id="tmcp_textfield_7" ...

<input id="tmcp_textfield_8" ....
  

И вставьте код jquery следующим образом :

 $(document).ready(function() {
    
    $("#tmcp_textfield_7 ").on("blur",function(){
        
        var value = $(this).val();
        alert(value);
        
    })
    $("#tmcp_textfield_8").on("blur",function(){
        
         var value = $(this).val();
         alert(value);
        
    })
    
    
})  

    <li class="tmcp-field-wrap_tmcp_textfield_7">
    <label for="tmcp_textfield_7"></label>
      <input id="tmcp_textfield_7" placeholder="Length" minlength="2" maxlength="4" class="tmcp-field dimension-layer-entersize1 tm-epo-field tmcp-textfield tm-valid" name="tmcp_textfield_5" type="number">

 </li>
     <li class="tmcp-field-wrap_tmcp_textfield_8">
    <label for="tmcp_textfield_8"></label>
      <input id="tmcp_textfield_8" placeholder="Breadth" minlength="2" maxlength="4" class="tmcp-field dimension-layer-entersize2 tm-epo-field tmcp-textfield tm-valid" name="tmcp_textfield_6" type="number" >

 </li>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>