Foydalanuvchilar kiritgan o'zgarishlar jQuery bilan bir xil HTML elementlarini yangilash

Foydalanuvchining kiritishini hisobga oladigan ba'zi hisob-kitoblarni bajarishga urinaman va foydalanuvchi ko'rishi uchun hisoblangan qiymati yetkazib beraman. Foydalanuvchi ikkita qiymat bilan ta'minlaydi, natijada ADF qaytariladi.

Menda mavjud bo'lgan ikkita muammo: Ikkinchi qiymatga (TQ) kirmasdan oldin qiymat hisoblanadi; va qiymat almashtirilgan bo'lsa, eski ADF o'zgartirilmaydi. Buning sababini tushunaman, chunki u qo'llashni davom ettiradi. (), Lekin uning o'rniga nima kerakligini bilmayman. Men nima bo'layotganini suratga oldim. Kodimni quyida keltirdim.

* Round() va ADF() funktsiyalarini hisoblash uchun ishlatiladigan Javascript funktsiyalariga e'tibor bering va men ushbu kodni ro'yxatga olish uchun tegishli deb o'ylamadim. Uni ko'rish uchun tegishli deb hisoblasangiz, menga xabar bering.

Yordamingiz uchun oldindan rahmat.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function main() {
  $(document).on('change', '#Gravities', function() {
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();
    var calc = round(ADF(OG,FG)*100, 2); 
    $('.ADFbox').append('<div class="ADF">'+calc+'%</div>');
  });
}

$(document).ready(main);
<body>
   <form id="Gravities">     
      <div>
         
</div> <div>
</div> </form> <div class = 'ADFbox'>
ADF: </div> </body> </html>
</div> </div>

enter image description here

enter image description here

1
Javobimga siz javobingiz bo'lsa, menga xabar bering, aks holda javobimni o'chirib tashlayman.
qo'shib qo'ydi muallif Bhojendra Nepal, manba

6 javoblar

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).on("input", ".gravity", function() {
  var thisval = $(this).val()
  var nothisval = $(".gravity").not(this).val()

  if (thisval.length > 0 && nothisval.length > 0) {//check if one value is empty
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();
    //var calc = round(ADF(OG, FG) * 100, 2);
    var calc = OG * FG;//change this computation
    //$('.ADFbox').append('<div class="ADF">' + calc + '%</div>');
    $('.ADFbox').text("ADF:" + calc).change();


  } else {
    $('.ADFbox').text("ADF: 0");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <form id="Gravities">
    <div>
      


</div> <div>


</div> </form> <div class='ADFbox'>
ADF:

</div> </body>
</div> </div>

Ikkala qiymat ham 0 dan ortiq bo'lsa, har bir qiymatni tekshiring

Note: input has no ending tag just close like <input />

0
qo'shib qo'ydi
past ovoz berishni tushuntirib bering
qo'shib qo'ydi muallif guradio, manba

Kechirasiz, men sizni tushunmayapman. Mening tushunchamga binoan, har ikkala kirish maydoni ham o'zgargan bo'lsa, siz hisoblashingiz kerak. Agar shunday bo'lsa, shunday qilishingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function main() {
  $(document).on('change', '#Gravities input', function() {
    OG = $('input[name=OG]');
    FG = $('input[name=FG]');
    $(this).data('changed',true);//set "changed=true" for current input
   //Check if both input fields are changed
    if(OG.data('changed') == true && FG.data('changed') == true){
      //var calc = round(ADF(OG.val(),FG.val())*100, 2);//uncomment this
      var calc = OG.val() * FG.val();//comment this
      $('.ADFbox').html(function(){
        $('#Gravities input').data('changed',false);//set "changed=false" for next query
        return '<div class="ADF">'+calc+'%</div>'
      });
    }
  });
}

$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Gravities">        
      <div>
         
</div> <div>
</div> </form> <div class = 'ADFbox'>
ADF: </div>
</div> </div>
0
qo'shib qo'ydi

Buni hal qilish uchun .adf <div> <div> kodini append() o'rniga text() har bir hisob-kitobdan keyin yangi nusxa yaratish uchun.

Quyida ishlaydigan misol bor. Hisobni soddalashtirganimni, chunki round() yoki ADF() funktsiyalari mantig'ini bermadingiz. Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function main() {
  $(document).on('change', '#Gravities', function() {
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();
    //var calc = round(ADF(OG, FG) * 100, 2);
    var calc = OG * FG;
    $('.ADFbox .adf').text(calc + '%');
  });
}

$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Gravities">
  <div>
    


</div> <div>


</div> </form> <div class='ADFbox'>
ADF: <div class="adf"></div>

</div>
</div> </div>
0
qo'shib qo'ydi
Men ham, lekin bu nima. O'ylaymanki, ba'zi bir ish zarrachalari etarli emas
qo'shib qo'ydi muallif Rory McCrossan, manba
Nima uchun bu pastga tushganini tushunmayapman
qo'shib qo'ydi muallif ded, manba
Buning uchun sizga rahmat.
qo'shib qo'ydi muallif prestondoris, manba

Mavjud matn qiymatini yangilamaydigan html ga qo'shayotgan muammolar.

Kodni quyidagi kabi o'zgartiring:

$(document).on('change', '#Gravities', function() {
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();

   if(OG != "" && FG != ""){

     var calc = round(ADF(OG,FG)*100, 2); 
     $('.ADFbox').find("p").html("ADF:"+ calc + '%');

   }

});
0
qo'shib qo'ydi

Siz o'zgarish hodisasini qo'shdingiz. Shuning uchun har bir sohaning yangilanishi har safar hisoblab chiqiladi. Men bir nechta o'zgarishlarni amalga oshirdim:

   <form id="Gravities">    
        <div>
          
</div> <div>
</div> <button type="button" id="fgs"> Find ADF</button> </button> </form> <div class = 'ADFbox'>
ADF: </div> function main() { $("#fgs").on('click', function() { OG = $('input[name=OG]').val(); FG = $('input[name=FG]').val(); var calc = OG*FG; document.getElementsByClassName("ADFbox")[0].innerHTML= "ADF:"+" " +calc; }); } $(document).ready(main);

created working fiddle for you: https://jsfiddle.net/Safoora/hspdgqca/15/

0
qo'shib qo'ydi
arzimaydi. Yuqoridagi javob foydali bo'lsa, buning uchun yuqoriga ko'taring.
qo'shib qo'ydi muallif techhunter, manba
Buning uchun sizga rahmat.
qo'shib qo'ydi muallif prestondoris, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function main() {
  $(document).on('change', '#Gravities', function() {
    if($('input[name=OG]').val()!='' && $('input[name=FG]').val()!=''){
       var calc = round(ADF(OG,FG)*100, 2); 
       $('.ADFbox').html('<div class="ADF">'+calc+'%</div>');
    }
  });
}

$(document).ready(main);
    <body>
          <form id="Gravities">      
            <div>
                  
</div> <div>
</div> </form> <div class = 'ADFbox'>
ADF: </div> </body> </html>
</div> </div>
0
qo'shib qo'ydi
html ('') sizning keyingi chaqiruvingiz innerHTML ni qayta yozganda keraksiz
qo'shib qo'ydi muallif Rory McCrossan, manba
@RoryMcCrossan Tashakkur! Men bu xatoni tuzatdim.
qo'shib qo'ydi muallif Sachin Bhandari, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb