Как включить/выключить кнопки в HTML jscript

Я пытаюсь включить кнопки на веб-странице с помощью js-функции для проекта django. Я новичок в этом, так что, пожалуйста, будьте спокойны :-)

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 были включены, чтобы можно было нажать их.

Кто-нибудь может сказать мне, что я делаю неправильно? Спасибо!

Вам следует использовать 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>

Вы можете назначить внешний слушатель событий для обработки нажатий на кнопки, используя массив возможных состояний, чтобы создать простой механизм переключения.

FYI: input элементы являются self-closing, поэтому вы не поставляете </input> как в большинстве HTML тегов.

Для конкатенации в 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 />

Чтобы не повторяться, вы можете переключать все кнопки в одной функции. Также можно использовать оператор 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>

Я почти уверен, что это сработает.

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 и использование точек с запятой. Однако ваш код очень чистый

Вернуться на верх