Estoy tratando de habilitar botones en una página web usando una función js para un proyecto django. Soy nuevo en esto, así que sé genial :-)
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> <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> <br> Lo que me gustaría que pasara es que el nombre del botón principal cambiara de "Modify" a "Undo" , cosa que pasa. Pero también me gustaría que los dos botones Edit y Delete relacionados estén habilitados para presionarlos.
Alguien puede decirme que estoy haciendo mal? ¡Gracias!
Puede asignar un detector de eventos externo para procesar los clics de los botones utilizando una matriz de estados posibles para que se cree un mecanismo de alternancia simple.
FYI: los elementos de input se self-closing por lo que no proporciona un </input> como con la mayoría de las etiquetas HTML.
Para concatenar en Javascript, usa + en lugar de . que es el valor predeterminado en PHP, por lo que debe cambiar "edit_".concat(id) a "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 />Debe usar getElementById en lugar de 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>Para evitar repetirse, puede alternar todos los botones en una función. También podría usar una declaración de switch si desea manejar más que "Modificar" y "Deshacer", por ejemplo:
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>