Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

like button

a have made a like button bet he one function wont work what did I do wrong?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="screen.css">
        <title>like</title>
    </head>
    <body>
        <div id="box">
            <button id="button">like</button>
            <p id="show">0</p>
        </div>

        <script
                src="https://code.jquery.com/jquery-3.2.1.min.js"
                integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
                crossorigin="anonymous"></script>
        <script>
                var like = 0;
                document.querySelector("#show").innerHTML=like;
                console.log('test begin');

                $( "#button" ).one( "click", function() {
                    console.log('test');
                    like = like+1
                });
        </script>
    </body>
</html>

#button {
    background: #4caf50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    float: left;
}

p {
    font-size: 40px;
    font-family: Bitter, Serif, sans-serif;
    color: #4caf50;
    text-align: center;
    display: inline-block;
    margin: 2px 10px;
}

1 Answer

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

Hi Conor,

Move this line inside your event handler so p#show updates every time like is incremented by one: document.querySelector("#show").innerHTML=like;

Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

the one is not a typo tis a fuction to prevent clicking more than ones so i need to get it working like that bet it wont work with this function

link to one fuction: http://api.jquery.com/one/

Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

it is fixt thx to your p#show replacement to the event handler thx joel

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

Ah I see, I've never come across .one() before so thanks for the heads up on that!