Блог

Главная - Вопросы по программированию - мне нужно скрыть элемент, когда отображается конкретный текст

мне нужно скрыть элемент, когда отображается конкретный текст

#javascript #html #css

Вопрос:

Я хочу скрыть кнопку выписки, когда виден текст «Варианты доставки не найдены». Я выбираю по запросу все, чтобы получить некоторые элементы, после этого я нажимаю кнопку и применяю стиль отображения нет, но он все еще отображается. Я не знаю, что я делаю не так.

 function hidenv() {
  var txt = document.querySelectorAll(".shipping td")[0].innerText;
  if (txt >= "No shipping options found for") {
    document.querySelectorAll(".proceed-to-checkout").forEach((element) => element.style.display = "none");
  }
} 
 <tr class="shipping">
        <th>Shipment</th>
        <td data-title="Shipment">
            No shipping options found for <strong>xxxx, xxx, 0000</strong>. 
        </td>
    </tr>
      
      
    <div class="proceed-to-checkout">
            
      <a href="https://nextstep.nxt/" class="checkout-button">
        Proceed payment</a>
    </div>

Комментарии:

1. нет, div находится снаружи, и код не выдает никаких ошибок

2. Причина отсутствия ошибок в вашем коде заключается в том , что он не выполняется, поэтому ошибка не возникает . Если вы выполните его, вы увидите ошибку при подаче заявки на неопределенный

Ответ №1:

Это происходит потому, что для выполнения функции не определено событие . Здесь hidenv() внизу работает как автоматическое выполнение при загрузке .

Также добавьте слово, которое вы хотите сопоставить, в отдельный контейнер, чтобы его можно было легко извлечь и правильно сопоставить .

 function hidenv() {

  var txt = document.querySelectorAll(".notFound")[0].innerText;
  if (txt == "No shipping options found for") {
    document.querySelector(".proceed-to-checkout").style.display = "none";
  }
}
hidenv(); 
 <tr class="shipping">
  <th>Shipment</th>
  <td data-title="Shipment">
    <span class="notFound">No shipping options found for</span><strong> xxxx, xxx, 0000</strong>.
  </td>
</tr>

<div class="proceed-to-checkout">

  <a href="https://nextstep.nxt/" class="checkout-button">
        Proceed payment</a>
</div>

Ответ №2:

@Rana поделился хорошим ответом, но в показанном тексте нет никакого html-тега. Поэтому я сделал это.

Сначала выделите текст внутри другого, а затем выберите «Нет».

 function hidenv() {

  var txt = document.querySelector(".shipping").querySelectorAll("td")[0].innerText;
  if (txt === "No shipping options found for") {
    document.querySelector(".proceed-to-checkout").style.display = "none";
  }
}
hidenv(); 
 <tr class="shipping">
  <th>Shipment</th>
    <td data-title="Shipment">
            No shipping options found for <strong>xxxx, xxx, 0000</strong>. 
    </td>
</tr>
      
      
<div class="proceed-to-checkout">
            
  <a href="https://nextstep.nxt/" class="checkout-button">
        Proceed payment</a>
</div>
Метки: ,