The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Where is the mistake in my JS ?, A basic if else question.
lolcat
post Apr 9 2015, 07:37 AM
Post #1





Group: Members
Posts: 3
Joined: 1-April 15
Member No.: 22,441
Hello Group, and thanks (hopefully) for your continued help smile.gif

I`m tackling Java Script for the first time, and what i am trying to do is the following:
I have a 3 column layout, with a button that triggers a prompt in each. Depending on the input, a different content should be displayed in the column.
This works fine in column 1, but funnily enough not in 2 or 2 (in column 1 i can display all 3 possible contents, in columns 2 and 3 not).
That would be the first kink i´d like to iron out. The last bit of functionality i try to come up with is to remove the previously displayed content from the column when a new one is displayed, so there´s always only 1 on display.

I hope you can help me out here, i am at my (admittedly still somewhat limited) wits end with JS. And yes, the actual content is nonsensical, please ignore that biggrin.gif

The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/25styles.css" rel="stylesheet" type="text/css" media="all">
<meta charset="UTF-8">
<title>Branching Practice FTW!</title>
<script src="js/jquery.js"></script>
<script src="js/25scripts.js"></script>
</head>

<body>
<h1 style="text-align:center">Where do you go from here? Hint: 21, 180, 80</h1>
<div class="bracket" id="bracket1">
<h2>The Magical Forest</h2>
<button class="btn btn-success" id="prompt1">How old are you?</button>

<div class="content" id="content1">
<h3>Behold, something for the younger!</h3>
<img src="pictures/bear1.jpg" alt="bear1">
<p>Young Young Young Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="content" id="content2">
<h3>Behold, somethingfor the elderly!</h3>
<img src="pictures/bear2.jpg" alt="bear1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="content" id="content3">
<h2>I really don´t know what to do with you</h2>
</div>
</div>

<div class="bracket" id="bracket2">
<h2>The Magical Ocean</h2>
<button class="btn btn-success" id="prompt2">How many cm are you tall?</button>,

<div class="content" id="content3">
<h3>Behold, something for the short!</h3>
<img src="pictures/bear3.jpg" alt="bear1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="content" id="content4">
<h3>Behold, something for the tall!</h3>
<img src="pictures/bear4.jpg" alt="bear1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="content" id="content5">
<h2>I really don´t know what to do with you</h2>
</div>
</div>

<div class="bracket" id="bracket3">
<h2>The Magical Mountain</h2>
<button class="btn btn-success" id="prompt3">How many kg are you heavy?</button>

<div class="content" id="content6">
<h3>Behold, something for the thin!</h3>
<img src="pictures/bear5.jpg" alt="bear1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="content" id="content7">
<h3>Behold, something for the fat!</h3>
<img src="pictures/bear6.jpg" alt="bear1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="content" id="content8">
<h2>I really don´t know what to do with you</h2>
</div>
</div>
</body>
</html>


The CSS:
.bracket{
width:33%;
text-align:center;
float:left;
background-color:#DCD6D6;
}

.content{
display:none;
}

The java script:
$(document).ready(function() {

$("#prompt1").click(function() {
var age = parseInt(prompt("How old are you?"));
if (age < 21) {
/*$("").removeClass();*/
$('#bracket1 #content1').show();
} else if (age === 21) {
$('#bracket1 #content3').show();
} else {
$('#bracket1 #content2').show();
}
});

$("#prompt2").click(function() {
var height = parseInt(prompt("How tall are you?"));
if (height < 180) {
$('#bracket2 #content4').show();
} else if (height === 180) {
$('#bracket2 #content6').show();
} else {
$('#bracket2 #content5').show();
}
});

$("#prompt3").click(function() {
var weight = parseInt(prompt("How heavy are you?"));
if (weight < 80) {
$('#bracket3 #content7').show();
} else if (weight === 80) {
$('#bracket3 #content9').show();
} else {
$('#bracket3 #content8').show();
}
});
});
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 9 2015, 08:34 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(lolcat @ Apr 9 2015, 02:37 PM) *

I`m tackling Java Script for the first time

