javascript - How to display different image depends on td value?

Question

I am using wordpress and would like to build a page with shipment trackin similar function.

i.e. if a package is delivered and that delivery result cell is not empty, then show colored image, otherwise show grey image.

my delivery result cell has the id "f1" and is empty

<td id="f1"><td>

After that i tried following code without success

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

Your help is appreciated

Answer 1

If I understand correctly, you're looking to see if the inner html is empty.

You should be able to tell if the content is blank using innerHTML:

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

if (x && 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;" />');
}

Note that your example uses <td id="f1"><td>. The tag is not being closed, which will cause issues if you have that in the page too.

The other thing to note is that td needs to be in a proper table structure (meaning inside a tr which needs to be inside a table) otherwise you won't be able to target it.