如何使我的下一个函数在javascript的视觉小说中工作？_Javascript_Html_Css

如何使我的下一个函数在javascript的视觉小说中工作？

javascript html css

如何使我的下一个函数在javascript的视觉小说中工作？,javascript,html,css,Javascript,Html,Css,下一个功能的目的是当用户单击屏幕时，单词将更改为下一个内容。我尝试过多种方法，但都不起作用。我的问题在于我的javascript。我使用if语句和一个名为clicks的变量。取决于点击的次数取决于接下来显示的单词。我只有14岁，我自学成才，所以我真的找不到我做错了什么。（如果我的解释令人困惑，我很抱歉。）这是我的代码： <html> <head> <title>The Devil's Number</title> </head> <

下一个功能的目的是当用户单击屏幕时，单词将更改为下一个内容。我尝试过多种方法，但都不起作用。我的问题在于我的javascript。我使用if语句和一个名为clicks的变量。取决于点击的次数取决于接下来显示的单词。我只有14岁，我自学成才，所以我真的找不到我做错了什么。（如果我的解释令人困惑，我很抱歉。）这是我的代码：

<html>
<head>
<title>The Devil's Number</title>
</head>
<body>
<div id="bodyDiv">
<div id="center">
<h1 align="center">The Devil's Number</h1>
<button id="play" onclick="play()">Play</button>
</div>
</div>
<script>
var clicks;
var bd = document.getElementById('bodyDiv');
function play(){
clicks = 0;
document.body.style.background = "url('https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif')no-repeat center center";
document.body.style.backgroundSize = "100%";
document.getElementById('center').remove();
//0 clicks
if(clicks == 0){
document.getElementById('bodyDiv').innerHTML = "<h3>You wake up in the dead of night, not able to see anything.</h3>";
document.getElementById('bodyDiv').addEventListener("click",next);
}
//1 click
else if(clicks == 1){
document.getElementById('bodyDiv').innerHTML = "<h3>You can sense someone in your home.</h3>";
}
}
function next(){
clicks = clicks + 1;
}
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');
*{
font-family: 'Mansalva', cursive;
margin:0;
}
body, html{
width:100%;
height:100%;
}
#bodyDiv{
width:100%;
height:100%;
position:absolute;
text-align:center;
}
h3{
position:absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
color:#ffffff;
}
h1{
color:#ff0000;
font-size:50px;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}
body{
background:url('https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif')no-repeat center center;
background-size:100%;
}
#play{
font-size:20;
background-color:#ff0000;
border:none;
border-color:#6b0000;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border-radius:10px;
outline:none;
transition-duration:0s;
}
button:hover{
background:url('https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif')no-repeat center center;
background-size:100%;
color:white;
border:none;
}
#center{
text-align:center;
padding:10px;
position:absolute;
transform:translate(-50%,-50%);
border-radius:10px;
top:50%;
left:50%;
}
</style>
</body>
</html>


魔鬼号
魔鬼号
玩
var点击；
var bd=document.getElementById（'bodyDiv'）；
函数播放（）{
点击次数=0；
document.body.style.background=“url（'https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif“）无重复中心”；
document.body.style.backgroundSize=“100%”；
document.getElementById（'center'）.remove（）；
//0次点击
如果（单击==0）{
document.getElementById（'bodyDiv'）.innerHTML=“你在深夜醒来，什么都看不见。”；
document.getElementById（'bodyDiv'）。addEventListener（“单击”，下一步）；
}
//1点
否则如果（单击==1）{
document.getElementById（'bodyDiv'）.innerHTML=“您可以感觉到家中有人。”；
}
}
函数next（）{
点击次数=点击次数+1；
}
@导入url（'https://fonts.googleapis.com/css?family=Mansalva&display=swap');
*{
字体系列：“Mansalva”，草书；
保证金：0；
}
正文，html{
宽度：100%；
身高：100%；
}
#bodyDiv{
宽度：100%；
身高：100%；
位置：绝对位置；
文本对齐：居中；
}
h3{
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
颜色：#ffffff；
}
h1{
颜色：#ff0000；
字体大小：50px；
rgb（0，0，0，0，0）2.83487px 0.981581584px 0px 0.9815815px 0px，rgb（0，0，0，0，0，0，0）2.35766px 1.35766（0，0，0，0，0，0，0，0）2.3576六六六六六六六px 1.1.1.85511 PX1.85511像素0 0 0 0 0（1.85511像素0 0 0 0零零零零零零零零零零零，rgb（0（0，0，0，0，0（0，0，0，0，0，0，0，0，（0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0）1.0（0，0（0，0，0，0，0，0，0，0 07227px 2.16926px 0px，rgb（0,0,0）（0，0，0，0，0）及（1.9609393PX（0，0，0）至1.96093px（0，0，0）至1.96093px-1.96093px-2.27041px-2.27041px-2.4141412.27041px-2.299-2.96093px-1.96093px-1.9-2.9-2.2.27041PX0-2.2.2741PX0、0、0（0、0、0（0、0、0、0、0、0、0（0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0）至1.960939393939-1.9-1.9-1.9-1.9-1-1.960939-1-1.9-1-1-1.0.850987px-2.87677px-0px，rgb（0,0,0）1.74541px-2.43999px 0px，rgb（0，0，0）2.44769px-1.73459px 0px，rgb（0，0，0）2.88051px-0.838247px 0px；
}
身体{
背景：url（'https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif“）无重复中心；
背景大小：100%；
}
#玩{
字号:20 ;；
背景色：#ff0000；
边界：无；
边框颜色：#6b0000；
左侧填充：15px；
右侧填充：15px；
填充顶部：10px；
垫底：10px；
边界半径：10px；
大纲：无；
转换持续时间：0s；
}
按钮：悬停{
背景：url（'https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif“）无重复中心；
背景大小：100%；
颜色：白色；
边界：无；
}
#居中{
文本对齐：居中；
填充：10px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
边界半径：10px；
最高：50%；
左：50%；
}

