'Why my secont event listerner won't work after the first one

I have a profile page and there is an edit button. When I click the edit button you can edit the information on the page.

The thing is the second event listener won't work when I click the button done which is appeared after clicking the edit button, nothing changes.

```const editButton = document.querySelector('.edit-btn');
const doneButton = document.querySelector(".done-btn");
const textBox = document.querySelector('.txt-box');
const textArea = document.querySelector('.description');
const pwbox = document.querySelector('.pw-box');
const dateBox = document.querySelector(".date-joined");```
editButton.addEventListener('click', e => {
  textBox.removeAttribute('readonly');
  textArea.removeAttribute('readonly');
  textBox.style.borderBottom = '1px gray solid';
  pwbox.style.display = "flex";
  doneButton.style.display = "block";
  editButton.style.display = 'none';
  dateBox.style.display = "none";
});

doneButton.addEventListener('click', e => {
  textBox.setAttribute("readonly");
  textBox.style.removeProperty('background color');
  textBox.style.removeProperty('border-bottom');
  pwbox.style.display = "none";
  doneButton.style.display = "none";
  editButton.style.display = 'block';
  dateBox.style.display = "flex";
});
<div class="infobox">
  <input type="text" name="uname" class="uname txt-box" value="<?php echo $usersName ?>" readonly autocomplete="off">
  <input type="text" name="email" class='email' value="<?php echo $usersEmail ?>" readonly>
  <div class="pw-box">
    <label for="password">Password</label>
    <input type="password" name="password" class="password">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" name="conf-password" class="conf-password">
  </div>
  <div class=" date-joined">
    <small>Date Joined</small>
    <div>01/01/01</div>
  </div>

</div>
<div class="description-box">

  <textarea name="description" class="description" cols="30" rows="10" placeholder="Let me describe you!" readonly></textarea>
  <button class='edit-btn'>Edit</button>
  <button class="done-btn">Done</button>

</div>
javascripthtmlcss


Solution 1:[1]

The problem is the .setAttribute in my js file, it need 2 parameters instead of one. Thanks for helping out.

Solution 2:[2]

You should set the readonly attribute to true

textBox.setAttribute("readonly", true);

Solution 3:[3]

Instead of using an event listener, you could probably use this and call a function when you click the button <input type="button" class="button" onclick="editFunction()" value="Edit" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joroi
Solution 2 Albi Çenga
Solution 3

Related Questions