user7186746 user7186746 - 8 days ago 5
Javascript Question

My JS code for the button that shows 'previous' content only works after I click the 'next' button twice

I am making a manual with html/css/js and to go through the manual I made two buttons: One for 'next' content to be displayed and the other one is the button for the 'previous' content.

My 'next' button works, but my 'previous' button does not work properly. It only works after I have used the 'next' button two times. And it will only work once than.

A test page has been made so you can see what I have been working on:

http://daryayenoorclinic.com/test.html

first click 'next' to see the content and so on and so forth you can go through the content.

my js code:

$(document).ready(function ()
{
$('article').hide();
$('#menu_a').show();
});

var visible = $('#menu_a').first();

var show_me = function (article)
{

visible.hide();
visible = article;
visible.show();
}

$("a").click(function (event)
{

var id_of_article = $(this).attr('href');
var the_article = $(id_of_article);
show_me(the_article);
even.preventDefault();
});

//next button
articleIds = ['menu_a', 'menu_b', 'menu_c', 'menu_d']
$('#next').click(function (event)
{
var next;
if (visible.attr('id') == articleIds[articleIds.length - 1])//article is the last one
next = $('#' + articleIds[0]); //come back to first one
else
next = visible.next();
show_me(next);
event.preventDefault();
});

//previous button
articleIds = ['menu_a', 'menu_b', 'menu_c', 'menu_d']
$('#previous').click(function (event)
{
var previous;
if (visible.attr('id') == articleIds[articleIds.length - 1])//article is the last one
previous = $('#' + articleIds[0]); //come back to first one
else
previous = visible.previous();
show_me(previous);
event.preventDefault();
});


my html code:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>

<link rel="stylesheet" href="css/stylesheet.css" type="text/css">

</head>

<body>

<div id="wrapper">
<header>

<div id="logo" onclick="window.location.href='http://localhost/Zorg_Heartbeat%20Manual/'">
<img src="img/logo.png" alt="logo" />
<h1 >Hartmeting voor fitte mensen</h1>
</div>

</header>

<!-- Stappenplan Menu -->
<nav id="menu">
<ul>

<li><a href="#menu_a"> Introductie </a></li>
<li><a href="#menu_b"> Het Probleem </a></li>
<li><a href="#menu_c"> Stappenplan </a></li>
<li><a href="#menu_d"> Hartmeting </a></li>
</ul>

</nav>

<!-- HET STAPPENPLAN -->
<div id="content">

<!-- Intro Slide -->
<article id="menu_a">
<h2>Introductie</h2><br>
<figure>
<img src="img/intro1.jpeg" , alt="Intro Afbeelding"/>
</figure>
<p>Joggers zijn actieve mensen die graag tussen werk en/of studie nog even de kilometers willen pakken. Hierin houden ze graag bij of ze fitter worden of niet, zo zul je vaak zien dat joggers hun rusthartslag meten om een indicatie van positieve 'progress' te kunnen inzien. Het bijhouden van de gezondheid hoort eigenlijk niet alleen bij joggers, maar bij elk fit persoon die graag de resultaten wilt vastpakken. Zonder dat je een smartwatch nodig hebt, kun je met elk apparaat die beschikking heeft tot het internet, je hartslag meten!</p>
</article>

<!-- Slide 1 -->

<article id="menu_b">
<h2>Het Probleem</h2><br>
<figure>
<img src="img/hetprobleem1.jpg" , alt="Eerste Afbeelding"/>
</figure>
<p>Maar waarom een WebApp die je hartslag meet? Simpel, smartwatches zijn nou eenmaal veels te duur, je gebruikt ze niet altijd en daarnaast zijn ze de meeste ook nog eens privacy gevoelig.</p>
</article>

<!-- Slide 2 -->

<article id="menu_c">
<h2>Hoe kan mijn hartslag meten?</h2><br>
<figure>
<img src="img/polsmeten.png" , alt="Tweede Afbeelding"/>
</figure>

<ol id="stappen">
<li>Ga gerust zitten.</li>
<li>Houd je wijsvinger en middelvinger tegen elkaar.</li>
<li>Leg beide vingers links of rechts van de adamsappel (zoek naar een kloppende beweging).</li>
<li>Klik met je linker muisknop op de box elke keer dat je een klopping voelt.</li>
<li>Doe dit achtereenvolgend tot dat je 10 keer hebt geklikt (dus 10 kloppingen).</li>
<li>De pop-up laat je gemiddelde hartslag per minuut zien.</li>
</ol>


</article>

<!-- Slide 3 -->

<article id="menu_d">

<h2>Hart Meten</h2><br>
<figure>
<!-- Hartmeet tool -->
<div>
<div id="klik_Hart" class="heart">
<h3 id="uitleg">

<!-- <p id="klik_">HIER KLIKKEN A.U.B.</p> -->

</h3>
</div>
<br>
<br>
<br>

<!-- Einde hartmeet tool-->

</figure>
<ol id="stappen">
<li>Een normaal rustend hart van een volwassenen meet tussen de 60 - 100 hartslagen per minuut.</li>
<li>Boven de 100 is slecht.</li>
<li>Richting de 40 is goed.</li>
</ol>

</article>

<!-- ABOUT -->
<!-- <div id="about">

<p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>

</div> -->


