CODEWITHSUNDEEP
javascriptjqueryhtml
SurajRam123
SurajRam123

Reputation: 13

Text-based game code not working?

I am trying to make a text-based HTML game. My .append method from jQuery is not working. When I .append() a paragraph tag to a it displays for a split second and goes away. Please help

Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>game</title>
<style>
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/*var input;
var room;


function submitFunction() {
    alert("hello")
}
*/
</script>
<script type="text/javascript">
    var input;
    var room;
    room = "Main Enterence"



    $(document).ready(function () {
        $("#mainForm").submit(function() {
            input = document.getElementById("textInput").value;


            if (input == "east") {
                if (room == "Main Enterence") {
                    room = "Bedroom"
                    enterBedroom();
                }

            }
            if (input == "west") {

            }
            if (input == "north") {

            }
            if (input == "south") {

            }


        })
    })

function enterBedroom() {
    $( "#consoleOutput" ).append( "<p>Test</p>" );

}
</script>


<div id="consoleOutput">
    <p id="welcomeText"></p>
</div>

<form onsubmit="submitFunction()" id="mainForm">
    <input type="text" id="textInput">
    <input type="submit" name="sumbit">
</form>


</body>
</html>

Hi, I am trying to make a text-based HTML game. My .append method from jQuery is not working. When I .append() a paragraph tag to a it displays for a split second and goes away. Please help

Upvotes: 1

Views: 83

Answers (3)

Jegadesh B S
Jegadesh B S

Reputation: 709

Error:

  1. There are two functions invoked during submit of the form...
  2. When you need page not to refresh then don't use submit without preventing the default event...

Solution: 

var input;
    var room;
    room = "Main Enterence";

        $("#mainForm").click(function() {
            input = document.getElementById("textInput").value;


            if (input == "east") {
                if (room == "Main Enterence") {
                    room = "Bedroom"
                    $("#consoleOutput").append( "<p>Test</p>" );
                }

            }
            if (input == "west") {

            }
            if (input == "north") {

            }
            if (input == "south") {

            }


        });
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="consoleOutput">
    <p id="welcomeText"></p>
</div>

<form id="mainForm">
    <input type="text" id="textInput">
    <input type="button" value="submit" name="submit">
</form>

Upvotes: 1

Ayo K
Ayo K

Reputation: 1774

It clears because you are using submit which will cause the page to reload/refresh. Change that to click

your html button: 

<input type="button" name="sumbit" id="submit" value="submit">

your js:

$(document).ready(function () {
    $("#submit").click(function() {
 .
 .
 .

Upvotes: 0

Sylwek
Sylwek

Reputation: 866

This happens, because the page is refreshed - you submit form. You have to add first parametr to submit event and use preventDefault() function on it

$("#mainForm").submit(function(event) {
    event.preventDefault();
});

Upvotes: 3

Related Questions