Question

我正在尝试将一些文字附加到我的html中并使用submit()似乎无法正常工作。我也从jquery收到一条奇怪的消息toLowerCase不是函数。所有其他脚本都被注释掉以确保没有干扰。

Jquery的：

var template = function(action){
    return '<div class="event"><p>'+ action +'</p></div>'
};
var display = function(input){
    var temp = input;
    if(temp !== "") {
        $('html').appendTo('.gameboard');
    } else {
         prompt("You need to imput an appropriate answer");
    }
    $('#action').val("");
};

var main = function(){
    $('form').submit(function(){
        var action = $('#action').val();
        var input = action.toLowerCase();
        var html = template(action);
        display(action);
        interact(input);
        return false;
    });

};

$(document).ready(main);

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Lord of the Deahsticks</title>
    <link href="css/text-game.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="info">
    <h1 class="title">Lord of the Deathsticks</h1>
</div>

<div class="gameboard">
    <div class="event">
        <p>Hello this is the game!</p>
    </div>
    <div class="event">
        <p>You are awoken by a sound...You need to get up already, you're going to be late for you shift at the slave factory!</p>
    </div>

</div>
<form>
    <input type="text" id="#action" name="what to do">
    <input type="submit" name="button">
</form>
<script src="js/controllers/controller.js"></script>
<script src="js/model/characters.js"></script>
<script src="js/JQuery/jquery-3.1.0.js"></script>
<script src="js/JQuery/text-game-JQuery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

Answer 1

我假设你想在点击提交按钮时附加内容。

提交表单时，默认的浏览器操作是重新加载页面。因此，您必须使用preventDefault对象上的event覆盖默认浏览器行为。

同时删除id属性值中的井号符号。

<input type="text" id="#action" name="what to do">

在您的显示方法中，您附加字符串'html'，而不是变量html中保存的实际temp内容。将显示方法修改为

var display = function(input){
if(input !== "") {
 var html = template(input);
$(html).appendTo('.gameboard');
} else {
     alert("You need to input an appropriate answer");
}
$('#action').val("");

};

请注意，只有在用户输入内容时，我们才会在显示方法中调用template方法。然后我们将变量html中的html内容附加到类gameboard。

您的主要方法应该是

var main = function(){
  $('form').submit(function(event){
    event.preventDefault();
    var action = $('#action').val();
    var input = action.toLowerCase();
    display(action);
    interact(input);
    return false;
  });
};

工作代码：http://codepen.io/anon/pen/wWQwvm

Answer 2

＆＃34;另外，我的测试html页面处于刷新循环中，我似乎无法找到问题。＆＃34; 如果您提交表单，它将刷新页面：

 $('form').submit();

所以：

$(document).ready(main);
var main = function(){
    $('form').submit();
    ...
};

一旦加载就会刷新页面，因此会连续加载它。我不确定你提交行动的目标。

Answer 3

从ID中删除＃

 <input type="text" id="#action" name="what to do">

到

<input type="text" id="action" name="what to do">

提交功能似乎不起作用

3 个答案: