how to enable/disable buttons in HTML jscript-CodePudding

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" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_11">Edit</button>
  <button type="button"  disabled="false" id="delete_11">Delete</button>
</div>

<br></br>

<input onclick="change(id)" type="button" value="Modify" id="22" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_22">Edit</button>
  <button type="button"  disabled="false" id="delete_22">Delete</button>
</div>

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!

CodePudding user response：

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"  />

<div  role="group" aria-label="Basic example" data-id=11>
    <button type="button"  disabled="false">Edit</button>
    <button type="button"  disabled="false">Delete</button>
</div>
<br /><br />

<input type="button" value="Modify" id="22"  />

<div  role="group" aria-label="Basic example" data-id=22>
    <button type="button"  disabled="false">Edit</button>
    <button type="button"  disabled="false">Delete</button>
</div>
<br /><br />

CodePudding user response：

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" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_11">Edit</button>
  <button type="button"  disabled="false" id="delete_11">Delete</button>
</div>

<br></br>

<input onclick="change(id)" type="button" value="Modify" id="22" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_22">Edit</button>
  <button type="button"  disabled="false" id="delete_22">Delete</button>
</div>

CodePudding user response：

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" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_11">Edit</button>
  <button type="button"  disabled="false" id="delete_11">Delete</button>
</div>
<br><br>

<input onclick="change(id)" type="button" value="Modify" id="22" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_22">Edit</button>
  <button type="button"  disabled="false" id="delete_22">Delete</button>
</div>

CodePudding user response：

I'm pretty sure this is going to work.

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" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_eleven">Edit</button>
  <button type="button"  disabled="false" id="delete_eleven">Delete</button>
</div>

<br></br>

<input onclick="change('twentyTwo')" type="button" value="Modify" id="twentyTwo" ></input>

<div  role="group" aria-label="Basic example">
  <button type="button"  disabled="false" id="edit_twentyTwo">Edit</button>
  <button type="button"  disabled="false" id="delete_twentyTwo">Delete</button>
</div>

you forgot to declare the variables using a keyword like "let" or "var" and used getElementsByName instead of getElementById. It is also a good practice to avoid using numbers as id and to use semicolons. Your code is very clean though