Javascript 如何在JS中禁用pageload上的按钮点击？

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

当文本在button标记中完成时，我希望单击按钮被禁用

这就是我尝试过的：

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行遇到错误：

未捕获的TypeError:无法读取未定义的属性“0”

---

我可以要这样的吗

var elements=document.querySelectorAll.converter；//使用querySelectorAll.className elements.forEachfunctionelement{//elements是一个需要迭代的数组 console.logelement.innerText；//只需记录并查看是否有效。。。 ifCompleted==element.innerText{//这是测试 element.setAttribute'disabled'，'disabled'；//设置属性 } }; 完整的 CompletedgetElementsByClassName返回一个HTMLcollection对象，因此for循环应如下所示

循环x将通过使用x[i]返回每个具有转换器类的元素 x[i].innerText和x[i].disabled将按预期从代码中运行，但不会从文档中运行。getElementsByClassName'converter'。innerText[i]无效并引发错误 使用x[i].style.backgroundColor更改背景颜色

x[i].style.backgroundColor=绿色

有关getElementsByClassName的更多详细信息，请参阅此链接-

var x=document.getElementsByClassNameconverter； 对于var i=0；i var x=document.getElementsByClassName'converter'； 对于var i=0；i已完成您想在document.getElementsByClassName'converter'的i索引处设置元素的内部文本 要做到这一点，您可以使用document.getElementsByClassName'converter'[i].innerText=随便什么

另外，既然您已经为document.getElementsByClassName'converter'声明了变量x，为什么不使用它呢

正确的代码是

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

for (var i = 0; i < x.length; i++) {
    if (x[i].innerText == "Completed") {//Line A
        x[i].disabled = true;
    }
}

---

祝你今天愉快

在对元素进行迭代之前，需要等待元素加载到DOM中，否则它们将是未定义的。 为此，请侦听DOMContentLoaded文档事件，然后进行迭代

检查： 及

document.addEventListener'DOMContentLoaded'，functionevent{ //在这里，我们看到舒尔的元素存在。 //获取所需的所有元素。 var elements=document.queryselectoral.converter； //迭代并设置所需的值。 元素。foreachel{ ifel.innerText==已完成{ el.setAttribute'disabled'、'disabled'； el.style.backgroundColor='绿色'； } }; }; 完整的

---

它成功了，谢谢你的帮助。我想知道，如果我想背景颜色：绿色的按钮周围。我应该做这样的事吗？element.style.background-color=绿色@john它是document.body.style.background='green'；也可以首先考虑谷歌，比如JavaScript设置的背景颜色，你可以得到1万results@john，更新了更改样式的代码，样式属性名称应为camel case-fontSize，backgroundColor-