Question

我正在尝试制作基于文本的HTML游戏。来自jQuery的我的.append方法不起作用。当我.append（）一个段落标签到它显示一瞬间然后消失。请帮忙

这是我的代码：

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

您好，我正在尝试制作基于文本的HTML游戏。来自jQuery的我的.append方法不起作用。当我.append（）一个段落标签到它显示一瞬间然后消失。请帮忙

Answer 1

发生这种情况，因为页面已刷新 - 您提交表单。您必须添加第一个参数来提交事件并在其上使用preventDefault()函数

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

Answer 2

错误：

在提交表单期间调用了两个函数...

当您需要不刷新页面时，请不要使用提交而不阻止默认事件 ......

解决方案：

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>

Answer 3

它会清除，因为您正在使用提交，这将导致页面重新加载/刷新。将其更改为单击

你的html按钮：

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

你的js：

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

基于文本的游戏代码不起作用？

3 个答案: