Good Starting point to learn JavaScript AND a If statement

kimbo_king · September 29, 2013, 9:39am

Hi

This forum has helped my immensely in building my website and whilst its functional, its still (and i guess always will be) a work in progress!

I’m at a stage where I am getting some good traffic now and would like to make my site more interactive rather than ‘informative’

'm thinking the only way to do so would to be via Javascript? What is teh best book/ method for a total beginner? The Sitepoint books on HTML and CSS were fantastic

One thing I’d like to do would be to write an if statement from a drop down list

IE:

If x is selected from the drop down list 1

AND

y is selected from the drop down list 2 then = RESULT

I’ve been looking for examples to look at but can’t see anything. Is this straightforward?

thetenfold · September 30, 2013, 5:30am

These things take time. Try to learn the language fairly well before attempting anything.
There are lots of tutorials on the internet. Try some, test some things out, learn. That’s how I’ve done it.

James_Hibbard · September 30, 2013, 7:12am

Hi there,

This isn’t too hard. To begin with we’ll need two select menus.

<label for="select1">Select 1</label>
<select id="select1">
  <option>Please select something</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<label for="select2">Select 2</label>
<select id="select2">
  <option>Please select something</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

Then we need to get references to these elements from our JavaScript:

var select1 = document.getElementById("select1"),
    select2 = document.getElementById("select2");

After that we need to attach an event listener which will call a function every time the user selects a different option from the menus.

select1.onchange = checkResult;
select2.onchange = checkResult;

Then we need to define that function, in which we can compare the result:

function checkResult(){
  if(select1.value === "A" && select2.value === "B"){
    alert("We have a winnah!!");
  }
}

Here’s the whole thing:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>select onchange</title>
  </head>
  
  <body>
    <div>
      <label for="select1">Select 1</label>
      <select id="select1">
        <option>Please select something</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </div>
    <div>
      <label for="select2">Select 2</label>
      <select id="select2">
        <option>Please select something</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </div>
    
    <script>
      var select1 = document.getElementById("select1"),
          select2 = document.getElementById("select2");
      
      function checkResult(){
        if(select1.value === "A" && select2.value === "B"){
          alert("We have a winnah!!");
        }
      }
      
      select1.onchange = checkResult;
      select2.onchange = checkResult;
    </script>
  </body>
</html>

Does that help?

James_Hibbard · September 30, 2013, 7:15am

I would recommend this: Jump Start JavaScript

This is how the book describes its target audience:

Beginner level web developers. Reasonable knowledge of HTML and CSS is assumed. It’s a fast paced tutorial so may be unsuitable for absolute tech newbies.

kimbo_king · October 1, 2013, 8:41am

wow Pullo amazing

I’ll check that link, it sounds perfect

The code is fantastic too thanks. I’ll rework it so the second drop down relates to the first

IE: If A is selected in the first then list XYZ
If B is selected list WXY

etc etc

REALLY appreciated, your my favourite person!

kimbo_king · October 1, 2013, 6:35pm

Bought the book, thanks for the advice

This is a fantastic starting point thanks so much.

James_Hibbard · October 1, 2013, 7:40pm

No problems

Be sure to post back in the JS forum if you run into any trouble or need anything explained.

Happy learning!

kimbo_king · October 20, 2013, 3:31pm

Hi guys

I’ve been reading my book and its sinking it although its a bit more complicated than HTML/ CSS but certainly worth it.

Pullo - I’ve amended your code to make it relevant t my site. I may have gone about this the long way but it works

How do I customise my alert? (IE Cange teh title, add colour, bold text/ images etc?)

Rather than an alert, could I make this populate a box on my page? IE my select box sits in an empty box which gets populated when you select a value?

