javascript - 如何通过javascript中的if语句更改输入ID内的值

Question

在我的 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Input CLI</p>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-8">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Nilai CLI&nbsp;&nbsp;:&nbsp;</label>
            <input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName">
            <br>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label> Skor CLI &nbsp;&nbsp;: </label>
            <input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果我在 inputid="inputDatabaseName" 中输入内容，我想再次更改 inputid="skorclis" 中的值。但我的脚本不想重复更改 inputid="skorclis" 的值。只想要第一个 if 语句。并且不想再改变。如何让它再次变成变化？

标签： javascript

Answer 1

看看那个：

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>