如何在JS中禁用页面加载上的按钮单击？

Question

我在DOM 中有一个 HTML 代码，如下所示。页面加载时显示以下 HTML 代码：

<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="0"  class="converter btn btn-outline-primary"> Completed                  </button></td>

<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="1"  class="converter btn btn-outline-primary"> Completed                  </button></td>

当文本在按钮标签中完成时，我希望在按钮上禁用单击。

这是我尝试过的：

var x = document.getElementsByClassName("converter");

for (var i = 0; i < x.length; i++) {

    if (document.getElementsByClassName('converter').innerText[i] == "Completed") {     // Line A

        document.getElementsByClassName('converter').disabled = true;

    }

}

我在A 行出错：

未捕获的类型错误：无法读取未定义的属性“0”

Answer 1

相同的代码，Juste 将.innerText[i]更改为[i].innerText.trim() ，如下所示：var x = document.getElementsByClassName('converter');&nbsp;for (var i = 0; i < x.length; i++) {&nbsp; &nbsp; if (document.getElementsByClassName('converter')[i].innerHTML.trim() == "Completed") {&nbsp; &nbsp; &nbsp;// Line A&nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName('converter')[i].disabled = true;&nbsp; &nbsp; }}<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="0"&nbsp; class="converter btn btn-outline-primary"> Completed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button></td><td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="1"&nbsp; class="converter btn btn-outline-primary"> Completed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button></td>