2016-08-07 17 views
1

私のHTMLにテキストを追加しようとしていて、submit()が動作していないようです。私はまた、toLowerCaseは関数ではありませんjqueryから奇妙なメッセージを取得しています。他のすべてのスクリプトは、干渉がないことを確認するためにコメントアウトされています。送信機能が動作していないようです。

の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> 
+1

あなたはいつもあなたが受けている正確なエラーメッセージを投稿する必要があります。重要で関連性の高い情報を伝える。 「うまくいかない」とか「奇妙なメッセージ」は役に立たない。 – Jacob

答えて

1

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

を#を削除し、私はあなたがボタンがクリックされた提出したときにコンテンツを追加したいと仮定しています。

フォームが送信されると、デフォルトのブラウザアクションはページをリロードすることです。したがって、eventオブジェクトのpreventDefaultを使用して、デフォルトのブラウザ動作を上書きする必要があります。

また、値idのポンド記号を削除してください。あなたの表示方法において

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

、あなたは文字列「HTML」とない変数tempに保持されている実際のhtmlコンテンツを追加しています。表示方法を

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; 
    }); 
}; 

のようになりますcodepen:http://codepen.io/anon/pen/wWQwvm

+0

ありがとう、あなたの答えと説明をありがとう!私がこれほど多くをやろうとしていることを理解する助けになりました! – l34lo1

0

"また、私のテストhtmlページは、リフレッシュループ内にあり、私は問題を見つけるように見えることができません。" フォームを送信する場合は、ページを更新します:

$('form').submit(); 

をので:

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

は一度ロードされたページを更新しますので、継続的にそれをロードします。 送信アクションに関するあなたの目標についてはわかりません。

+0

私は私のコードを読んでいた時、私はそれを気づいた、それを変更し、再読み込みがなくなった! – l34lo1

+0

また、 'appendTo()'部分をチェックしてください;) – technico

+0

appendToをappendの代わりに使用すると、内容の前にコンテンツがあると思いました。また、テキスト入力が送信またはクリックされたときに、私は画面にdivとして表示されるようにします。 – l34lo1

0

IDから

<input type="text" id="action" name="what to do"> 
関連する問題