SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good Starting point to learn JavaScript AND a If statement

    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?

  2. #2
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Quote Originally Posted by kimbo_king View Post
    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?
    This isn't too hard. To begin with we'll need two select menus.

    HTML Code:
    <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:

    Code 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.

    Code JavaScript:
    select1.onchange = checkResult;
    select2.onchange = checkResult;

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

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

    Here's the whole thing:

    Code:
    <!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?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by kimbo_king View Post
    '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
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bought the book, thanks for the advice

    This is a fantastic starting point thanks so much.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    No problems

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

    Happy learning!

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Code:
        <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>

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I've put up a working example:

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

    Its on th eleft hand side

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kimbo_king View Post
    How do I customise my alert? (IE Cange teh title, add colour, bold text/ images etc?)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

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

    Quote Originally Posted by kimbo_king View Post
    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?
    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:

    Code JavaScript:
    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:

    Code JavaScript:
    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:

    Code:
    <div id="result"></div>
    Then, let's get a reference to it and use JavaScript's innerHTML function to change its content.

    Code JavaScript:
    results = document.getElementById("results");
     
    select1.onchange = function(){
      results.innerHTML = texts[this.value];
    };

    Here's everything together:

    Code:
    <!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.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing as per usual Pullo

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

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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?

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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?
    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...

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hey,

    Quote Originally Posted by kimbo_king View Post
    Hi Pullo, hope you enjoyed your time off
    It was lovely We went to the Canary Islands.

    Quote Originally Posted by kimbo_king View Post
    1 - I'd like the text to match my CSS for the rest of teh site
    Not sure what you mean here.
    Which text? Could you elaborate?

    Quote Originally Posted by kimbo_king View Post
    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...
    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.

  18. #18
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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-...l-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

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by kimbo_king View Post
    I've successfully incorporated into my site @ http://www.togganet.co.uk/yorkshire-...l-pyramid.html

    The text however is large. I'd like it to mimic what I have in my CSS file for <p>
    Just insert the text in a paragraph. Try this:

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

    Quote Originally Posted by kimbo_king View Post
    ALSO, can I add a link to my text? IE: My message = I have a foot. Ideally Foot would link to another page.
    Sure. Be sure to use single quotes:

    Code JavaScript:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •