javascript - 如何让我的下一个函数在我的 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;
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>
感谢任何帮助的人！
解决方案
一个更简单的处理方法是将故事的每个段落存储在一个数组中，然后使用您的计数器从数组项中提取故事的一部分，其索引与您的计数器匹配。然后，您无需进行任何if/else测试。
笔记：
style标签属于文档的部分head，而不是body.- 标题标签（
h1、h2、h3等）只能用于在文档中创建部分。因此，您不能拥有第 3 节 (h3)，除非您已经拥有第 1 节和第 2 节 (h1,h2)。 - 无需使用 覆盖显示区域的内容
.innerHTML，只需设置一个元素来保存文本并仅使用 更新文本.textContent。 - 始终缩进您的代码，这将使其更具可读性并且更容易发现错误。最后，HTML、CSS 和 JavaScript 在标准开始发挥作用之前已经存在了很长时间，因此你今天看到的很多（我的意思是很多）代码都是由没有花时间学习的人创建的以现代标准和方法编写这些语言。许多人只是复制/粘贴其他人似乎可以工作的代码，而没有意识到他们使用的代码不是正确的方法。事实上，许多大学教授并不精通这些主题，并且也会教授一些不好的做法。到目前为止，您做得很好，但请查看我个人资料中的链接对于我写过的几个主题，这些主题将使您保持良好的学习路径。（PS - 自发明以来，我一直在编码和教授所有这些东西。）
保持良好的工作！
<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;
}
h2{
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%;
}
.hidden { display:none; } /* This will be removed to show the element when the time comes */
</style>
</head>
<body>
<div id="bodyDiv">
<div id="center">
<h1 align="center">The Devil's Number</h1>
<button id="play" onclick="play()">Play</button>
</div>
<!-- Don't use headings because of how they style the text. You can't have an h3 without
first having an h1 and h2. This is where each passage of the story will go. Because
each passage will go inside of this element, you won't need to write a new H3 with
.innerHTML each time. You can just update the contents of the one tag over and over
with .textContent -->
<h2 id="sentence" class="hidden"></h2>
</div>
<script>
var counter = 0;
var bd = document.getElementById('bodyDiv');
var sentence = document.getElementById("sentence");
sentence.addEventListener("click", next);
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();
sentence.classList.remove("hidden"); // Remove the CSS that hides the sentence placeholder
next();
}
// Put each sentence in the array.
var sentences = ["You wake up in the dead of night, not able to see anything.",
"You can sense someone in your home.",
"sentence 3",
"sentence 4",
"sentence 5",
"sentence 6",
"sentence 7",
"sentence 8"
];
function next(){
// Display the array item with the index that matches the counter
sentence.textContent = sentences[counter];
counter++ // Increase counter by 1
if(counter === sentences.length){
counter = 0; // counter has reached end of the array. reset it.
sentence.textContent = "The End";
}
}
</script>
</body>
</html>推荐阅读
- python-3.x - subprocess.check_output(cmd) 不执行 tar -C 选项
- python - python中重新分配的内存复杂度
- css - SVG 无法在 Firefox 上加载
- jquery - 如何在编辑器中显示数据库中注册的信息？
- javascript - 如何在javascript中的第一行之后清除输出
- amazon-web-services - AWS CLI：“删除项目”请求问题
- flutter - Drawer vs PopupMenuItem 下切换 Theme 使用
- python-3.x - 如何运行教程：fairseq 上的简单 LSTM
- sql - SQL Pivot 和 Distinct from new Columns
- python - 为什么 3d 不想要 ddtype？