猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

next 函数的目的是当用户点击屏幕时，文字会变成下一个东西。我已经尝试了很多东西，但它不起作用。我的问题出在我的 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;

}

body{

background:url('https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif')no-repeat center center;

background-size:100%;

}


青春有我
浏览 203回答 3
3回答

慕后森

一种更简单的处理方法是将故事的每个段落存储在一个数组中，然后使用您的计数器从数组项中提取故事的一部分，其索引与您的计数器相匹配。然后，您无需进行任何if/else测试。笔记：该style标签所属的head文件，而不是部分body。标题标签（h1、h2、h3等）只能用于在文档中创建部分。因此，您不能有第 3 节 (&nbsp;h3)，除非您已经有第 1 节和第 2 节 (&nbsp;h1,&nbsp;h2)。不要用 覆盖显示区域的内容&nbsp;.innerHTML，只需设置一个元素来保存文本并仅用 更新文本.textContent。始终缩进您的代码，这将使其更具可读性并更容易发现错误。最后，HTML、CSS 和 JavaScript 在标准开始发挥作用之前有很长的生命周期，因此您今天看到的很多（我的意思是很多）代码是由没有花时间学习如何使用的人创建的以现代标准和方法论来编写这些语言。许多人只是复制/粘贴其他人似乎有效的代码，而没有意识到他们使用的代码不是正确的方法。事实上，许多大学教授并不精通这些主题，也教授不好的做法。到目前为止，您做得很好，但请查看我个人资料中的链接对于我写过的几个主题，这将使您走上良好的学习道路。（PS - 自从它被发明以来，我一直在编码和教授所有这些东西。）保持良好的工作！<html><head>&nbsp; <title>The Devil's Number</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; @import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');&nbsp; &nbsp; &nbsp; *{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font-family: 'Mansalva', cursive;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin:0;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;body, html{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:100%;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;#bodyDiv{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;h2{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform:translate(-50%,-50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;top:50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;left:50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color:#ffffff;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;h1{&nbsp; &nbsp; &nbsp; &nbsp; color:#ff0000;&nbsp; &nbsp; &nbsp; &nbsp; font-size:50px;&nbsp; &nbsp; &nbsp; &nbsp; text-shadow: rgb(0, 0, 0) 3px 0px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 2.83487px 0.981584px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 2.35766px 1.85511px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 1.62091px 2.52441px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 0.705713px 2.91581px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -0.287171px 2.98622px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -1.24844px 2.72789px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -2.07227px 2.16926px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -2.66798px 1.37182px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -2.96998px 0.42336px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -2.94502px -0.571704px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -2.59586px -1.50383px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -1.96093px -2.27041px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -1.11013px -2.78704px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) -0.137119px -2.99686px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 0.850987px -2.87677px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 1.74541px -2.43999px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 2.44769px -1.73459px 0px,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rgb(0, 0, 0) 2.88051px -0.838247px 0px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; body{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:url('https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif' no-repeat center center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size:100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #play{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size:20;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:#ff0000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-color:#6b0000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left:15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-right:15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-bottom:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition-duration:0s;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; button:hover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:url('https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif')no-repeat center center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size:100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #center{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align:center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform:translate(-50%,-50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:50%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hidden { display:none; } /* This will be removed to show the element when the time comes */&nbsp; </style>&nbsp;</head><body>&nbsp; <div id="bodyDiv">&nbsp; &nbsp; <div id="center">&nbsp; &nbsp; &nbsp; <h1 align="center">The Devil's Number</h1>&nbsp; &nbsp; &nbsp; <button id="play" onclick="play()">Play</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- Don't use headings because of how they style the text. You can't have an h3 without&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;first having an h1 and h2. This is where each passage of the story will go. Because&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;each passage will go inside of this element, you won't need to write a new H3 with&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.innerHTML each time. You can just update the contents of the one tag over and over&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;with .textContent -->&nbsp; &nbsp; <h2 id="sentence" class="hidden"></h2>&nbsp; </div>&nbsp; <script>&nbsp; &nbsp; var counter = 0;&nbsp; &nbsp; var bd = document.getElementById('bodyDiv');&nbsp; &nbsp; var sentence = document.getElementById("sentence");&nbsp; &nbsp; sentence.addEventListener("click", next);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function play(){&nbsp; &nbsp; &nbsp; clicks = 0;&nbsp; &nbsp; &nbsp; document.body.style.background = "url('https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif')no-repeat center center";&nbsp; &nbsp; &nbsp; document.body.style.backgroundSize = "100%";&nbsp; &nbsp; &nbsp; document.getElementById('center').remove();&nbsp; &nbsp; &nbsp; sentence.classList.remove("hidden"); // Remove the CSS that hides the sentence placeholder&nbsp; &nbsp; &nbsp; next();&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Put each sentence in the array.&nbsp; &nbsp; var sentences = ["You wake up in the dead of night, not able to see anything.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"You can sense someone in your home.",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"sentence 3",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"sentence 4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"sentence 5",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"sentence 6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"sentence 7",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"sentence 8"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; ];&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function next(){&nbsp; &nbsp; &nbsp; // Display the array item with the index that matches the counter&nbsp; &nbsp; &nbsp; sentence.textContent = sentences[counter];&nbsp; &nbsp; &nbsp; counter++ // Increase counter by 1&nbsp; &nbsp; &nbsp; if(counter === sentences.length){&nbsp; &nbsp; &nbsp; &nbsp; counter = 0; // counter has reached end of the array. reset it.&nbsp; &nbsp; &nbsp; &nbsp; sentence.textContent = "The End";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; </script></body></html>
0

哆啦的时光机

您应该将点击检查移至 Next 功能。这就是我将如何做到的：<html><head>&nbsp; &nbsp; <title>The Devil's Number</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; @import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');&nbsp; &nbsp; &nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Mansalva', cursive;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; body, html {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #bodyDiv {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; h3 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%,-50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; h1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #ff0000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: url('https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif')no-repeat center center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #play {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ff0000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-color: #6b0000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-right: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition-duration: 0s;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; button:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: url('https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif')no-repeat center center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #center {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%,-50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div id="bodyDiv" style="height: 100%">&nbsp; &nbsp; &nbsp; &nbsp; <div id="center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 align="center">The Devil's Number</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="play" onclick="play()">Play</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; var clicks;&nbsp; &nbsp; &nbsp; &nbsp; var bd = document.getElementById('bodyDiv');&nbsp; &nbsp; &nbsp; &nbsp; function play(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicks = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.style.background = "url('https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif')no-repeat center center";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.style.backgroundSize = "100%";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('center').remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('bodyDiv').addEventListener("click",next);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function next() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // check clicks&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("clicks: " + clicks);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(clicks == 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('bodyDiv').innerHTML = "<h3>You wake up in the dead of night, not able to see anything.</h3>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if(clicks > 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('bodyDiv').innerHTML = "<h3>You can sense someone in your home.</h3>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicks = clicks + 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></body></html>
0

慕标琳琳

好的，嗯，一些建议：bodyDiv如果该 div 不是主体，则不应调用 div&nbsp;，根据定义，a<div>不是 a<body>您的play()函数实际上只被调用一次，并且无法验证您的(clicks == 0)or(clicks == 1)条件，因为您的next()函数从未执行过（您应该编写click++而不是click = click + 1）基本上你应该从这个模板开始：将<h3>元素直接添加到您的 html 中body：<h3 id="myH3"></h3>var clicks = 0;var sentences = [&nbsp; &nbsp; 'You wake up in the dead of night, not able to see anything.',&nbsp; &nbsp; 'You can sense someone in your home.',&nbsp; &nbsp; // and so on];// global var to hold an html element that the user will clickvar actionElement = document.querySelector('#actionElementId');function play() {&nbsp; &nbsp;choseSentence(clicks);&nbsp; &nbsp;clicks++; // don't write a function just to increment a variable}function choseSentence(clickCount) {&nbsp; &nbsp;var targetDiv = document.querySelector('#myH3');&nbsp; &nbsp;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` elementactionElement.addEventListener('click', play, false);
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript