stackoom
  简体   繁体   中英

How do I make my next function work in my visual novel in javascript?

 原文  2019-10-13 22:59:07  0   3    javascript/ html/ css

Question

The purpose of the next function is when the user clicks the screen, the words will change to the next thing. I've tried multiple things but it doesn't work. My problem is in my javascript. I'm using if statements and a variable called clicks. Depending on how many clicks there are depends on the words that show up next. I'm only 14 and I'm self taught, so I really can't find what I'm doing wrong. (I'm sorry if my explaining is confusing.) Here's my code: 

<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>

Thanks to anyone who helps!

3 answers

solution1
 1  2019-10-13 23:40:05

A much simpler way to handle this is to store each passage of the story in an array and then use your counter to extract the part of the story from the array item with an index that matches your counter. Then, you won't need to do any if/else testing.

NOTES:

  • The style tag belongs in the head section of the document, not the body .
  • Heading tags ( h1 , h2 , h3 , etc.) should only be used to create sections in the document. As such, you can't have section 3 ( h3 ), unless you've already has sections one and two ( h1 , h2 ).
  • Instead of overwriting the contents of your display area with .innerHTML , just set up an element that will hold the text and update the text only with .textContent .
  • Always indent your code, which will make it more readable and easier to spot errors. Finally, HTML, CSS, and JavaScript had a long life before standards came into play and as such a lot (and I do mean a lot) of the code you see today is created by people who aren't taking the time to learn how to write these languages with modern standards and methodologies in mind. Many people just copy/paste someone else's code that seems to work, not realizing that the code they are using is not the correct approach. In fact, many college professors aren't well versed in these topics and teach bad practices as well. So far, you are doing well, but take a look at the links in my profile for several topics that I've written about that will keep you on a good learning path. (PS - I have been coding and teaching all this stuff since it was invented.)

Keep up the good work! 

 <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>

solution2
 0  2019-10-13 23:24:27

You should move the click checking to the Next function. This is how I would do it:

<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>

solution3
 0  2019-10-13 23:28:46

Ok, hum, few advices:

  • you shouldn't call a div bodyDiv if that div is not the body, by definition a <div> is not a <body>

  • your play() function is actually called just one time and there is no way your (clicks == 0) or (clicks == 1) conditions can be verified because your next() function is never executed (you should write click++ instead of click = click + 1 )

  • basically you should start with this template:

add <h3> element directly to your html in body : <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);

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I make my JavaScript work within repeater? How do I make this JavaScript work on my local machine? how do i make this function work with my button How do I make my rotate function work? How do I make useState hook work with my function? How do I fix my Javascript function that does not work? How do I make my function anonymous in JavaScript? How do I make my JQuery work? How do I make my popup date picker calendar javascript change the text date next to it and update the database? How do i make my reset function work on my input element?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM