Jquery function .appendTo() not working - javascript

I am making a text-based game to test my knowledge of HTML, CSS, JavaScript and jQuery. I am trying to use the jQuery .appendTo() function to append a <p> element to div.defaultDisplay when the "Play Now!" button is clicked, but no matter what I do, it doesn't seem to work. I have tried using <span> instead of <p>, I've tried .append(), I've tried appending it to the input button using $("input[type='button']") and $("#playNow") with both .append() and .appendTo(), so I really don't know. It could be an error in the JS file or there could be something wrong with the HTML code. Everything else is displaying just fine, but the button isn't doing anything when clicked. Here is my code:
HTML (game.html):
<head>
<title>A Pretty Awesome Game</title>
<link href="game.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="game.js"></script>
</head>
<body>
<div class="defaultDisplay">
<h1>A Pretty Awesome Game</h1>
<input type="button" value="Play Now!" id="playNow">
</div>
</body>
</html>
CSS (game.css):
#import url(https://fonts.googleapis.com/css?family=Spectral);
body {
font-family: Spectral;
background-image: -webkit-linear-gradient(#FFF, #000);
background-size: cover;
background-repeat: no-repeat;
}
input, button {
font-family: Spectral;
}
JS (game.js):
function showPartOne() {
$("#playNow").click(function() {
$("<p>test</p>").appendTo(".defaultDisplay");
});
}
showPartOne();
Please help!
Edit: Thanks KevBot, it seems to be working when I run your code snippet but it still doesn't work on my webpage! I've updated my code in this answer as well.

Answer after question edit:
Your game.js has JS searching for HTML that does not yet exist (it reads and runs the JS before reading the HTML). You can quickly solve this by moving your script tag to just before the closing body tag:
You should end up with the following:
<!DOCTYPE html>
<html>
<head>
<title>A Pretty Awesome Game</title>
<link href="game.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="defaultDisplay">
<h1>A Pretty Awesome Game</h1>
<input type="button" value="Play Now!" id="playNow">
</div>
<script src="game.js"></script>
</body>
</html>
Original Answer:
You wrapped your code in a function that was never executed. Either put the jQuery event listener code outside of the function, or just call the function:
function showPartOne() {
$("#playNow").click(function() {
$("<p>test</p>").appendTo(".defaultDisplay");
});
}
showPartOne();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="defaultDisplay">
<h1>A Pretty Awesome Game</h1>
<input type="button" value="Play Now!" id="playNow">
</div>

Your syntax is absolutely file, It might be not triggering because showPartOne() is not getting called and hence click event is not getting bind.
Kindly call showPartOne() somewhere in the application.

Can you check this
function showPartOne() {
$("#playNow").click(function() {
$(".defaultDisplay").append("<p>test</p>");
});
}

Related

How add jQuery to SoloLearn Playground section?

I am using a JavaScript editor in www.sololearn.com/Codes/
when I put $ sign for a jQuery it says that $ is undefined.
How can I add a jQuery to my code so it will work but keep the code separated like in the editor: one slot for HTML, another slot for CSS, another for JavaScript.
HTML:
<!DOCTYPE html>
<html>
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
</head>
<body>
<div id="mainScreen">
<p id="instructions">Insert a sum to turn it into coins</p>
<button class='Button' id="btn1">Button</button>
<button class='Button' id="btn2">Button</button>
<button class='Button' id="btn3">Button</button>
<br>
<p id="resultField">The coins are: </p>
<p id="matrixField"> </p>
</div>
<div id="pickCoinsScreen">
<script src="jquery-3.1.1.min.js"></script>
</div>
</body>
CSS:
.Button:active, .active {
background-color:red;
color: white;
}
JavaScript:
$('.Button').click(function(
$(this).toggleClass('active');
e.preventDefault();
});
Firstly, your Javascript code has few errors so i have solved that and also implemented some best practices of using jQuery's "DOMReady" function.
$(function(){
$('.Button').click(function(){
$(this).toggleClass('active');
});
});
within the <head> tag I have inserted the link to google hosted library of jQuery. Now your <head> element contains this code.
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Side note: I have removed e.preventdefault() because it's not necessary in this case.
I have tested it on solo-learn, it seems its working.

onclick to redirect to next page not working in phonegap

<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
function ready()
{
if(document.getElementById("rb2").checked)
{
alert("correct");
}else if(document.getElementById("rb1").checked)
{
alert("incorrect");
}
else
{
alert("incorrect");
}
}
function nextPage()
{
window.location = "next.html";
}
</script>
</head>
<body>
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>What does JVM stands for ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Java Vendor Machine<br>
<input type="radio" id="rb2"/>Java Virtual Machine<br>
<input type="radio" id="rb3"/>Java Viral Machine<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Next Question" onclick="nextPage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting my page to next page after click event.
But it is not redirecting to next page.I went through many questions on stackoverflow as well but didnt succeed.
Please help me .
Thanks in advance.
What are you doing there? If you're doing it with jQuery mobile an example would look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<p>This is page 1. If you want to go to Page 2 click here.
</div>
<div data-role="page" id="page2">
<p>This is page 2. If you want to go back to Page 1 click here.
</div>
</body>
</html>
Changing a page by function could look like this:
function changePage() {
$.mobile.changePage( "#loginPAGE", { transition: "none", changeHash: true });
}
Here's a pen: http://codepen.io/anon/pen/gaeoQE
Frameworks - Mobile App Development
So like i said in my comment, i would recommend you to use a framework. Since i don't know, how conversant you're in JavaScript and anything else i think you should start with jQuery. For mobile App development it's not one of the best frameworks in my opinion but it's easy to learn and thats important for you to start.
So jQuery is a thing for your website. For your mobile application you need jQuery mobile.
You go to that websites and download both. When your download is finished, you're going to open up your index.html and add the scripts to your <head></head> section so that it looks like the following:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
These things are important. Also the order in which you include the scripts is important.
After adding this to your header, you're able to access a whole bunch of functions. All of the features are testable inside a demo environment which can be found over here: jQuery mobile Demos (1.4.5).
When you have finished that, you're going to copy my code from my pen into your <body></body> and it should work. For changing a page via javascript you can use the function changePage() which i've already posted before.
I hope this will help you, if not please let me know where exactly i can help you.
I found out the solution for my query . i just wrote the following function onClick of a button (input type should be button and not submit then only it will work)
function nextPage()
{
document.location="nextpage.html"; //instead of window.location
}

Hiding/showing content whether javascript is enable/disabled

I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.

How to get my jQuery before() call to work?

I have tried using JavaScript and jQuery with my HTML file, but it is not working properly. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {white-space: nowrap;}
h1 {white-space: nowrap;}
</style>
<script src="jquery.js"type="text/javascript"></script>
<title>SolicitueCotizaciones</title>
</head>
<body>
<script>
function myFunction() {
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>")};
</script>
<br/> Descripcion:
<br/>
<textarea id="improve" rows="3" cols="20"></textarea>
</p>
<div class="divider"/>
<div style="align-items:left"></div>
<p>
</p>
<p>
<input type="button" value="+Agregar Pieza" onclick="myFunction()">
</p>
</body>
</html>
I have also tried copying code from tutorial websites that work properly but when I run them in my computer, they stop working. Can anyone help me figure out what's happening and what I should do to solve it?
EDIT: What I'm trying to achieve is to add the new text above the "+agregar pieza" button and below the text input box labeled "descripcion" once you press the "+agregar pieza" button, but this never happens. I have tried the corrections that were posted in the comments, and I edited the code above to include them. However, as of this edit, it is still not working at all. I would like to use the .before command from jquery to achieve the desired result, but if there is a better way to do this, I would like to know.
First, jQuery is not native to your browser, you need to load it before using it. The tutorials should help you here.
Second, your code is not correct, it should be something closer to this:
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>");
Live demo: http://jsfiddle.net/wKhap/
It isn't working because you need to import jQuery before using it. In order to do so, you need to add this tag:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Add this before any other references to scripts that use jQuery.

What's wrong with this javascript/HTML

I think I just need a second pair of eyes on this one. The div's onclick event doesn't seem to be working. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title="My First Program"/>
<script type="text/javascript">
window.onload = function(){
window.alert("If you see me then the page has loaded");
click();
}
//we do programming here
/*because
it is
fun*/
window.alert("Helo World!");
function click(){
window.alert("CLICK!!!!");
}
</script>
</head>
<body>
<div>This web page will run my first program</div>
<!--this will be awesome-->
<br>
<br>
<br>
<div id="d1" onclick="click()">Click me</div>
</body>
Also, for the reccord, this is not my first program.
your html is malformed. the title tag needs to look like this:
<title>My First Program</title>
Also, you seem to have a naming conflict because you named your function the same thing as a built-in function. rename your 'click' function to 'myclick' or something else.
Once you fix that, everything else should be good.
When something is going weird, the first thing you should always do is validate your markup.
http://validator.w3.org/check
Here is the complete, working version of the markup.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Program</title>
<script type="text/javascript">
window.onload = function(){
window.alert("If you see me then the page has loaded");
click();
}
//we do programming here
/*because
it is
fun*/
window.alert("Helo World!");
function myclick(){
window.alert("CLICK!!!!");
}
</script>
</head>
<body>
<div>This web page will run my first program</div>
<!--this will be awesome-->
<br>
<br>
<br>
<div id="d1" onclick="myclick()">Click me</div>
</body>
Every time I see a question like this anywhere, the typical answer I give is "don't use the Netscape model for event handling".
Give this a read - http://www.quirksmode.org/js/introevents.html
Update: Looks like "click" isn't a very good name for a function, since it's already registered for events and such, which is likely why it didn't work. I should have caught that.

Categories

Resources