I am trying to enable buttons on a web page using a js funtion for a django project. I am new this so please be cool :-)
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>What I would like to happen is for the name of the main button change from "Modify" to "Undo", which happens. But I'd also like for the two related Edit and Delete buttons to be enabled so as to press them.
Anyone can tell me what I am doing wrong? Thanks!
You could assign an external event listener to process the buttons clicks using an array of possible states so that a simple toggle mechanism is created.
FYI: input elements are self-closing so you do not supply a </input> as with the majority of HTML tags.
To concatenate in Javascript you use + rather than . which is the default in PHP so you should change "edit_".concat(id) to "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 />You should use getElementById instead of 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>To avoid repeating yourself, you could toggle all buttons in one function. Also you could use a switch statement if you want to handle more than "Modify" and "Undo", for instance :
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>