如何启用/禁用 HTML jscript 中的按钮

Question

我正在尝试使用 django 项目的 js 功能启用 web 页面上的按钮。 我是新来的所以请冷静:-)

 function change(id) { var elem = document.getElementById(id); let editID = "edit_".concat(id) let deleteID = "delete_".concat(id) if (elem.value == "Undo") { elem.value = "Modify"; editButtonElement = document.getElementsByName(editID) editButtonElement.disabled = false deleteButtonElement = document.getElementsByName(deleteID) deleteButtonElement.disabled = false } else { elem.value = "Undo"; editButtonElement = document.getElementsByName(editID) editButtonElement.disabled = true deleteButtonElement = document.getElementsByName(deleteID) deleteButtonElement.disabled = true } }

 <input onclick="change(id)" type="button" value="Modify" id="11" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_11">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_11">Delete</button> </div> <br></br> <input onclick="change(id)" type="button" value="Modify" id="22" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_22">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_22">Delete</button> </div>

我想要发生的是主按钮的名称从"Modify"更改为"Undo" ，这会发生。 但我也希望启用两个相关的Edit和Delete按钮以便按下它们。

谁能告诉我我做错了什么？ 谢谢！

Answer 1

您可以分配一个外部事件侦听器来使用一组可能的状态来处理按钮单击，从而创建一个简单的切换机制。

仅供参考： input元素是self-closing ，因此您不像大多数 HTML 标签那样提供</input> 。

要在 Javascript 中连接，请使用+而不是. 这是 PHP 中的默认值，因此您应该将"edit_".concat(id)更改为"edit_" + id

 const states=['Undo','Modify']; document.querySelectorAll('input[type="button"]').forEach( bttn=>{ bttn.addEventListener('click', function(e){ this.value=states[ 1 - states.indexOf( this.value ) ]; let div=document.querySelector('div.btn-group[data-id="'+this.id+'"]'); div.querySelectorAll('button').forEach(bttn=>{ bttn.disabled = this.value==states[1]; }); }); })

 <input type="button" value="Modify" id="11" class="btn btn-info" /> <div class="btn-group" role="group" aria-label="Basic example" data-id=11> <button type="button" class="btn btn-secondary" disabled="false">Edit</button> <button type="button" class="btn btn-secondary" disabled="false">Delete</button> </div> <br /><br /> <input type="button" value="Modify" id="22" class="btn btn-info" /> <div class="btn-group" role="group" aria-label="Basic example" data-id=22> <button type="button" class="btn btn-secondary" disabled="false">Edit</button> <button type="button" class="btn btn-secondary" disabled="false">Delete</button> </div> <br /><br />

Answer 2

您应该使用getElementById而不是getElementsByName

 function change(id) { var elem = document.getElementById(id); let editID = "edit_".concat(id) let deleteID = "delete_".concat(id) if (elem.value == "Undo") { elem.value = "Modify"; editButtonElement = document.getElementById(editID) editButtonElement.disabled = false deleteButtonElement = document.getElementById(deleteID) deleteButtonElement.disabled = false } else { elem.value = "Undo"; editButtonElement = document.getElementById(editID) editButtonElement.disabled = true deleteButtonElement = document.getElementById(deleteID) deleteButtonElement.disabled = true } }

 <input onclick="change(id)" type="button" value="Modify" id="11" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_11">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_11">Delete</button> </div> <br></br> <input onclick="change(id)" type="button" value="Modify" id="22" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_22">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_22">Delete</button> </div>

Answer 3

为避免重复，您可以切换一个 function 中的所有按钮。 如果您想要处理的不仅仅是“修改”和“撤消”，也可以使用switch语句，例如：

 function toggleButtons(id, disabled) { ["edit", "delete"].forEach(action => window[`${action}_${id}`].disabled = disabled) } function change(id) { const elem = window[id], v = elem.value; switch (v) { case "Undo": toggleButtons(id, true); elem.value = "Modify"; break; default: toggleButtons(id, false); elem.value = "Undo"; break; } }

 <input onclick="change(id)" type="button" value="Modify" id="11" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_11">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_11">Delete</button> </div> <br><br> <input onclick="change(id)" type="button" value="Modify" id="22" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_22">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_22">Delete</button> </div>

Answer 4

我很确定这会奏效。

 function change(id) { var elem = document.getElementById(id); console.log(elem); let editID = "edit_".concat(id); let deleteID = "delete_".concat(id); if (elem.value == "Undo") { elem.value = "Modify"; let editButtonElement = document.getElementById(editID); editButtonElement.disabled = false; let deleteButtonElement = document.getElementById(deleteID); deleteButtonElement.disabled = false; } else { elem.value = "Undo"; let editButtonElement = document.getElementById(editID); editButtonElement.disabled = true; let deleteButtonElement = document.getElementById(deleteID); deleteButtonElement.disabled = true; } }

 <input onclick="change('eleven')" type="button" value="Modify" id="eleven" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_eleven">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_eleven">Delete</button> </div> <br></br> <input onclick="change('twentyTwo')" type="button" value="Modify" id="twentyTwo" class="btn btn-info"></input> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary" disabled="false" id="edit_twentyTwo">Edit</button> <button type="button" class="btn btn-secondary" disabled="false" id="delete_twentyTwo">Delete</button> </div>

您忘记使用“let”或“var”之类的关键字声明变量，并使用 getElementsByName 而不是 getElementById。 避免使用数字作为 id 并使用分号也是一个好习惯。 你的代码很干净