mardi 31 juillet 2018

Javascript .includes not working [duplicate]

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>

Aucun commentaire:

Enregistrer un commentaire