感谢所有帮助过你的人

您应该将单击检查移动到下一个功能。我会这样做：

<html>
<head>
    <title>The Devil's Number</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');

        * {
            font-family: 'Mansalva', cursive;
            margin: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        #bodyDiv {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
        }

        h3 {
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            color: #ffffff;
        }

        h1 {
            color: #ff0000;
            font-size: 50px;
            text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
        }

        body {
            background: url('https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif')no-repeat center center;
            background-size: 100%;
        }

        #play {
            font-size: 20;
            background-color: #ff0000;
            border: none;
            border-color: #6b0000;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 10px;
            outline: none;
            transition-duration: 0s;
        }

        button:hover {
            background: url('https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif')no-repeat center center;
            background-size: 100%;
            color: white;
            border: none;
        }

        #center {
            text-align: center;
            padding: 10px;
            position: absolute;
            transform: translate(-50%,-50%);
            border-radius: 10px;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
    <div id="bodyDiv" style="height: 100%">
        <div id="center">
            <h1 align="center">The Devil's Number</h1>
            <button id="play" onclick="play()">Play</button>
        </div>
    </div>
    <script>
        var clicks;
        var bd = document.getElementById('bodyDiv');
        function play(){
            clicks = 0;
            document.body.style.background = "url('https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif')no-repeat center center";
            document.body.style.backgroundSize = "100%";
            document.getElementById('center').remove();

            document.getElementById('bodyDiv').addEventListener("click",next);
        }

        function next() {
            // check clicks
            alert("clicks: " + clicks);
            if(clicks == 0){
                document.getElementById('bodyDiv').innerHTML = "<h3>You wake up in the dead of night, not able to see anything.</h3>";
            }
            else if(clicks > 0){
                document.getElementById('bodyDiv').innerHTML = "<h3>You can sense someone in your home.</h3>";
            }
            clicks = clicks + 1;
        }
    </script>
</body>
</html>


魔鬼号
@导入url（'https://fonts.googleapis.com/css?family=Mansalva&display=swap');
* {
字体系列：“Mansalva”，草书；
保证金：0；
}
正文，html{
宽度：100%；
身高：100%；
}
#bodyDiv{
宽度：100%；
身高：100%；
位置：绝对位置；
文本对齐：居中；
}
h3{
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
颜色：#ffffff；
}
h1{
颜色：#ff0000；
字体大小：50px；
rgb（0，0，0，0，0）2.83487px 0.981581584px 0px 0.9815815px 0px，rgb（0，0，0，0，0，0，0）2.35766px 1.35766（0，0，0，0，0，0，0，0）2.3576六六六六六六六px 1.1.1.85511 PX1.85511像素0 0 0 0 0（1.85511像素0 0 0 0零零零零零零零零零零零，rgb（0（0，0，0，0，0（0，0，0，0，0，0，0，0，（0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0）1.0（0，0（0，0，0，0，0，0，0，0 07227px 2.16926px 0px，rgb（0,0,0）（0，0，0，0，0）及（1.9609393PX（0，0，0）至1.96093px（0，0，0）至1.96093px-1.96093px-2.27041px-2.27041px-2.4141412.27041px-2.299-2.96093px-1.96093px-1.9-2.9-2.2.27041PX0-2.2.2741PX0、0、0（0、0、0（0、0、0、0、0、0、0（0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0、0）至1.960939393939-1.9-1.9-1.9-1.9-1-1.960939-1-1.9-1-1-1.0.850987px-2.87677px-0px，rgb（0,0,0）1.74541px-2.43999px 0px，rgb（0，0，0）2.44769px-1.73459px 0px，rgb（0，0，0）2.88051px-0.838247px 0px；
}
身体{
背景：url（'https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif“）无重复中心；
背景大小：100%；
}
#玩{
字号:20 ;；
背景色：#ff0000；
边界：无；
边框颜色：#6b0000；
左侧填充：15px；
右侧填充：15px；
填充顶部：10px；
垫底：10px；
边界半径：10px；
大纲：无；
转换持续时间：0s；
}
按钮：悬停{
背景：url（'https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif“）无重复中心；
背景大小：100%；
颜色：白色；
边界：无；
}
#居中{
文本对齐：居中；
填充：10px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
边界半径：10px；
最高：50%；
左：50%；
}
魔鬼号
玩
var点击；
var bd=document.getElementById（'bodyDiv'）；
函数播放（）{
点击次数=0；
document.body.style.background=“url（'https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif“）无重复中心”；
document.body.style。
var clicks = 0;

var sentences = [
    'You wake up in the dead of night, not able to see anything.',
    'You can sense someone in your home.',
    // and so on
];

// global var to hold an html element that the user will click
var actionElement = document.querySelector('#actionElementId');

function play() {
   choseSentence(clicks);
   clicks++; // don't write a function just to increment a variable
}

function choseSentence(clickCount) {
   var targetDiv = document.querySelector('#myH3');
   targetDiv.innerHTML = sentences[ clickCount - 1 ]; // select by index the sentence in the previously declared array
}

// say that play function will be called each time you click the `actionElement` element
actionElement.addEventListener('click', play, false);