为什么我的 secont 事件列表在第一个之后不起作用



我有一个配置文件页面,并且有一个编辑按钮。当我单击编辑按钮时,您可以编辑页面上的信息。

问题是,当我点击编辑按钮后出现的按钮done时,第二个事件监听器将不起作用,没有任何变化。

```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>

问题是js文件中的.setAttribute,它需要两个参数而不是一个。谢谢你帮忙。

您应该将只读属性设置为真正的

textBox.setAttribute("readonly", true);

您可能不使用事件侦听器,而是使用它并在单击按钮<input type="button" class="button" onclick="editFunction()" value="Edit" />时调用函数

相关内容

  • 没有找到相关文章

最新更新