how to enable/disable buttons in HTML jscript

Issue

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!

Solution

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>

Answered By - Vineesh