I am trying to append to some text to my html and using the submit() doesn't seem to be working. I am also getting a strange message from jquery that toLowerCase is not a function. All the other scripts are commented out to make sure there is no interference.
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>
-
1You should always post the exact error message you're receiving; that conveys important, relevant information. "doesn't seem to be working" and "strange message" are not as helpful.Jacob– Jacob2016年08月07日 02:52:57 +00:00Commented Aug 7, 2016 at 2:52
3 Answers 3
I am assuming that you want to append content when submit button is clicked.
When a form is submitted, the default browser action is to reload the page. So, you have to override the default browser behaviour using preventDefault on the event object.
Also remove the pound symbol in the value of id attribute.
<input type="text" id="#action" name="what to do">
In your display method, you're appending the string 'html' and not the actual html content which is held in the variable temp. Modify your display method to
var display = function(input){
if(input !== "") {
var html = template(input);
$(html).appendTo('.gameboard');
} else {
alert("You need to input an appropriate answer");
}
$('#action').val("");
};
Note that we are calling the template method inside the display method only if the user entered something. And then we append the html content in the variable html to the class gameboard.
Your main method should look like
var main = function(){
$('form').submit(function(event){
event.preventDefault();
var action = $('#action').val();
var input = action.toLowerCase();
display(action);
interact(input);
return false;
});
};
Working codepen: http://codepen.io/anon/pen/wWQwvm
1 Comment
"Also, my test html pages is in a refresh loop and I cannot seem the find the problem." If you submit a form, it will refresh the page :
$('form').submit();
So :
$(document).ready(main);
var main = function(){
$('form').submit();
...
};
Will refresh the page once loaded, so will load it continuously. I'm not sure about your goal concerning the submit action.
3 Comments
appendTo() part ;)Remove # from the id
<input type="text" id="#action" name="what to do">
to
<input type="text" id="action" name="what to do">