如何讓我的下一個 function 在 javascript 的視覺小說中工作？
[英]How do I make my next function work in my visual novel in javascript?
問題描述
下一個 function 的目的是當用戶點擊屏幕時，文字會變成下一個。 我已經嘗試了多種方法，但它不起作用。 我的問題出在我的 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>
感謝任何幫助的人！
3 個解決方案
解決方案1
1 2019-10-13 23:40:05
一個更簡單的處理方法是將故事的每個段落存儲在一個數組中，然后使用您的計數器從數組項中提取故事的一部分，其索引與您的計數器匹配。 然后，您不需要進行任何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>
解決方案2
0 2019-10-13 23:24:27
您應該將點擊檢查移至 Next function。 我會這樣做：
<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>
解決方案3
0 2019-10-13 23:28:46
好的，嗯，一些建議：
如果 div 不是主體，則不應調用 div
bodyDiv，根據定義，<div>不是<body>您的
play()function 實際上只被調用一次，並且無法驗證您的(clicks == 0)或(clicks == 1)條件，因為您的next()function 永遠不會執行（您應該編寫click++而不是click = click + 1)基本上你應該從這個模板開始：
將<h3>元素直接添加到body中的 html ： <h3 id="myH3"></h3>
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);
如何使彈出日期選擇器日歷javascript更改其旁邊的文本日期並更新數據庫？
[英]How do I make my popup date picker calendar javascript change the text date next to it and update the database?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.