如何在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');

 

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

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

        document.getElementsByClassName('converter')[i].disabled = true;

    }

}

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