onclick function not working in javascript

Question

I am working on a project and i added an onlclick function in 3 elements in my code but none of them works because that element is not a button or an anchor tag i guess but i have to do something when that area is clicked here is the image:- This is the image

I want to either click on the white part of the circle or the the colourfull part of the circle , right now i am trying to click on the colorfull part but i get nothing but when i put an anchor tag in one of the heading and then use onclick on it then it works but in the circle there is no text on which i can add anchor tag i also tried to use change the div to button type of class items and it became clickable but the java script still not works . Here is the code :- 'HTML'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
    <title>Rock Paper Scisccor</title>
</head>
<body>
    <div class="scoreboard">
        <div class="name">
            <ul>
                <li id="rock"><strong> ROCK </strong> </li>
                <li id="Paper"><strong> PAPER </strong> </li>
                <li id="Scissors"><strong> SCISSORS </strong> </li>
            </ul>
        </div>
        <div class="score">
            <div id="score_name"><strong>SCORE</strong></div>
            <div id="score_value"><strong>12</strong></div>
        </div>
    </div>

    <div class="main-game">
        <div class="inside_main">
            <zz class="items" id="rock_1" onclick="rock_2">
                <div class="inside_color">

                    <img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-rock.svg" alt="">
                </div>
            </div>
            <div class="items" id="paper_1" onclick="paper_2">
                <div class="inside_color">

                    <img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-paper.svg" alt="">
                </div>
            </div>
            <div class="items" id="scissors_1" onclick="scissors_2">
                <div class="inside_color">

                    <img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-scissors.svg" alt="">
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function rock_2(){
            console.log('k')
            document.getElementById('rock').innerHTML='k'

        }
        function paper_2(){
            console.log('k')
        }

        function scissors_2(){
            console.log('k')
        }
    </script>
</body>
</html>

CSS

body{
    margin: 2px 2px;
    /* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
    font-family: 'Barlow Semi Condensed', sans-serif;
    background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100vh;
}


.scoreboard{
    width: 40%;
    height: 10rem;
    display: flex;
    gap: 30%;
    border: 2px solid grey;
    margin: auto;
    border-radius: 10px;
    border-width: 3px;
    margin-top: 3%;
}
.name{
    color: white;
    font-size: 2.7rem;
    /* border: 2px solid white; */
    margin: 15px;
    width: 50%;
    line-height: 2.4rem;
    align-self: center;
}
.name ul{
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px ;
    /* border: 2px solid yellow; */
}
.score{
    display: flex;
    /* align-self: center; */
    flex-direction: column;
    border: 2px solid white;
    background-color: white;
    border-radius: 5px;
    /* padding: 7%;    */
    width: 40%;
    /* height: 40vh; */
    margin: 3%;
}
#score_name{
    display: flex;
    align-self: center;
    padding: 5px;
    color: hsl(229, 64%, 46%);
    letter-spacing: .2rem;
}
#score_value{
    color: hsl(229, 25%, 31%);
    font-size: 4rem;
    display: flex;
    align-self: center;
}
.main-game{
    margin-top: 4%;
}
/* .inside_main ::after{
    content: '';
    background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
} */
.inside_main{
    display: flex;
    /* border: 2px solid whitesmoke; */
    width: fit-content;
    margin: auto;
    height: 60vh;
}
.items{
    height: 225px;
    width: 225px;
    border-radius: 50%;
    display: grid;
    /* background-color: white; */
}
.items:hover::before{
    content: '';
    display: flex;
    position: absolute;
    justify-self: center;
    align-self: center;
    height: 285px;
    width: 285px;
    opacity: 10%;
    z-index: -1;
    background-color: whitesmoke;
    border-radius: 50%;
}
.inside_color img{
    display: grid;
    align-self: center;
    justify-self: center;
}
.inside_color{
    display: grid;
    justify-self: center;
    align-self: center;
    height: 182px;
    width: 182px;
    background-color: whitesmoke;
    border-radius: 50%;
}
#rock_1{
    background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
    background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
    position: relative;
    top: 50%;
    /* left: 25%; */
}
#scissors_1{
    background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));

}

You forgot the brackets after the function name. onclick="rock_2()" — Maik Lowrey
– Maik Lowrey, Commented Nov 12, 2021 at 7:13

Gucal · Accepted Answer · 2021-11-12 07:02:28Z

2

When calling a function in onclick, you must specify that it is a function.

Use () at the end.

Example:

<div class="items" id="paper_1" onclick="paper_2()">

answered Nov 12, 2021 at 7:02

Gucal

9411 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

acn · Accepted Answer · 2021-11-12 07:24:35Z

2

you should add the brackets

<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">

answered Nov 12, 2021 at 7:24

acn

415 bronze badges

Comments

Todor Markov · Accepted Answer · 2021-11-12 07:15:51Z

1

Where you have inline onclick should be:

onclick="rock_2()"

with ()

answered Nov 12, 2021 at 7:15

Todor Markov

5175 silver badges12 bronze badges

Comments

afshana zaman · Accepted Answer · 2021-11-12 07:03:14Z

1

add onclick ="rock_2()" instead of "rock_2"

answered Nov 12, 2021 at 7:03

afshana zaman

1191 silver badge11 bronze badges

Comments

MagnusEffect · Accepted Answer · 2021-11-12 07:49:11Z

1

You need to specify that a function is called by appending () at the end.

<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">

Also I guess you have missed a div in the line

 <zz class="items" id="rock_1" onclick="rock_2">

Replace zz with div

answered Nov 12, 2021 at 7:49

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

Collectives™ on Stack Overflow

onclick function not working in javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related