Showing button after keydown event

I want to show 2 buttons when keydown event is triggered. It’s actually for profile page where when any data is edited Then only update or cancel button should appear.but by default these buttons should be not seen.I used js to show the button or trigger a css class whenever the keydown event is triggered but that seems to not work.

let updateBtn = document.getElementbyID('updateBtn');

function showUpdate() {
  updateBtn.classList.add("upBtnPop");

}

.upBtn {
  cursor: pointer;
  background-color: rgb(67, 207, 67);
  width: 100px;
  border: none;
  border-radius: 15px;
  height: 30px;
  font-size: 15px;
  font-weight: 700;
  margin-right: 20px;
  margin-left: 40px;
  visibility: hidden;
}

.upBtn:hover {
  color: white;
  background-color: rgb(142, 168, 39);
  transition: 0.4s;
}

.upBtnPop {
  visibility: visible;
}

.cnBtn {
  cursor: pointer;
  background-color: rgb(67, 207, 67);
  width: 100px;
  border: none;
  border-radius: 15px;
  height: 30px;
  font-size: 15px;
  font-weight: 700;
  visibility: hidden;
}

.cnBtn:hover {
  color: white;
  background-color: rgb(142, 168, 39);
  transition: 0.4s;
}

.cnBtnPop {
  visibility: visible;
}

<div class="userClass" onkeyup="showUpdate();" id="userData" name="name">
  <p>Full Name : <input class="userData" value="<?php echo $ret_data['fullName'] ?>" type="text"></p>
</div>
<br>
<div class="userClass" onkeyup="showUpdate();" id="userData" name="email">
  <p>Email : <input class="userData" value="<?php echo $ret_data['email'] ?>" type="text"></p>
</div>
<br>
<div class="userClass" onkeyup="showUpdate();" id="userData" name="contact">
  <p>Phone : <input class="userData" value="<?php echo $ret_data['contactNum'] ?>" type="text"></p>
</div>
<br>
<div class="userClass" onkeyup="showUpdate();" id="userData" name="password">
  <p>Password : <a href="">Change Password ?</a></p>
</div>
<br>
<button class="upBtn" id="updateBtn">Update</button>
<button class="cnBtn" id="cancelBtn">Cancel</button>
<a href="logout.php"><button class="logBtn">Log out</button></a>

Answer

You used the wrong case for document.getElementById(). You typed document.getElementbyID(). In addition to this, you should remove the .upBtnPop style rule, and instead add a isHidden class to the button on load, with a single style rule for that class, hiding the button. Then simply remove the class when the onKeyUp event is fired.

Finally, make these slight changes:

• move all of those event declarations to the Javascript, so you can better control them (and you’re not repeating yourself).

• move the keyup event listener to the inputs themselves.

• move the name attributes to the inputs and remove the password name attribute.

• remove the ids from the .userClass divs. Id names can only be used once per page.

const inputs = document.querySelectorAll('.userData');

inputs.forEach(input => {
  input.addEventListener('keyup', () => {
    document.getElementById('updateBtn').classList.remove('isHidden');
  });
});

.upBtn {
  cursor: pointer;
  background-color: rgb(67, 207, 67);
  width: 100px;
  border: none;
  border-radius: 15px;
  height: 30px;
  font-size: 15px;
  font-weight: 700;
  margin-right: 20px;
  margin-left: 40px;
}

.upBtn.isHidden {
  visibility: hidden;
}

.upBtn:hover {
  color: white;
  background-color: rgb(142, 168, 39);
  transition: 0.4s;
}

.cnBtn {
  cursor: pointer;
  background-color: rgb(67, 207, 67);
  width: 100px;
  border: none;
  border-radius: 15px;
  height: 30px;
  font-size: 15px;
  font-weight: 700;
  visibility: hidden;
}

.cnBtn:hover {
  color: white;
  background-color: rgb(142, 168, 39);
  transition: 0.4s;
}

.cnBtnPop {
  visibility: visible;
}

<div class="userClass">
  <p>Full Name : <input class="userData" value="John Doe" type="text" name="name"></p>
</div>
<br>
<div class="userClass">
  <p>Email : <input class="userData" value="[e-mail]" type="text" name="email"></p>
</div>
<br>
<div class="userClass">
  <p>Phone : <input class="userData" value="555-1234" type="text" name="contact"></p>
</div>
<br>
<div class="userClass">
  <p>Password : <a href="">Change Password ?</a></p>
</div>
<br>
<button class="upBtn isHidden" id="updateBtn">Update</button>
<button class="cnBtn" id="cancelBtn">Cancel</button>
<a href="logout.php"><button class="logBtn">Log out</button></a>