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>












share|improve this question
























  • 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















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>












share|improve this question
























  • 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













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>












share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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


















  • 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












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>








share|improve this answer























  • 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











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
});


}
});














draft saved

draft discarded


















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>








share|improve this answer























  • 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















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>








share|improve this answer























  • 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













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>








share|improve this answer














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>






share|improve this answer














share|improve this answer



share|improve this answer








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


















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Trompette piccolo

How do I get these specific pathlines to nodes?

What visual should I use to simply compare current year value vs last year in Power BI desktop