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
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();
});
Error:
There are two functions invoked during submit of the form...
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>
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() {
.
.
.
Related
I am creating a date input and I want an error alert if the date input is left blank.
currently I have and it doesnt work:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function validateDate(value) {
var a = document.getElementById("date").value;
if (a = = = "") {
window.alert("Error");
return false;
}
}
</script>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type=“date” id=“date” name=“date”><br>
<button id=teeTime onClick="validateDate()">Submit</button><br>
</div>
</form>
</body>
</html>
Do not put spaces in your operators, use === not = = =, a better use to say if a !== "" if a is NOT an empty string
Try this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type="date" id="date" name="date" /><br />
<button id="teeTime">Submit</button><br />
</div>
</form>
<script type="text/javascript">
var button = document.getElementById("teeTime");
function validateDate(value) {
if (value === "") {
window.alert("Error");
return false;
}
}
button.addEventListener("click", function (e) {
var value = document.getElementById("date").value;
validateDate(value);
});
</script>
</body>
</html>
I'm trying to create a site settings page with some checkboxes. If the checkbox is 'ON' a HTML element has a certain value, else it would be something else. But for some reason every checkbox keeps returning the value "on" in JavaScript. Please help.
My HTML:
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
My JavaScript:
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').value;
if (valueOfCheckBox == 'on') {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
your check boxes are checked by default. remove checked=checked from check box input
<input type='checkbox' id='theBOX'>
and yes you have to change the Javascript function to check whether check box has been checked or not
you can get the valueOfCheckBox to be true if the check box is checked otherwise it will be false
var valueOfCheckBox = document.getElementById('theBOX').checked;
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').checked;
if (valueOfCheckBox) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
You should remove the 'checked' attribute from your input tag
<input type='checkbox' id='theBOX' >
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').value;
if (valueOfCheckBox == 'on') {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
You have multiple issues :
1 - You forgot the parentheses on the js function call :
<button onclick='theFunction()'>Apply Changes</button>
2 - When you set your js var with the value, or we dont need it. Just put this :
var valueOfCheckBox = document.getElementById('theBOX');
3 - Then to know wether it is check or not, use the js .checked property as following :
if (valueOfCheckBox.checked == true) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
Finally, your code should look like this :
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
<script type="text/javascript">
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');
if (valueOfCheckBox.checked == true) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
</script>
You can use .checked property. This property returns true if the checkbox is checked by default, otherwise it returns false.
If you want by default checked on input box, just add checked attribute in input tag.
<input type="checkbox" id="theBOX" checked>
Hope this may help you.
<head>
<script>
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').checked;
if (valueOfCheckBox) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML = 'OFF';
}
}
</script>
</head>
<body>
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
</body>
</html>
This will work.
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');
if (valueOfCheckBox.checked) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML = 'OFF';
}
}
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked />
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
I would recommend you to use<label for="checkbox">Click this checkbox</label> instead of <p>Click this checkbox</p>.
i am newbie. i want to validate my dynamically created text fields.
unfortunately i couldnt use <form> as i am using it in django. i could have used jquery validator if i had used <form>. now how do i validate these fields.
my simple code looks like
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").click(function(){
for(var j=0;j<5;j++){
if($("#name"+j).val() == ""){
alert(j);
$("#name"+j).focus();
$(".errMsg").show();
}
if($("#age"+j).val() == ""){
$("#age"+j).focus();
$(".errMsg").show();
}
if(isNan($("#age"+j).val())){
$("#age"+j).focus();
$(".errMsg1").show();
}
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div>
<div class="errMsg">Invalid age</div>
</body>
</html>
i want to validate all the fields and if field is empty i want to highlight everything and display error msg under that texbox.
in this code i could focus only last textbox. how to do it for all.
Please help me.. thank you
isNan is typo error. It should be isNaN.
And please return false in every condition so the script execution will stop there and that particular element will focused.
Please check below snippet for more understanding.
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").on('click', function(){
for(var j=0;j<5;j++){
if($("#name"+j).val() == ""){
$("#name"+j).focus();
$(".errMsg").show();
return false;
}
if($("#age"+j).val() == ""){
$("#age"+j).focus();
$(".errMsg").show();
return false;
}
if(isNaN($("#age"+j).val())){
$("#age"+j).focus();
$(".errMsg1").show();
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div>
<div class="errMsg">Invalid age</div>
Try this,
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").on('click', function(){
for(var j=0;j<5;j++){
if($("#name"+j).val() == ""){
alert(j);
$("#name"+j).focus();
$(".errMsg").show();
}
if($("#age"+j).val() == ""){
$("#age"+j).focus();
$(".errMsg").show();
}
if(isNan($("#age"+j).val())){
$("#age"+j).focus();
$(".errMsg1").show();
}
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div>
<div class="errMsg">Invalid age</div>
</body>
</html>
Try below code this will may be help you out
$(document).on('click', '#clickbtn',function (){
//Write your code
})
I'm trying to clear a text field and it does not work. I get the alert but it does not clear it. What am I doing wrong?
This is a generic function that can be call on any text field.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function clearThis(target)
{
alert('before...' + target.value);
if ($(target).value == "Search ")
{
$(target).value = "set to something else";
$(target).style.color = '#000000';
$(target).style.fontStyle = 'italic';
}
else
{
$(target).value = "";
}
alert('after...' + target.value);
}
</script>
<title>My page</title>
</head>
<body>
<div class="historysearch">
<input id="username" type="text" value="Search " onclick="clearThis(this)"/>
</div>
</body>
</html>
Your use of $ would suggest that you are using JQuery but you arent including the library in your page.
If you are using jQuery, use the correct jQuery way to get and set values (.val()) and styles(.css()). And of course, include the jQuery library...
function clearThis(target) {
alert('before...' + target.value);
if ($(target).val() == "Search ") {
$(target).val('set to something else');
$(target).css({'color':'#000000', 'font-style': 'italic'})
} else {
$(target).val('');
}
alert('after...' + target.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="historysearch">
<input id="username" type="text" value="Search " onclick="clearThis(this)" />
</div>
If, in fact, you aren't using jQuery, you need to omit the $() syntax from your code..
function clearThis(target) {
alert('before...' + target.value);
if (target.value == "Search ") {
target.value = "set to something else";
target.style.color = '#000000';
target.style.fontStyle = 'italic';
} else {
target.value = "";
}
alert('after...' + target.value);
}
<div class="historysearch">
<input id="username" type="text" value="Search " onclick="clearThis(this)" />
</div>
Please check below code
function clearThis(target)
{
// alert('before...' + target.value);
//alert(target);
if (target.value == "Search ")
{
target.value = "set to something else";
target.style.color = '#000000';
target.style.fontStyle = 'italic';
}
else
{
target.value = "";
}
//alert('after...' + target.value);
}
HTML code
<div class="historysearch">
<input id="username" type="text" value="Search " onclick="clearThis(this)"/>
</div>
Two thing you need to update in your code first one is you should add jquery.js file and second one is if you want change value go through id or class.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
function clearThis(target)
{
if (target.value == "Search ")
{
$("#username").val("set to something else");
}
else
{
$("#username").val('');
}
alert('after...' + target.value);
}
</script>
<title>My page</title>
</head>
<body>
<div class="historysearch">
<input id="username" type="text" value="Search " onclick="clearThis(this)"/>
</div>
</body>
</html>
You are doing it wrong.
$(target) is jquery object and not js so value could not be accessible
You can do like this(js) :
target.value
or
Like this (jquery)
$(target).val()
To Clear the textbox value using JQuery, Use following Line:
$(control).val("");
I want to display and hide a table using a checkbox. The table appears and disappears with no problem . But the checkbox is not getting checked . I have Jquery v1.8.2 . i have the following code :
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#checkbox').toggle(function() {
document.getElementById('table').style.display = "inline";
}, function() {
document.getElementById('table').style.display = "none";
});
</script>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="checkbox" id="checkbox">
<br />
<table id="table" style="display: none;">
<tr>
<td>
<input type="file" name="file">
<input type="submit" name="upload" value="upload">
</td>
</tr>
</table>
</form>
</body>
</html>
Try this way -
$('#checkbox').change(function () {
if ($(this).is(":checked")) {
$('#table').show();
} else {
$('#table').hide();
}
});
Working demo --> http://jsfiddle.net/pmNAe/
Try
$('#checkbox').click(function () {
if (this.checked) {
$('#table').show();
} else {
$('#table').hide();
}
});
Demo: Fiddle
You can Try like
$('#checkbox').click(
var my_dis = document.getElementById('table').style.display;
if(my_dis == 'inline')
document.getElementById('table').style.display = "none";
else //if(my_dis == 'none')
document.getElementById('table').style.display = "inline";
);
Check the solution in this fiddle:
JSFiddle
$('#checkbox').change(function(){
var $this = $(this);
var $table = $("#table");
if($this.is(":checked"))
$table.show();
else
$table.hide();
});
Try this JSFIDDLE
Note: You can use change instead of click but but change get fired only after blur in firefox.
$(function(){
$('#checkbox').click(function (){
if(this.checked){
$("#table").show();
}else{
$("#table").hide();
}
});
});