如何啟用/禁用HTMLjscript中的按鈕-有解無憂

我正在嘗試使用 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按鈕以便按下它們。

誰能告訴我我做錯了什么？謝謝！

uj5u.com熱心網友回復：

您可以分配一個外部事件偵聽器來使用一組可能的狀態來處理按鈕點擊，從而創建一個簡單的切換機制。

僅供參考：input元素是self-closing這樣的，你不需要</input>像大多數 HTML 標簽一樣提供 a 。

要在您使用的 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 />

uj5u.com熱心網友回復：

你應該使用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>

uj5u.com熱心網友回復：

為避免重復，您可以在一個功能中切換所有按鈕。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>

uj5u.com熱心網友回復：

我很確定這會奏效。

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 并使用分號也是一個很好的做法。你的代碼雖然很干凈

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395951.html

標籤：javascript html 姜戈

上一篇：get_extra_restriction()缺少1個必需的位置引數：'related_alias'錯誤django

下一篇：使用過濾器裁剪mongo檔案