<!-- vorige/volgende buttons -->
<table id="volgorde">
<th><button class="button" id="previous">Vorige</button></th>
<th><button class="button" id="next">Volgende</button></th>
<th>

<!-- Checkbox Auto Slider -->
<div class="auto_menu">
<input type="checkbox" id="checkbox">
<label for="checkbox">Auto Handleiding</label>
</div>
<!-- -->
</th>

</table>



</div>
<div id="buffer"></div>
<footer>
<a id="footer_" href="#"> Over ons </a>
</footer>

</div>

<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts1.js" type='text/javascript'></script>


</body>

</html>


my css code:

#titel{ color: #B0C4DE; text-align: center;}

/*Verstop alle artikelen binnen content*/
article {
display:none;
}

body{

background-color: #333333;
color: grey;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 12pt;
width: 100%%
}

#wrapper{

background-color: #ADD8E6;
width: 90%;
margin-left: auto;
margin-right: auto;
/*background-image: url("../img/bg.jpg");*/
background-size: cover;
background-position: left top;
border: 2px groove #001f3f;
overflow: auto;

}

#content{
margin-left: auto;
margin-right: auto;
float: left;
width: 70%;
}

#content img{

height: 250px;
width: 450px;
}

#menu{

font-weight: thin;
color: #424242;
float: left;
width: 15%;
text-align: center;
margin-left: 5%;
margin-top: 6.7%;
font-size: 10pt;
}

ul{list-style-type: none;}

h1{ text-shadow: 1px 1px 3px #00008B;}

a{
display: block;
text-decoration: none;
color: #0074D9;
background-color: #001f3f;
border: 1px solid #B0C4DE;
padding: 5px;

}

a:hover{
background-color: #FFD900;
color: #001f3f;
}

footer{
overflow: hidden;
clear: both;
}

#footer_{
font-weight: 8pt;
}

#volgorde{
font-weight: thin;
color: grey;
width: 10%;
text-align: center;
clear: both;
margin-left: 3%;
margin-bottom: 2%;
}

.button {
background-color: #001f3f;
color: #FFDC00;
border: none;
color: white;
padding: 5px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
display: block;
}

.button:hover{
background-color: #FFD900;
color: #001f3f;
}

.heart{
color:#FBF9FF;
background-image: url("../img/hart4.png");
background-size: 150px 150px;
height: 150px;
width: 150px;
}

.heart:hoover{
color: #FFA07A;
background-color: grey;
}

#uitleg p {
color: #FA8072;
}

#logo img {
float: left;
width: 60px;
height: 60px;
margin-left: 2%;

}

#logo h1 {
position: relative;
top: 15px;
left: 10px;
}

#klik_ {
text-align: center;
}

article p {

height: 200px;
width: 450px;
font-size: 10pt;
color: grey;
font-weight: bold;
overflow: scroll;
margin-left: 4%;
margin-bottom: 5%;
text-align: justify;
text-justify: inter-word;
}

#buffer{
clear: both;
height: 10%;
}

#stappen{
font-weight: bold;
font-size: 10pt;
}

.auto_menu {
position: relative;
margin: 5px auto;
width: 160px;
font-size: 14px;
}


Any help in the right direction would be nice.

EDIT: Isolated the code responsible for the feature.

//previous button
articleIds = ['menu_a', 'menu_b', 'menu_c', 'menu_d']
$('#previous').click(function (event)
{
var previous;
if (visible.attr('id') == articleIds[articleIds.length - 1])//article is the last one
previous = $('#' + articleIds[0]); //come back to first one
else
previous = visible.previous();
show_me(previous);
event.preventDefault();
});

Answer

The ID previous is missing from your previous button 'Vorige', thus your JavaScript cannot find the element to act upon.

You need to add the attribute id="previous" to the 'Vorige' button, just like you have added id="next" to the 'Volgende' button.

UPDATE (2016-11-27)

As per your clarification about the ID being present, I created a JSFiddle example and debugged it.

A request for your future questions is to create a runnable example either in the question itself or in a third-party site like JSFiddle, CodePen etc and thus allow to easily debug the code. More details at StackOverflow's How do I ask a good question?

Now, as per your programming problem, the issue is fixed and available at JSFiddle https://jsfiddle.net/gopal1035/uuvpkxbd/1/ and the code snippet of interest is also added below:

$('#previous').click(function(event) {

  var previous;

  if (visible.attr('id') != articleIds[0]) { //article is NOT the first one

    previous = visible.prev(); // @link https://api.jquery.com/prev/
    show_me(previous);

  }

Changes:

  • If on first item, previous button is not to display the last article, which it would if we were considering the pagination links as a circular list. Pagination links are usually not circular e.g. notice Google search pagination on the first page of search results.
  • In all other cases, the previous button displays the previous article, thus we do not need a special case for identifying the last article specifically.

Pending Changes and Code Suggestions:

  • To maintain consistency in user interface and avoid surprises for the user, you should restrict the circular list behavior on next button also i.e. next button should not work when on last item.
  • Also, the previous and next buttons can be styled differently when they are not applicable, to afford the user an idea without having to need them to click the buttons and then be provided no feedback.

Suggestions for Better Programming

  • To become a better programmer, spend some time outside of the code editor to think about the scenarios, what needs to be done, etc and once clear in your mind then begin the coding.
Comments