Disable and enable a button in HTML, JavaScript

June 16, 2023

In the script tag, I have 2 tables: 1 with id "polnoletni" and one with id "maloletni". In each of them I have buttons. Basically, this site is about getting vaccinated. So, as long as there are tr elements in "polnoletni", the button in "maloletni" should stay disabled. When there are no more elements in the table "polnoletni" (the button is pressed and the elements are sent to new table for vaccinated people), then the button in "maloletni" should be enabled.

I tried to make a function that will check how much tr elements are in "polnoletni" and then use it in function vakciniran(), but the problem is that the button in "maloletni" is still disabled when it should be enabled.

This is my code:

<script>
    var data = '[{"ime":"Angela","prezime":"Angelova","id":"1503996780019","pol":"1","godini":"14","email":"anchian@yahoo.com","lokacija":"Bitola"},{"ime":"Dimitar","prezime":"Dimitrov","id":"1204950490019","pol":"2","godini":"71","email":"dimitar.dimitrov@gamil.com","lokacija":"Skopje"}]'
    var newData = JSON.parse(data)

    window.onload=function (){
      for(let i=0;i<newData.length;i++){
        let ime=newData[i].ime
        let prezime=newData[i].prezime
        let pol=newData[i].pol
        let godini=newData[i].godini
        let email=newData[i].email
        let lokacija=newData[i].lokacija

        let maloletni=document.getElementById("maloletni")
        let polnoletni=document.getElementById("polnoletni")

        if(godini<18){
          maloletni.innerHTML+="<tr><td>"+ime+"</td>" +
                  "<td>"+prezime+"</td>" +
                  "<td>"+email+"</td>" +
                  "<td>"+lokacija+"</td>" +
                  "<td><button id='KURVA' disabled='true'>Вакциниран</button></td></tr>"
        }


        let poln=document.createElement("tr")
        if(godini>=18){
          poln.innerHTML+="<td>"+ime+"</td>" +
                  "<td>"+prezime+"</td>" +
                  "<td>"+email+"</td>" +
                  "<td>"+lokacija+"</td>" +
                  "<td><button onclick='vakciniran(this)'>Вакциниран</button></td>"
          polnoletni.append(poln)
        }

        if(pol==="1")
          poln.style.backgroundColor="orange"
        else if(pol==="2")
          poln.style.backgroundColor="lightblue"
      }

    }
    function checkPolnoletni() {
      let polnoletni=document.getElementById("polnoletni")
      let polnoletniRows = polnoletni.getElementsByTagName("tr")
      return polnoletniRows.length === 0;
    }

    function vakciniran(button) {
      let parent=button.parentNode.parentNode
      parent.style.opacity=1
      let interval=setInterval(function (){
        parent.style.opacity-= 0.1
      }, 150)
      setTimeout(function (){
        clearInterval(interval)
        let list=document.getElementById("list")
        let item=document.createElement("li")
        item.innerHTML=parent.children[0].innerHTML+" "+parent.children[1].innerHTML
        list.append(item)
        parent.remove()
        if (checkPolnoletni()){
          document.getElementById("KURVA").disabled = false
        }
      }, 1500)
    }
  </script>
</head>
<body>
<div id="container">
  <h1>Вакцина.мк</h1>
  <h2>Сајт за искажување интерес за вакцина</h2>
  <div class="div">
    <label>Име:</label> <input type="text" id="name">
  </div>
  <div class="div">
    <label>Презиме</label> <input type="text" id="surname">
  </div>
  <div class="div">
    <label>Матичен број:</label> <input type="text" id="embg">
  </div>
  <div class="div">
    <label>Пол:</label> <input type="radio" id="female">Женски <input type="radio" id="male">Машки
  </div>
  <div class="div">
    <label>Години:</label> <input type="text" id="years">
  </div>
  <div class="div">
    <label>Емаил адреса:</label> <input type="text" id="email">
  </div>
  <div class="div">
    <label>Локација:</label>
    <select id="location">
      <option>Скопје</option>
      <option>Куманово</option>
      <option>Битола</option>
      <option>Тетово</option>
    </select>
  </div>
  <button onclick="vnesi()" id="vnesi">Внеси</button>
</div>

<div id="div1">
  <h2>Пријавени малолетни граѓани</h2>
  <table id="maloletni">
    <th>Име</th>
    <th>Презиме</th>
    <th>Адреса</th>
    <th>Локација</th>
    <th>Статус</th>
  </table>
</div>

<div id="div2">
  <h2>Пријавени полнолетни граѓани</h2>
  <table id="polnoletni">
    <th>Име</th>
    <th>Презиме</th>
    <th>Адреса</th>
    <th>Локација</th>
    <th>Статус</th>
  </table>
</div>
<br> <br>
<h3>Вакцинирани:</h3>
<ul id="list"></ul>
</body>
</html>`

>Solution :

You need to change the checkPolnoletni function to this

function checkPolnoletni() {
  let polnoletni=document.getElementById("polnoletni")
  let polnoletniRows = polnoletni.getElementsByTagName("tr")
  return polnoletniRows.length === 1;
}

You check if there are still table rows or not, but there will always be the table header row.
You’ll have to change the value from 0 to 1 and it will work