Extremely long (but simple) code below if needed. It actually goes up to value 76 but I have slimmed down!

    <div>
      <label for="select1">Select 1</label>
      <select id="select1">
        <option>Please select something</option>
        <option value="1">Beckett League</option>
        <option value="2">Craven and District League Premier Division</option>
        <option value="3">Craven and District League Division One</option>
        <option value="4">Craven and District League Division Two</option>
        <option value="5">Craven and District League Division Three</option>
  

      </select>
    </div>

    
    <script>
      var select1 = document.getElementById("select1"),
          select2 = document.getElementById("select2");
      
      function checkResult(){
	  
if(select1.value === "1") {alert("You play in the Beckett League . The  Beckett League isn't currently a part99 of the football pyramid. This means that your team would have to move leagues if you were to progress to the football league.");}
else if(select1.value === "2") {alert("You play in the Craven and District League Premier Division . The  Craven and District League Premier Division league sits at level 14 of the football pyramid.  If you were to win promotion every year, it would take you 10 years to reach the Football League (League 2) . It would take 14 years to reach the Premier League.");}
else if(select1.value === "3") {alert("You play in the Craven and District League Division One . The  Craven and District League Division One league sits at level 15 of the football pyramid.  If you were to win promotion every year, it would take you 11 years to reach the Football League (League 2) . It would take 15 years to reach the Premier League.");}
else if(select1.value === "4") {alert("You play in the Craven and District League Division Two . The  Craven and District League Division Two league sits at level 16 of the football pyramid.  If you were to win promotion every year, it would take you 12 years to reach the Football League (League 2) . It would take 16 years to reach the Premier League.");}
else if(select1.value === "5") {alert("You play in the Craven and District League Division Three . The  Craven and District League Division Three league sits at level 17 of the football pyramid.  If you were to win promotion every year, it would take you 13 years to reach the Football League (League 2) . It would take 17 years to reach the Premier League.");}

}
 


      
      select1.onchange = checkResult;
      select2.onchange = checkResult;
    </script>

kimbo_king · October 20, 2013, 4:30pm

Hi

I’ve put up a working example:

http://www.togganet.co.uk/yorkshire-football-pyramid.html

Its on th eleft hand side

felgall · October 20, 2013, 6:30pm

alert() hasn’t been needed in scripts on the web since Netscape 4 died. Since then it has been possible to display the message directly in the web page itself where you can style it how you want. Since then alert() has been used mainly for debugging - so you can see if particular code is reached or what value a variable holds at a given point in the code. Now that Firefox has a built in debugger (as all the other major browsers have had for some time) it is no longer needed even for that purpose and so is effectively a completely obsolete command.

kimbo_king · October 20, 2013, 8:02pm

Thank you Stephen

I guess my next question is… Can i replace the alert with text pasted into a box

I’ve tried using document.write (not good) etc but that didnt work.

I think I will have to change my function to a get element ID??

James_Hibbard · October 20, 2013, 8:17pm

Hi there,

Glad to see that you are getting into the world of JS

As felgall says, an alert is not really the way to go. More on that later.

First, let’s look at how we can tidy up the code.

Start off by removing the reference to select2, it’s not needed.
Then let’s define an object literal and assign the text you wish to display when the dropdown changes, to numerical keys:

var select1 = document.getElementById("select1"),
    texts = {
      1: "You play in the Beckett League ...",
      2: "You play in the Craven and District ...",
      3: "You play in the Craven and District ...",
      4: "You play in the Craven and District ...",
      5: "You play in the Craven and District ..."
    };

Then change the select1.onchange event handler thus:

select1.onchange = function(){
  alert(texts[this.value]);
};

Already, that’s much neater.

Now, let’s define a <div> element below the select element to insert the result into:

<div id="result"></div>

Then, let’s get a reference to it and use JavaScript’s innerHTML function to change its content.

results = document.getElementById("results");

select1.onchange = function(){
  results.innerHTML = texts[this.value];
};

