Как отключить нажатие кнопки на загрузку страницы в JS?

Question

У меня есть HTML-код в DOM , как показано ниже. При загрузке страницы отображается следующий 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 :

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

Подробнее о document.querySelectorAll () и о том, как его использовать, можно узнать здесь

Answer 2

Вам нужно подождать, пока элементы будут загружены в 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>

Answer 3

Вы хотите установить innerText элемента с индексом i равным document.getElementsByClassName('converter') и сделать это, вы можете использовать document.getElementsByClassName('converter')[i].innerText = "whatever"

Также, поскольку вы уже объявили переменную x для document.getElementsByClassName('converter'), почему бы не использоватьэто?

(правильный код будет)

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 4

тот же код, просто измените 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 5

getElementsByClassName () возвращает объект HTMLcollection, поэтому цикл for должен быть таким, как показано ниже

1. Зацикливание x вернет каждый элемент с классом преобразователя, используя x [i]
2. x[i].innerText и x[i].disabled будут работать так, как ожидается от вашего кода, но не document.getElementsByClassName ('converter'). InnerText [i], который недопустим и выдает ошибку

3. Изменить backgroundColor с помощью x [i] .style.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>