堆栈内存溢出
  简体   繁体   English

onclick 函数在 javascript 中不起作用

[英]onclick function not working in javascript

 原文  2021-11-12 07:00:02  9   5    javascript/ html/ css

问题描述

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我正在处理一个项目，我在代码中的 3 个元素中添加了一个 onlclick 函数，但它们都不起作用，因为该元素不是按钮或锚标记，我猜但是当点击该区域时我必须做一些事情在这里是图像：-这是图像

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 .我想点击圆圈的白色部分或圆圈的彩色部分，现在我试图点击彩色部分但我什么也没得到，但是当我在一个标题中放置一个锚标签然后对它使用 onclick 然后它可以工作，但在圆圈中没有我可以添加锚标记的文本我也尝试使用将 div 更改为类项的按钮类型，它变得可点击，但 java 脚本仍然无法正常工作。 Here is the code :- 'HTML'这是代码：-'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 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%));

}

5 个解决方案

解决方案1
 1  2021-11-12 07:02:28

When calling a function in onclick, you must specify that it is a function.在 onclick 中调用函数时，必须指定它是一个函数。

Use () at the end.最后使用() 。

Example:例子：

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

解决方案2
 1  2021-11-12 07:24:35

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()">

解决方案3
 0  2021-11-12 07:03:14

添加 onclick ="rock_2()" 而不是 "rock_2"

解决方案4
 0  2021-11-12 07:15:51

Where you have inline onclick should be:你有内联 onclick 的地方应该是：

onclick="rock_2()"

with ()与()

解决方案5
 0  2021-11-12 07:49:11

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另外我猜你在行中错过了一个div

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

Replace zz with div用div替换zz

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 javascript onclick功能不起作用 - javascript onclick function is not working javascript不起作用，onclick功能 - javascript not working, onclick function Onclick Javascript函数不起作用 - Onclick Javascript Function Not Working javascript onclick函数不起作用 - javascript onclick function not working JavaScript函数无法与onclick一起使用 - JavaScript function not working with onclick javascript onclick功能不起作用？ - javascript onclick function not working? onClick javascript功能不起作用 - onClick javascript function is not working javascript：onclick 功能不适用于电子邮件 - javascript: onclick function is not working on email HTML - JavaScript onclick（）函数不起作用 - HTML - JavaScript onclick() function not working 构造函数中的Javascript函数不适用于onclick - Javascript function in constructor not working for onclick
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM