This question already has an answer here:
Trying to get a little function going where when a client leaves a * or symbol in a certain table cell, the background color of that table cell will change.
This is all in a if is_page()) and I'm also using ACF.
I receive this error in Chrome Console:
Uncaught TypeError: cells.includes is not a function
Any assistance would be great!
My Code:
<div class="sires-table-wrap">
<div class="grid-container">
<div class="sires-table-title small-12 medium-12 large-12 cell">
<h2>EAST LODDON SEMEN SIRES</h2>
</div>
<div class="sire-table small-12 medium-12 large-12 cell">
<div class="grid-x grid-margin-x">
<?php if ( have_rows( 'sire_tables' ) ) : ?>
<?php while ( have_rows( 'sire_tables' ) ) : the_row(); ?>
<div class="sire-table-image small-12 medium-6 large-4 cell">
<?php $sire_image = get_sub_field( 'sire_image' ); ?>
<?php if ( $sire_image ) { ?>
<img src="<?php echo $sire_image['url']; ?>" alt="<?php echo $sire_image['alt']; ?>" />
<?php } ?>
</div>
<div class="sire-table-info small-12 medium-6 large-8 cell">
<?php the_sub_field( 'sire_info' ); ?>
</div>
<div class="sire-table-table small-12 medium-12 large-12 cell">
<?php $table = get_sub_field( 'sire_table' );
if ( $table ) {
echo '<table id="sire-table">';
if ( $table['header'] ) {
echo '<thead><tr>';
echo '';
foreach ( $table['header'] as $th ) {
echo '<th>';
echo $th['c'];
echo '</th>';
}
echo '</tr>';
echo '</thead>';
}
echo '<tbody>';
foreach ( $table['body'] as $tr ) {
echo '<tr>';
foreach ( $tr as $td ) {
echo '<td>'.$td['c'].'</td>';
}
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
} ?>
</div>
<script type="text/javascript">
var table = document.getElementById("sire-table");
var cells = table.getElementsByTagName("td");
if(cells.includes("*")) {
cells.style.backgroundColor= "#63b2df";
}
</script>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
</div>
