Function not skipping between questions
up vote
-1
down vote
favorite
I'm trying to build a questionnaire where I can skip between questions. When I open the html file in opera or chrome, I just see 1 and 2. When I press them, nothing happens. The code is below. Any help would be appreciated
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
javascript jquery html
|
show 1 more comment
up vote
-1
down vote
favorite
I'm trying to build a questionnaire where I can skip between questions. When I open the html file in opera or chrome, I just see 1 and 2. When I press them, nothing happens. The code is below. Any help would be appreciated
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
javascript jquery html
What errors do you get in the console? Are you executing your jQuery before the DOM is loaded?
– j08691
Nov 22 at 17:41
@Alyssa In the snippet it appears to be working as intended?
– cmprogram
Nov 22 at 17:43
Try to move<script src="js/quiz.js"></script>
to the bottom of the page.
– Foo
Nov 22 at 17:45
I am opening the html file in a browser, not using a console @j08691
– Alyssa
Nov 22 at 17:47
1
@Alyssa Your browser has its own console. Press F12 to open the dev tools and go to the console tab. You should familiarize yourself with basic debugging techniques. And please answer my second question.
– j08691
Nov 22 at 17:53
|
show 1 more comment
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I'm trying to build a questionnaire where I can skip between questions. When I open the html file in opera or chrome, I just see 1 and 2. When I press them, nothing happens. The code is below. Any help would be appreciated
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
javascript jquery html
I'm trying to build a questionnaire where I can skip between questions. When I open the html file in opera or chrome, I just see 1 and 2. When I press them, nothing happens. The code is below. Any help would be appreciated
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
javascript jquery html
javascript jquery html
edited Nov 22 at 17:38
Foo
1
1
asked Nov 22 at 17:27
Alyssa
166
166
What errors do you get in the console? Are you executing your jQuery before the DOM is loaded?
– j08691
Nov 22 at 17:41
@Alyssa In the snippet it appears to be working as intended?
– cmprogram
Nov 22 at 17:43
Try to move<script src="js/quiz.js"></script>
to the bottom of the page.
– Foo
Nov 22 at 17:45
I am opening the html file in a browser, not using a console @j08691
– Alyssa
Nov 22 at 17:47
1
@Alyssa Your browser has its own console. Press F12 to open the dev tools and go to the console tab. You should familiarize yourself with basic debugging techniques. And please answer my second question.
– j08691
Nov 22 at 17:53
|
show 1 more comment
What errors do you get in the console? Are you executing your jQuery before the DOM is loaded?
– j08691
Nov 22 at 17:41
@Alyssa In the snippet it appears to be working as intended?
– cmprogram
Nov 22 at 17:43
Try to move<script src="js/quiz.js"></script>
to the bottom of the page.
– Foo
Nov 22 at 17:45
I am opening the html file in a browser, not using a console @j08691
– Alyssa
Nov 22 at 17:47
1
@Alyssa Your browser has its own console. Press F12 to open the dev tools and go to the console tab. You should familiarize yourself with basic debugging techniques. And please answer my second question.
– j08691
Nov 22 at 17:53
What errors do you get in the console? Are you executing your jQuery before the DOM is loaded?
– j08691
Nov 22 at 17:41
What errors do you get in the console? Are you executing your jQuery before the DOM is loaded?
– j08691
Nov 22 at 17:41
@Alyssa In the snippet it appears to be working as intended?
– cmprogram
Nov 22 at 17:43
@Alyssa In the snippet it appears to be working as intended?
– cmprogram
Nov 22 at 17:43
Try to move
<script src="js/quiz.js"></script>
to the bottom of the page.– Foo
Nov 22 at 17:45
Try to move
<script src="js/quiz.js"></script>
to the bottom of the page.– Foo
Nov 22 at 17:45
I am opening the html file in a browser, not using a console @j08691
– Alyssa
Nov 22 at 17:47
I am opening the html file in a browser, not using a console @j08691
– Alyssa
Nov 22 at 17:47
1
1
@Alyssa Your browser has its own console. Press F12 to open the dev tools and go to the console tab. You should familiarize yourself with basic debugging techniques. And please answer my second question.
– j08691
Nov 22 at 17:53
@Alyssa Your browser has its own console. Press F12 to open the dev tools and go to the console tab. You should familiarize yourself with basic debugging techniques. And please answer my second question.
– j08691
Nov 22 at 17:53
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Your implementation is missing document ready. This is necessary as you're trying to bind a click handler before jQuery knows about your DOM elements.
An alternative approach would be to place the JS before hand the closing body element.
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
This means jQuery tries to select an element with class btn ($('.btn')
) which is not present during the execution time. document ready delegates the execution to the point where your DOM is rendered and accessible by jQuery.
Fixed Example
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435850%2ffunction-not-skipping-between-questions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Your implementation is missing document ready. This is necessary as you're trying to bind a click handler before jQuery knows about your DOM elements.
An alternative approach would be to place the JS before hand the closing body element.
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
This means jQuery tries to select an element with class btn ($('.btn')
) which is not present during the execution time. document ready delegates the execution to the point where your DOM is rendered and accessible by jQuery.
Fixed Example
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
add a comment |
up vote
0
down vote
accepted
Your implementation is missing document ready. This is necessary as you're trying to bind a click handler before jQuery knows about your DOM elements.
An alternative approach would be to place the JS before hand the closing body element.
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
This means jQuery tries to select an element with class btn ($('.btn')
) which is not present during the execution time. document ready delegates the execution to the point where your DOM is rendered and accessible by jQuery.
Fixed Example
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Your implementation is missing document ready. This is necessary as you're trying to bind a click handler before jQuery knows about your DOM elements.
An alternative approach would be to place the JS before hand the closing body element.
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
This means jQuery tries to select an element with class btn ($('.btn')
) which is not present during the execution time. document ready delegates the execution to the point where your DOM is rendered and accessible by jQuery.
Fixed Example
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
Your implementation is missing document ready. This is necessary as you're trying to bind a click handler before jQuery knows about your DOM elements.
An alternative approach would be to place the JS before hand the closing body element.
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
This means jQuery tries to select an element with class btn ($('.btn')
) which is not present during the execution time. document ready delegates the execution to the point where your DOM is rendered and accessible by jQuery.
Fixed Example
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>
edited Nov 22 at 17:55
answered Nov 22 at 17:43
gearsdigital
9,25362867
9,25362867
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
add a comment |
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
Thanks! It works now @gearsdigitall
– Alyssa
Nov 22 at 17:54
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
I know... I tested it before ;o) Don't forget to accept the answer...
– gearsdigital
Nov 22 at 17:56
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435850%2ffunction-not-skipping-between-questions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What errors do you get in the console? Are you executing your jQuery before the DOM is loaded?
– j08691
Nov 22 at 17:41
@Alyssa In the snippet it appears to be working as intended?
– cmprogram
Nov 22 at 17:43
Try to move
<script src="js/quiz.js"></script>
to the bottom of the page.– Foo
Nov 22 at 17:45
I am opening the html file in a browser, not using a console @j08691
– Alyssa
Nov 22 at 17:47
1
@Alyssa Your browser has its own console. Press F12 to open the dev tools and go to the console tab. You should familiarize yourself with basic debugging techniques. And please answer my second question.
– j08691
Nov 22 at 17:53