Problem in JQuery code
I have got a problem in this JQuery code. It is not working on any browser(have JS enabled).
<head>
<title>Select a paragraph</title>
<script src="D:\JSQuery\jsquery.js"></script>
<script type=”text/javascript”>
function stripe( ) {
$(‘#third’).toggleClass(‘striped’);;
}
</script>
<style>
p.striped {
background-color: red;
}
</style>
</head>
<body>
<h1>Select a paragraph</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<div id=”third”>This is paragraph 3.</div>
<p>This is paragraph 4.</p>
</div>
<form>
<input type = 'Submit' value=Stripe onclick='stripe( )' />
</form>
</body>
</html>```
goluhaque wrote: I have got a problem in this JQuery code. It is not working on any browser(have JS enabled).
<head>
<title>Select a paragraph</title>
<script src="D:\JSQuery\jsquery.js"></script>
<script type=”text/javascript”>
function stripe( ) {
$(‘#third’).toggleClass(‘striped’);;
}
</script>
<style>
p.striped {
background-color: red;
}
</style>
</head>
<body>
<h1>Select a paragraph</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<div id=”third”>This is paragraph 3.</div>
<p>This is paragraph 4.</p>
</div>
<form>
<input type = 'Submit' value=Stripe onclick='stripe( )' />
</form>
</body>
</html>```
Here's a list of things to do:
1. Instead of just <html>, use a defined DOCTYPE. That will fix a load of things across various versions of IE.
2. Instead of just <style>, use <style type="text/css">.
3. You have two semi-colons after .toggleClass('whatever').
4. The button that triggers your function is a submit element in a form. That will submit the form. Make it a type="button".
5. The div with id "third" is not a <p> (see your CSS).
6. Use error console, alerts, and Firebug + console.log to figure out where your code fails... then, you're more likely to figure out the issues and learn from them.
Thanks guys, fixed the problem. There were many errors. It was my 2nd JQuery code btw. Here's the new code.
<html>
<head>
<title>Select a paragraph</title>
<script src="D:\JSQuery\jsquery.js"></script>
<script type='text/javascript'>
function stripe( ) {
$('#third').toggleClass('striped');;
}
</script>
<style>
.striped {
background-color: white;
}
</style>
</head>
<body bgcolor="black">
<font color="white">Wanna see something? Press the Stripe button.</font>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p id='third'>LOLWOOt</p>
<p>This is paragraph 4.</p>
</div>
<form>
<input type = 'Button' value=Stripe onclick='stripe( )' />
</form>
</body>
</html>
MoshBat wrote: Putting CSS in a separate file has it's merits, too. For organization and caching, yes. For delivery, it's slower to use an external css file than it is to have it in the coded page. Same with external JS. Of course, with PHP and gzip compression/regex minifying/output buffering/includes, we can just let the page pretend the files were always there.
If you don't specify the type="text/css" in the style tag, the browser will try to interpret an external CSS file as text/html. No idea what effect it has on internal CSS, but coding correctly generally prevents most issues.
Same with the DOCTYPE… IE is heavily dependent on that so, if you're coding cross-browser, you need one. Most likely, the HTML 4.01 Transitional one, since most dabblers probably can't adhere to XHTML 1.0 Strict.
goluhaque wrote: There were many errors. It was my 2nd JQuery code btw.
Glad you got it fixed. In order to use jQuery effectively, you need to have a good grasp of HTML and CSS. It couldn't hurt to practice with those a bit more to become more fluent in them. jQuery is a powerful tool, but you have to be telling it the right things or it won't work.
Also, the <font> tag is deprecated. Use the CSS color attribute on a span or something. … and use hex colors instead of the words for the colors. Black is # 000 (or the longer # 000000) and white is #fff (or the longer #ffffff). Ignore the spaces between the # and 0's in the black color codes; just that pesky filter again.