Selamat siang!

Saya mencoba mengerjakan Kalkulator Persentase Real-time yang menampilkan hasil pada input pengguna menggunakan JavaScript onkeyup="calc();" dan fungsi step up yang terpasang pada tombol. Ini berfungsi ketika saya memasukkan teks tetapi tidak berfungsi ketika saya mengklik tombol penambahan dan pengurangan berdampingan dengan bidang input.

Kedua saya berharap mungkin ada cara untuk menentukan dua nilai untuk setiap opsi drop-down dan menampilkan setiap hasil persentase nilai secara terpisah. Dengan asumsi 22% & 6%

Untuk pertanyaan pertama, ini kode saya.

function calc() {
  var i = document.getElementById("amount_trade").value;
  var p = document.getElementById("percent").value;
  var o = (i / 100) * p;
  document.getElementById("output").innerHTML = o;
}
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
Input: <button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepDown()" class="btn btn-primary default"><strong>-</i></strong></button>

<input type="number" id="amount_trade" onkeyup="calc();" onchange="calc();" />

<button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepUp()" class="btn btn-primary default"><strong>+</button><br />

<select class="form-control select2-single" data-width="100%" id="percent" onchange="calc();">
  <option value="50">50% &amp; 2%</option>
  <option value="22">22% &amp; 6%</option>
  <option value="16">16% &amp; 10%</option>
  <option value="8">8% &amp; 15%</option>
  <option value="4">4% &amp; 67%</option>
</select>


<span id="output"></span>
0
Aliu 7 Januari 2021, 14:26

2 jawaban

Jawaban Terbaik

Berikut adalah skrip yang didelegasikan menggunakan pendengar acara yang direkomendasikan alih-alih pengendali acara sebaris

Saya juga memperbaiki HTML Anda yang tidak valid di tombol

Saya memberi opsi nilai yang dipisahkan oleh titik koma untuk memiliki dua nilai dalam satu opsi

const container = document.getElementById("container");
const amount = document.getElementById("amount_trade")
const percent = document.getElementById("percent");
const out1 = document.getElementById("out1");
const out2 = document.getElementById("out2");

// reusable function
const calc = function(e) {
  const amt = amount.value;
  const p = percent.value.split(";")
  const o1 = (amt / 100) * p[0];
  const o2 = (amt / 100) * p[1];
  out1.innerHTML = o1.toFixed(2);
  out2.innerHTML = o2.toFixed(2);
};

// any click in the container - it is called delegation
container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("btn")) { // use a more specific class if you will have more buttons
    if (tgt.id === "up") amount.stepUp(); // it is up
    else amount.stepDown(); // else it is down. Add an "if" if needed
  }
  calc(); // always calc
})

container.addEventListener("input", calc); // any input will calculate
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
<div id="container">
  Input: <button type="button" id="down" class="btn btn-primary default">-</button>

  <input type="number" id="amount_trade" value="0" />

  <button type="button" id="up" class="btn btn-primary default">+</button><br />

  <select class="form-control select2-single" data-width="100%" id="percent">
    <option value="50;2">50% &amp; 2%</option>
    <option value="22;6">22% &amp; 6%</option>
    <option value="16;10">16% &amp; 10%</option>
    <option value="8;15">8% &amp; 15%</option>
    <option value="4;67">4% &amp; 67%</option>
  </select>


  <span id="out1"></span> - <span id="out2"></span>
</div>

Anda juga dapat memiliki SATU div keluaran dan kemudian

output.innerHTML = `<span id="out1">${o1.toFixed(2)}</span>  
                    <span id="out2">${o2.toFixed(2)}</span>`;
2
mplungjan 7 Januari 2021, 11:57

Anda dapat menambahkan fungsi calc() ke tombol onclick

function calc() {
  var i = document.getElementById("amount_trade").value;
  var p = document.getElementById("percent").value;
  var o = (i / 100) * p;
  document.getElementById("output").innerHTML = o;
}
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
Input: <button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepDown();calc();" class="btn btn-primary default"><strong>-</i></strong></button>

<input type="number" id="amount_trade" onkeyup="calc();" onchange="calc();" />

<button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepUp();calc();" class="btn btn-primary default"><strong>+</button><br />

<select class="form-control select2-single" data-width="100%" id="percent" onchange="calc();">
  <option value="50">50% &amp; 2%</option>
  <option value="22">22% &amp; 6%</option>
  <option value="16">16% &amp; 10%</option>
  <option value="8">8% &amp; 15%</option>
  <option value="4">4% &amp; 67%</option>
</select>


<span id="output"></span>
0
dolmushcu 7 Januari 2021, 11:34