Блог

Я использую WordPress и хотел бы создать страницу с отслеживанием отправки с аналогичной функцией.

т.е. Если пакет доставлен и эта ячейка результата доставки не пуста, тогда покажите цветное изображение, в противном случае покажите серое изображение.

моя ячейка результата доставки имеет идентификатор «f1» и пуста

 <td id="f1"><td>
 

После этого я безуспешно попытался выполнить следующий код

 <script>
var x = document.getElementById ( "f1" );
if (x == null){
document.write('<img src="/wp-content/uploads/2021/01/airplane_off.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
else{
document.write('<img src="/wp-content/uploads/2021/01/airplane_on.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
</script>
 

Ваша помощь приветствуется

Если я правильно понимаю, вы хотите посмотреть, пуст ли внутренний html.

Вы должны быть в состоянии определить, является ли содержимое пустым, используя innerHTML :

 var x = document.getElementById("f1");

if (x amp;amp; x.innerHTML.trim() == ""){
  document.write('<img src="/wp-content/uploads/2021/01/airplane_off.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
else{
  document.write('<img src="/wp-content/uploads/2021/01/airplane_on.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
 

Обратите внимание, что в вашем примере используется <td id="f1"><td> . Тег не закрывается, что может вызвать проблемы, если у вас это тоже есть на странице.

Еще одна вещь, которую следует отметить, это то, что td она должна быть в правильной структуре таблицы (то есть внутри a tr , которая должна быть внутри a table ), иначе вы не сможете настроить на нее таргетинг.

Предоставленный вами код почти правильный. Попробуйте указать innerHTML после getElementById()

 var data = document.getElementById ( "f1" );
if (x.innerHTML === ''){
  document.write('<img src="/wp-content/uploads/2021/01/airplane_off.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
else{
  document.write('<img src="/wp-content/uploads/2021/01/airplane_on.png" style="width: 512px; height: 512px; margin: 1px;" />');
}