en mi JavaScript
$("#inputDatabaseName").on("keyup", function(e) { alert("Changed!"); console.info(this.value); var nilaicli = this.value, skorcli = document.getElementById("skorclis"); var cli1 = parseFloat(nilaicli.value) || 2; var x = cli1.toFixed(2); if (x <= 39.99 && x >= 0) { skorcli.value = 1; //its the only come out and dont want change again if i input another number in inputid="inputDatabaseName". :( } else if (x >= 40.0 && x <= 59.99) { skorcli.value = 2; } else if (x >= 60.0 && x <= 79.99) { skorcli.value = 3; } else if (x >= 80.0 && x <= 89.99) { skorcli.value = 4; } else if (x >= 90.0 && x <= 100) { skorcli.value = 5; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-3"> <div class="card card-chart"> <div class="card-header"> <div class="row"> <p> Input CLI</p> </div> <div class="card-body"> <div class="row"> <div class="col-8"> <label>Nilai CLI : </label> <input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName"> <br> </div> </div> <div class="row"> <div class="col-8"> <label> Skor CLI : </label> <input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)"> </div> </div> </div> </div> </div> </div>quiero cambiar el valor en inputid="skorclis" nuevamente si ingreso algo en inputid="inputDatabaseName". pero mi script no quiere cambiar el valor en inputid="skorclis" repetidamente. solo quiero la primera declaración if. y no quiero cambiar de nuevo. ¿Cómo hacer que se convierta en cambio de nuevo?
Mira eso:
const myForm = document.querySelector('#my-form') // use a form, it is // usefull to access on myForm.nilaicli // element or any one else myForm.nilaicli.addEventListener('input',function() // use input event, it's also work with mouse copy/paste { let x = parseFloat(this.value) || 2 this.value = x // .toFixed(2) switch (true) { case (x >= 0 && x < 40) : myForm.skorclis.value = 1; break; case (x >= 40 && x < 60) : myForm.skorclis.value = 2; break; case (x >= 60 && x < 80) : myForm.skorclis.value = 3; break; case (x >= 80 && x < 90) : myForm.skorclis.value = 4; break; case (x >= 90 && x <= 100) : myForm.skorclis.value = 5; break; } }) myForm.onsubmit = e => e.preventDefault() // disable form submit fieldset { display : block; margin : 1em; width : 17em; } label { display : block; margin : 1em; } label input { float : right; padding : 0 .7em; width : 9em; } <form id="my-form"> <fieldset> <legend>Input CLI</legend> <label> Nilai CLI : <input type="text" name="nilaicli"> </label> <label> Skor CLI : <input type="text" name="skorclis" readonly > </label> </fieldset> </form> $("#inputDatabaseName").on("keyup", function(e) { const nilaicli = this.value; const cli1 = parseFloat(nilaicli) || 2; const x = cli1.toFixed(2); hanldeChange(x); }); const hanldeChange = (x) => { const skorcli = document.getElementById("skorclis"); console.info(x); if (x <= 39.99) { skorcli.value = 1; } else if (x <= 59.99) { skorcli.value = 2; } else if (x <= 79.99) { skorcli.value = 3; } else if (x <= 89.99) { skorcli.value = 4; } else if (x <= 100) { skorcli.value = 5; } }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-3"> <div class="card card-chart"> <div class="card-header"> <div class="row"> <p> Input CLI</p> </div> <div class="card-body"> <div class="row"> <div class="col-8"> <label>Nilai CLI : </label> <input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName"> <br> </div> </div> <div class="row"> <div class="col-8"> <label> Skor CLI : </label> <input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)"> </div> </div> </div> </div> </div> </div>