Strictly speaking this is jQuery (a javascript library), which I'm not very good at.

QUOTE
I have a 3 column layout, with a button that triggers a prompt in each. Depending on the input, a different content should be displayed in the column.
This works fine in column 1, but funnily enough not in 2 or 2 (in column 1 i can display all 3 possible contents, in columns 2 and 3 not).
That would be the first kink i´d like to iron out.

You use

CODE
id="content3"

twice (each ID value must be unique).

QUOTE
The last bit of functionality i try to come up with is to remove the previously displayed content from the column when a new one is displayed, so there´s always only 1 on display.

Here's a simple but verbose technique:

CODE

if (height < 180) {
$('#bracket2 #content4').show();
$('#bracket2 #content5').hide();
$('#bracket2 #content6').hide();
}
else if (height === 180) {
$('#bracket2 #content6').show();
$('#bracket2 #content4').hide();
$('#bracket2 #content5').hide();
}
...etc

(I think the ID numbering is wrong though).

You can make the script much shorter by looping through the ".content" elements in the current bracket and hide all of them first. Alas I don't know how loops are done in jQuery, maybe the each() function can be used:

CODE
$("#prompt2").click(function() {
var height = parseInt(prompt("How tall are you?"));

$("#bracket2 .content").each.hide();  

if (height < 180) {
$('#bracket2 #content4').show();
} else if (height === 180) {
$('#bracket2 #content6').show();
} else {
$('#bracket2 #content5').show();
}
});


As a sidenote you use CSS to initially hide the content sections:

CODE
.content{
display:none;
}

In general that's bad design practice, since it makes the content inaccessible if CSS is enabled but javascript is disabled. It's better to make content accessible with just HTML, then add CSS and javascript as progressive enhancements: http://en.wikipedia.org/wiki/Progressive_enhancement --for example, you could hide the .content sections on page load with something like this:

CODE
$(document).ready(function() {
$(".content").each.hide();  
...

If the page needs javascript to work (which seems to be the case here), at least provide a message in a NOSCRIPT element to notify users that disable javascript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 9 2015, 11:12 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Christian J @ Apr 9 2015, 03:34 PM) *

--for example, you could hide the .content sections on page load with something like this:

CODE
$(document).ready(function() {
$(".content").each.hide();  
...


That should probably be something like

CODE
$(document).ready(
    function()
    {
        $(".content").each(
            function()
            {
                $(this).hide();
            }
        );
    }
    // ...
);

And jQuery is supposed to simplify things. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2015, 11:32 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Yeah. It's just you that don't get it! ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 9 2015, 01:36 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Christian J @ Apr 9 2015, 06:12 PM) *

That should probably be something like

It could be made simpler:

CODE
$("#bracket1 .content").hide();

Forgot that jQuery uses the same selector logic as CSS, which I suppose is one of the main points of jQuery.

QUOTE(pandy @ Apr 9 2015, 06:32 PM) *

Yeah. It's just you that don't get it! ninja.gif

Alas yes, but thanks anyway for the support against jQuery. smile.gif


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 9 2015, 02:38 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
QUOTE(Christian J @ Apr 9 2015, 08:36 PM) *

QUOTE(pandy @ Apr 9 2015, 06:32 PM) *

Yeah. It's just you that don't get it! ninja.gif

Alas yes, but thanks anyway for the support against jQuery. smile.gif

Don't worry, I'm in for that one too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lolcat
post Apr 11 2015, 05:01 PM
Post #7





Group: Members
Posts: 3
Joined: 1-April 15
Member No.: 22,441
Thanks for the help!! wink.gif
Especially the "best practice" advice is very welcome!

My code works beautifully now and i hope i´ll get a good deal further before i need to ask for help again!

This post has been edited by lolcat: Apr 11 2015, 05:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 01:35 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC