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行处出现错误：

未捕获的TypeError：无法读取未定义的属性'0'

Answer 1

可以这样吗？

var elements = document.querySelectorAll(".converter"); // use querySelectorAll(".className") 
elements.forEach(function(element) { // elements is an array you need to iterate over it
    console.log(element.innerText);  // just to log and see something if it works ...
    if("Completed" === element.innerText) { // this is the test
        element.setAttribute('disabled', 'disabled'); // set the attribute
    }
});

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

Read more about document.querySelectorAll() and how to use it here

Answer 2

getElementsByClassName（）返回一个HTMLcollection对象，因此for循环应如下所示

循环x将使用 x [i]
x[i].innerText和x[i].disabled将在您的代码中按预期工作，但不会生效，并无效的document.getElementsByClassName（'converter'）。innerText [i]
使用 x [i] .style.backgroundColor
更改backgroundColor
x [i] .style.backgroundColor =“绿色”;

有关getElementsByClassName- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

的更多详细信息，请参考此链接。

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

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

<table><tr>
  <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>
  </tr></table>

Answer 3

相同的代码，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>

Answer 4

您要在document.getElementsByClassName('converter')的i索引处设置elem的innerText 为此，您可以使用document.getElementsByClassName('converter')[i].innerText = "whatever"

还因为您已经为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;
    }
}

祝您愉快：）

Answer 5

您需要等到元素加载到DOM中之后才能对其进行迭代，否则它们将为undefined。为此，请监听“ DOMContentLoaded”文档事件，然后进行迭代。

检查： DOMContentLoaded和querySelectorAll

document.addEventListener('DOMContentLoaded', function(event) {
  // Here we have shure that the elements exists.
  
  // Get all the elements you need.
  var elements = document.querySelectorAll(".converter");
  
  // Iterate and set the value you need.
  elements.forEach(function(el) {
    if(el.innerText === "Completed") {
      el.setAttribute('disabled', 'disabled');
      el.style.backgroundColor = 'green';
    }
  });
});

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

如何禁用JS中的页面加载按钮？

5 个答案: