触发keydown事件后显示按钮的实现问题

核心问题及修正点 #

1. JS方法拼写错误：document.getElementbyID 应为 document.getElementById（ID的字母D需大写），这是按钮无法添加显示类的直接原因。
2. 事件绑定位置错误：onkeyup 绑定在div元素上不会触发，用户是在输入框中编辑内容，需把事件绑定到input标签上。
3. 未处理Cancel按钮：原函数只操作了Update按钮，需同时给Cancel按钮添加显示类。
4. 重复ID问题：多个div使用了相同的userDataID，违反HTML唯一ID规则，需删除或修改重复ID。

修正后的完整代码 #

HTML

<div class="userClass" name="name">
  <p>Full Name : <input class="userData" value="<?php echo $ret_data['fullName'] ?>" type="text" onkeyup="showUpdate();"></p>
</div>
<br>
<div class="userClass" name="email">
  <p>Email : <input class="userData" value="<?php echo $ret_data['email'] ?>" type="text" onkeyup="showUpdate();"></p>
</div>
<br>
<div class="userClass" name="contact">
  <p>Phone : <input class="userData" value="<?php echo $ret_data['contactNum'] ?>" type="text" onkeyup="showUpdate();"></p>
</div>
<br>
<div class="userClass" 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>

CSS

.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;
}

.upBtn.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;
}

.cnBtn.cnBtnPop {
  visibility: visible;
}

（注：CSS中提升显示类的选择器优先级，避免默认样式覆盖）

JavaScript

let updateBtn = document.getElementById('updateBtn');
let cancelBtn = document.getElementById('cancelBtn');

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

可选优化：事件委托 #

如果不想给每个input逐个绑定事件，用事件委托更简洁：

// 给所有输入框加个父容器
document.querySelector('.user-data-wrapper').addEventListener('keyup', function(e) {
  if (e.target.classList.contains('userData')) {
    updateBtn.classList.add("upBtnPop");
    cancelBtn.classList.add("cnBtnPop");
  }
});

对应的HTML需调整：

<div class="user-data-wrapper">
  <!-- 所有包含input的userClass div都放在这里 -->
</div>

内容的提问来源于stack exchange，提问作者Ditik Rimal