Question

Here’s my script, I run it at a certain point by echoing it in PHP:

echo "<script>$('.incorrect-guesses div:nth-child(2)').removeClass('empty-guess').addClass('incorrect-guess').text('2');</script>";

I’ll eventually have it work for specific divs, but right now I want it to work for say the first (which is the second (:nth-child(2)) element of its parent), which it won’t do. It’s being applied to this HTML:

            <div class="incorrect-guesses">
                <h4>Incorrect Guesses</h4>
                <?php
                    for ($i = 0; $i < 6; $i++) {
                        echo "<div class='empty-guess'></div>\n";
                    }
                ?>
            </div>

Each of the classes, empty-guess and incorrect-guess have specific properties. When I change it manually in my code it looks as it should, but this isn’t changing the looks of the div when the user guesses wrong, which is what it should do.

Why exactly is this? I can provide more code if needed.

Answer 1

You need to put $(document).ready(function(){ around your code:

echo "<script type="text/javascript">$(document).ready(function(){ $('.incorrect-guesses div:nth-child(2)').removeClass('empty-guess').addClass('incorrect-guess').text('2'); });</script>";

Also be sure that jQuery is being included on your page in the head.