Here’s everything together:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dropdown example</title>
  </head>
  
  <body>
    <div>
      <label for="select1">Select 1</label>
      <select id="select1">
        <option>Please select something</option>
        <option value="1">Beckett League</option>
        <option value="2">Craven and District League Premier Division</option>
        <option value="3">Craven and District League Division One</option>
        <option value="4">Craven and District League Division Two</option>
        <option value="5">Craven and District League Division Three</option>
      </select>
    </div>
    <div id="results"></div>
    
    <script>
      var select1 = document.getElementById("select1"),
          results = document.getElementById("results"),
          texts = {
            1: "You play in the Beckett League . The  Beckett League isn't currently a part99 of the football pyramid. This means that your team would have to move leagues if you were to progress to the football league.",
            2: "You play in the Craven and District League Premier Division . The  Craven and District League Premier Division league sits at level 14 of the football pyramid.  If you were to win promotion every year, it would take you 10 years to reach the Football League (League 2) . It would take 14 years to reach the Premier League.",
            3: "You play in the Craven and District League Division One . The  Craven and District League Division One league sits at level 15 of the football pyramid.  If you were to win promotion every year, it would take you 11 years to reach the Football League (League 2) . It would take 15 years to reach the Premier League.",
            4: "You play in the Craven and District League Division Two . The  Craven and District League Division Two league sits at level 16 of the football pyramid.  If you were to win promotion every year, it would take you 12 years to reach the Football League (League 2) . It would take 16 years to reach the Premier League.",
            5: "You play in the Craven and District League Division Three . The  Craven and District League Division Three league sits at level 17 of the football pyramid.  If you were to win promotion every year, it would take you 13 years to reach the Football League (League 2) . It would take 17 years to reach the Premier League."
          };
        
      select1.onchange = function(){
        results.innerHTML = texts[this.value];
      };
    </script>
  </body>
</html>

Hope that helps.

kimbo_king · October 22, 2013, 1:24pm

Amazing as per usual Pullo

Cannot thank you enough, you’ve taught me loads!

kimbo_king · October 24, 2013, 8:09pm

Working fine and a fantastic addition.

I’d like to celebrate it more by adding a share feature with FB/ Twitter

IE: When the text is displayed have the option to click to Tweet or FB the message saying something like:

" text tex text, see what level you play at at www.togganet.co.uk"

I’ve been googling like crazy but cant find anything. All results point to a standard twitter share button, not one within a query!!!

Also, what the deal with links, I tried standard HTML link into my message but it obviously didn’t work!

James_Hibbard · November 4, 2013, 10:23am

Hi there,

Sorry for the late reply, but I’ve been away.

Did you get this sorted out in the meantime or are you still looking for a way to make this work?

kimbo_king · November 6, 2013, 9:01pm

Hi Pullo, hope you enjoyed your time off

This does work but there are some tweaks I’d like to make (mainly cosmetic)

1 - I’d like the text to match my CSS for the rest of teh site
2 - I’d love to add a Facebook and Twitter Share button that posted a custom message if clicked. IE: I play at step 6, what level do you play at? find out here…

James_Hibbard · November 7, 2013, 10:24am

Hey,

It was lovely We went to the Canary Islands.

Not sure what you mean here.
Which text? Could you elaborate?

If I’m not mistaken, this is a different topic from what we discussed above (please correct me if I am wrong).
I would therefore suggest starting a new thread where you lay out what you currently have and what you require.
Feel free to mention me or tag me in your new thread and I’ll answer you there.

kimbo_king · November 8, 2013, 6:33pm

I love the canaries, nice and walk all year long!

1 - CSS

I’ve successfully incorporated into my site @ http://www.togganet.co.uk/yorkshire-football-pyramid.html

The text however is large. I’d like it to mimic what I have in my CSS file for <p>

ALSO, can I add a link to my text? IE: My message = I have a foot. Ideally Foot would link to another page.

2 - FC/ Twitter

You are correct, I’ll start a new thread!

Many thanks again

James_Hibbard · November 9, 2013, 12:44pm

Just insert the text in a paragraph. Try this:

select1.onchange = function(){
  results.innerHTML = "<p>" + texts[this.value] +"</p>";
};

Sure. Be sure to use single quotes:

texts = {
  1: "You play in the <a href='http://www.becketleague.com'>Beckett League</a>. The  Beckett League isn't currently a part ...",
  2: "More text etc"
}

HTH