jsDOM练习DOM练习

DOM练习:显示隐藏密码明文；显示隐藏文本框内容密码明文；显示隐藏文本框内容


<div>
  <label for="password">密码：</label>
  <input type="password" id="password">
  <button id="togglePassword">显示/隐藏密码</button>
</div>

<div>
  <label for="text">文本：</label>
  <input type="text" id

const passwordInput = document.getElementById('password');
const textInput = document.getElementById('text');
const togglePasswordBtn = document.getElementById('togglePassword');
const toggleTextBtn = document.getElementById('toggleText');

// 切换密码输入框的可见性和内容明文和密文之间的转换
togglePasswordBtn.addEventListener('click', () => {
  const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordInput.setAttribute('type', type);
  togglePasswordBtn.textContent = type === 'password' ? '显示密码' : '隐藏密码';
});

// 切换文本输入框的可见性
toggleTextBtn.addEventListener('click', () => {
  const type = textInput.getAttribute('type') === 'text' ? 'password' : 'text';
  textInput.setAttribute('type', type);
  toggleTextBtn.textContent = type === 'text' ? '显示文本' : '隐藏文本';
});