Saya mencoba menambahkan jam yang dimasukkan ke dalam bidang yang mendahului H dan M. Saya tahu bahwa saya hanya membutuhkannya untuk bekerja sekali untuk H dan saya kemudian dapat menerapkan kode yang sama dengan M. Saya harap itu tidak terlalu membingungkan. Ini adalah potongan dari apa yang saya miliki.

function sum() {
  var num1 = parseInt(document.getElementById("h1").value);
  var num2 = parseInt(document.getElementById("h2").value);
  var num3 = parseInt(document.getElementById("h3").value);
  var num4 = parseInt(document.getElementById("h4").value);

  var result = num1 + num2 + num3 + num4;

  document.getElementById("h5").value = sum;
}
<td><h5>Current</h5></td>
<td><span><input id="h1" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M
<td><span><input id="h2" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M          
<td><span><input id="h3" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M
<td><span><input id="h4" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M
<td><span><input id="h4" type="number justify-content-center" size="5" readonly>H</span><span><input type="number justify-content-center" size="5" readonly>M <button type="button" name="clickbtn" value="Calculate" onclick="sum()">Calculate</button>
0
Mmilest8 29 Mei 2021, 02:14

3 jawaban

Jawaban Terbaik

Demi membantu Anda melihat bagaimana menyederhanakan hal-hal dan membuat kode Anda lebih mudah dibaca dan kurang besar, saya merevisi beberapa hal dan mengoreksi beberapa di sepanjang jalan.

Eventlistener regex Anda bekerja dengan baik, tetapi sama untuk setiap elemen input, jadi saya menghapusnya, dan sebaliknya mengatur loop untuk melewati setiap elemen satu jam dan menerapkannya. Ini mengurangi kode Anda sedikit, dan Anda dapat melihat cara kerjanya. Di halaman aktual Anda, Anda akan ingin memastikan Anda menjalankan loop itu setelah html atau di jendela. Fungsi muat, seperti ini:

window.onload = function() {
 let h = document.querySelectorAll('.h, .m');
 for (let x = 0; x < h.length; x++) {
  h[x].addEventListener('input', function(e) {
    e.target.value = e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  });
 }
}

Tag type Anda memiliki kelas CSS di dalamnya (saya pikir) yang saya lepas. Juga, size tidak perlu diulang, cukup gunakan gaya CSS.

Anda tidak perlu semua tag ID - hanya yang menampilkan total. Sebagai gantinya, saya memberi setiap elemen kelas - h untuk jam dan m untuk menit. Sekarang, menggunakan loop queryselector, Anda dapat menambahkan semuanya. Ini juga memiliki manfaat dari memungkinkan Anda untuk menambahkan input satu jam / menit seperti yang Anda inginkan dan tidak harus menyesuaikan javascript.

Dalam fungsi penambahan, penting untuk mengubah nilai input menjadi angka. Saya menggunakan operator shorthand + tepat di depan nilai yang memberi tahu JavaScript untuk mengubahnya menjadi angka. Number(value) atau parseInt(value) atau parseFloat(value) semua akan bekerja untuk itu juga. Saya juga menggunakan ekspresi terner (memperpendek pernyataan jika) +h[x].value || 0 untuk memeriksa apakah nilainya ada, jika tidak menggunakan nol.

let h = document.querySelectorAll('.h, .m');
for (let x = 0; x < h.length; x++) {
  h[x].addEventListener('input', function(e) {
    e.target.value = e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  });
}



function sum() {
  let h = document.querySelectorAll('.h');
  let m = document.querySelectorAll('.m');
  let total_h = total_m = 0;
  for (let x = 0; x < h.length; x++) {
    total_h += +h[x].value || 0;
  }
  for (let x = 0; x < m.length; x++) {
    total_m += +m[x].value || 0;
  }
  document.getElementById("total_h").value = total_h;
  document.getElementById("total_m").value = total_m;
}
.h,
.m {
  width: 30px;
}
<table class='table'>
  <tr>
    <td>
      <h5>Current</h5>
    </td>
    <td><span><input type="number" class="h justify-content-center"  >H</span><span><input type="number" class="m justify-content-center" >M
          <td><span><input type="number" class="h justify-content-center" >H</span><span><input type="number" class="m justify-content-center">M          
          <td><span><input type="number" class="h justify-content-center" >H</span><span><input type="number" class="m justify-content-center">M
          <td><span><input type="number" class="h justify-content-center">H</span><span><input type="number" class="m justify-content-center" >M
          <td><span><input id="total_h" type="number" class="h  justify-content-center"  readonly>H</span><span><input type="number" id="total_m" class="h  justify-content-center"  readonly>M </td></tr></table>
          
          <button type="button" name="clickbtn" value="Calculate" onclick="sum(this)">Calculate</button>
1
Kinglish 28 Mei 2021, 23:45

Saya pikir Anda harus menggunakan properti innerHTML atau innerText. document.getElementsByTagName("h5").innerHTML = sum;

Oh, tag <h5> tidak memiliki properti id.

0
deleuterio 28 Mei 2021, 23:24

Beberapa hal:

  • id="h5" tidak ada di html
  • value = sum; jumlah bukan variabel, result Apakah nilai yang Anda maksudkan
  • Beberapa tag HTML tidak dihentikan dengan benar, browser tidak peduli

Sekarang ini berfungsi:

function sum() {
  var num1 = parseInt(document.getElementById("h1").value);
  var num2 = parseInt(document.getElementById("h2").value);
  var num3 = parseInt(document.getElementById("h3").value);
  var num4 = parseInt(document.getElementById("h4").value);

  var result = num1 + num2 + num3 + num4;

  document.getElementById("h5").value = result;
}
<td><h5>Current</h5></td>
<td><span><input id="h1" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M
<td><span><input id="h2" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M          
<td><span><input id="h3" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M
<td><span><input id="h4" type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">H</span><span><input type="number justify-content-center" size="5" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">M
<td><span><input id="h5" type="number justify-content-center" size="5" readonly>H</span><span><input type="number justify-content-center" size="5" readonly>M <button type="button" name="clickbtn" value="Calculate" onclick="sum()">Calculate</button>

Tetapi Anda mungkin ingin menandai semua input yang perlu dijumlahkan dengan kelas seperti:

<input class="h_sum">
<input class="m_sum">

Dan tulis fungsi seperti ini:

const makeSum = (class) => [...document.querySelectorAll(class)].reduce(
  (acc, x) => acc + parseFloat(x.value, 10), 0);
document.getElementById("h5").value = makeSum('.h_sum');
document.getElementById("h6").value = makeSum('.m_sum');
1
A1rPun 28 Mei 2021, 23:35