Saya memiliki formulir HTML yang akan berisi nilai yang telah ditentukan sebelumnya yang harus dikonfirmasi oleh pengguna dengan mengedit kontennya, jika diperlukan. Saya ingin melakukan pemeriksaan konstan sehingga latar belakang warna setiap sel berubah sesuai dengan isinya. Misalnya, jika sel kosong, latar belakangnya harus berwarna merah. Nanti saya tambahin lagi cek, misal kalau berisi string "MISSING VALUE" harusnya kuning dan seterusnya.

Ini adalah contoh formulir saya dan kode yang saya coba jalankan:

<!DOCTYPE html>
<html>
<style type="text/css">
  table.first {
    display: table;
    table-layout: auto;
    float: none margin-left: auto;
    margin-right: auto;
  }
  
  .table_element {
    display: table-cell;
  }
</style>

<table class="first">
  <div class="table_element">
    <p style="text-align: center;">First Name:<br><input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio"></p>
  </div>
  <div class="table_element">
    <p style="text-align: center;">Last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE"></p>
  </div>
</table>

<script type="text/javascript">
  function checkFilled() {
    var inputVal = document.getElementsByClassName("table_element");
    for (var i = 0; i < inputVal.length; i++) {
      document.writeln((i + 1) + ": " + inputVal[i].value);
    }
    for (var i = 0; i < inputVal.length; i++) {
      if (inputVal[i].value == "") {
        inputVal[i].style.backgroundColor = "red";
      } else {
        inputVal[i].style.backgroundColor = "white";
      }
    }
  }
  checkFilled();
</script>

</html>

Yang tidak saya mengerti adalah bagaimana cara mendapatkan nilai string di dalam elemen div. Seperti yang Anda lihat, saya mencoba mencetaknya sebagai debug, dan saya berharap mendapatkan nilai Claudio dan MISSING VALUE, tetapi yang saya dapatkan hanyalah undefined. Saya kira seharusnya cukup mudah untuk mendapatkan konten sel, jadi saya berasumsi saya kehilangan sesuatu yang sangat jelas. Terima kasih untuk bantuannya.

0
SilentCloud 12 Mei 2021, 11:50

2 jawaban

Jawaban Terbaik

Pertama-tama temukan elemen input di dalam elemen div Anda dan kemudian gunakan properti value di dalamnya.

    function checkFilled() {
        const divEle = document.getElementsByClassName("table_element");
       
        for(let i = 0; i < divEle.length; i++) {
            const inputVal = divEle[i].children[0].children[1];
            if (inputVal.value == "") {
              inputVal.style.backgroundColor = "red";
            } else if (inputVal.value == "MISSING VALUE") {
              inputVal.style.backgroundColor = "green";
            }
        }
    }
checkFilled();
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    table.first{
        display: table;
        table-layout: auto;
        float:none
        margin-left: auto; 
        margin-right: auto;
    }
    .table_element{
        display: table-cell;
    }
</style>
</head>
<body>

<table class="first">
    <div class="table_element">
        <p style="text-align: center;">First Name:<br>
        <input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio" />
        </p>
    </div>
    <div class="table_element">
        <p style="text-align: center;">Last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE" /></p>
    </div>
</table>

</body>

</html>
2
Rahul Kumar 12 Mei 2021, 09:21

Pertama, Anda harus selalu memiliki elemen body. Setiap kali Anda membuat dokumen HTML baru, Anda harus terlebih dahulu menempelkan berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

Skrip dan stylesheet harus masuk ke bagian head, dan konten apa pun yang harus terlihat oleh pengguna masuk ke bagian body. <meta charset="utf-8"> harus selalu ada - jika tidak, karakter non-ASCII tidak akan ditampilkan dengan benar. Ubah utf-8 ke penyandian apa pun yang Anda gunakan di editor Anda.

Kedua, inputVal[i].value mencoba mengakses properti nilai dari elemen p di sisi .table_element - tetapi paragraf tidak memiliki nilai, jadi Anda mendapatkan undefined.

Ketiga, document.write dan document.writeln tidak boleh digunakan - jika Anda ingin menunjukkan sesuatu kepada pengguna, tuliskan ke dalam elemen HTML, dan jika Anda ingin mencetak sesuatu untuk keperluan debugging, gunakan console.log(...).

Terakhir, div bukan turunan yang valid dari table - hanya thead, tbody dan tr.

Untuk menemukan elemen input, Anda dapat menggunakan document.querySelectorAll. Mengikuti kode modern yang berfungsi:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style type="text/css">
    table.first {
      display: table;
      table-layout: auto;
      float: none;
      margin-left: auto;
      margin-right: auto;
    }
    
    .table_element {
      display: table-cell;
    }
  </style>
  <script type="text/javascript">
    function checkFilled() {
      let inputElements = document.querySelectorAll(".table_element input");
      let outputElement = document.querySelector("#output");
      outputElement.innerHTML = "You entered : ";

      for (let [index, inputElement] of inputElements.entries()) {
        outputElement.innerHTML += " " + (index + 1) + " " + inputElement.value;
        if (inputElement.value == "") {
          inputElement.style = "background-color: red;";
        } else {
          inputElement.style = "background-color: green;";
        }
      }
    }
    window.addEventListener("load", checkFilled);
  </script>
</head>

<body>
  <div class="table_element">
    <p style="text-align: center;">First Name :</p>
    <input name="import_date_visit" id="subEmail" type="text" required size="25" oninput="checkFilled();" value="Claudio">
  </div>
  <div class="table_element">
    <p style="text-align: center;">Last name :</p>
    <input name="import_date_visit" type="text" required size="25" oninput="checkFilled();" value="MISSING VALUE">
  </div>
  <p id="output">You entered : nothing yet</p>
</body>

</html>
1
Programmer 12 Mei 2021, 11:28