Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: button question

  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    button question

    How's it going?!
    Is there anyway to add a button in JS without adding it outside of the <script> tag? I know you can add it via <input type="button value="xxx" onClick="xxx"/>

    I'm trying to make a program to learn about planets in our solar system. So i've created a switch case and would like the button to appear after it writes a bit of info about the planet on the page.
    Example.

    var planet= prompt(" Enter what planet you would like to learn about ");

    switch(planet){
    case "Mercury":
    document.write(" info about planet... ");
    // would like button to appear here after with a link to wiki regarding further info on the specified planet.
    break;
    etc. with cases..

    Thanks in advance!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    You cannot effectively combine the "toy" scripting tools prompt() and alert() and document.write( ) with form fields such as buttons and checkboxes and such.

    If you want to start using buttons and such, then it's time to start creating *real* HTML pages instead of toy learning tools.

    You *could* create the button, yes, but it couldn't very well interact with your prompts and such.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    You will not be able to see the page after you make a selection because the document.write will reload the page.

    Consider using a <div> element with a .innerHTML setting.

    I'm not sure what your button question is about.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    Sample of one right way to do this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Planets</title>
    </head>
    <body>
    <div>
        <form id="myForm">
        <select name="choose">
            <option>--choose a planet--</option>
            <option> Mercury </option>
            <option> Venus </option>
            <option> Earth </option>
            <option> Barsoom </option>
            <option> Jupiter </option>
        </select>
        <div id="info" style="display: none;">
            The planet <span id="pname"></span>:<br/>
            <span id="pinfo"></span>
            <br/><br/>
            For more information, <a id="plink" target="PLANET">click here</a>
            <hr/>
            <input type="button" name="pmoons" value="How many moons?"/>
        </div>
        </form>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var planets = {
              Mercury : "Closest to the sun, it is the hottest planet.",
              Venus   : "About the same size as Earth, it is too hot for us.",
              Earth   : "We live here. What more do you want to know?",
              Barsoom : "Edgar Rice Burrough gave Mars this alternative name.",
              Jupiter : "The largest of the planets."
          }
          var moons = {
              Mercury : 0,
              Venus   : 0, 
              Earth   : 1, 
              Barsoom : 2, 
              Jupiter : "(as of January 2009) 49 officially named"
          }
    
          var divinfo = document.getElementById("info");
          var spaninfo = document.getElementById("pinfo");
    
          var form = document.getElementById("myForm");
          var planet = "";
    
          form.choose.onchange = function( )
              {
                  if ( this.selectedIndex == 0 )
                  {
                      divinfo.style.display = "none";
                      return;
                  }
                  planet = this.options[this.selectedIndex].text.replace(/\s/g,"");
                  document.getElementById("pname").innerHTML = planet;
                  spaninfo.innerHTML = planets[planet];                            
                  document.getElementById("plink").href = 
                       "http://en.wikipedia.org/wiki/" + planet;
     
                  divinfo.style.display = "block";
              }
          form.pmoons.onclick = function( )
              {
                  spaninfo.innerHTML = "Has " + moons[planet] + " moon(s)";
              }
      }
    )();
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 01-12-2013 at 12:22 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    diceman93 (01-12-2013)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    Quote Originally Posted by jmrker View Post
    You will not be able to see the page after you make a selection because the document.write will reload the page.
    Well....not strictly true.

    He will still be able to see everything written using any document.write()'s that occur *AS A SINGLE RESPONSE* to the prompt. And if he did use document.write to create a button it would be there. But then *ALL* of the existing code, including the JS that did the prompt and the document.write will disappear, of course.

    It's just overall a crappy and, as I think Felgall first called it and I have come to think is the right terminology, not fit for anything but a toy.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    alright, thanks guys. Guess I gotta start getting more familiar with html.
    One last question I was curious about ..

    in my switch case, if I want to make the Mercury both accepted as upper and lower case, will this work(refer to example)? Or do they need to be in brackets? I know in VB you can convert the string to an all lower or uppercase to make it easier, not sure in JS though.


    switch(planet){
    case "Mercury" || "mercury": // && works, just curious to || , or if you can just convert the string to all lowercase
    document.write("....");
    break;
    Last edited by diceman93; 01-12-2013 at 12:23 AM.

  • #7
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Old Pedant, thanks a lot for the effort in the code. Appreciate it, opens my mind a lot more seeing it come from a pro.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Code:
    switch(planet.toLowercase()){
    case 'mercury':
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    switch doesn't work like that. Each case tests true or false. The best way to do it would be to change the input using the string method toLowerCase() and then just have your case as "mercury"

    && works? if it does, I suspect not the way you think it does, but I confess I have never tried it

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    First of all, if you use a <select> as I showed, you avoid the problem of upper/lower case.

    Secondly, a switch( ) is by far not the most elegant way to do this. See my scheme.

    But if you must use a switch and you must allow human fallible input, then you could do this:
    Code:
    switch ( planet )
    {
        case "Mercury": case "mercury": case "MERCURY":
            info = "The planet closest to the sun.";
            break;
        case "Venus": case "venus": case "VENUS":
            ...
    }
    Do *NOT* forget the break after each same-case-action set!

    But better than that would be:
    Code:
    switch ( planet.toLowerCase() )
    {
        case case "mercury": 
            info = "The planet closest to the sun.";
            break;
        case "venus": 
            ...
    }
    And, again, don't forget the breaks.

    ************

    EDIT: See? If I didn't write so much, I wouldn't be last to the party. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ya, definitely a lot better using .toLowerCase(). Save's a ton of time. Unreal how you coded all that in that amount of time lol. One day hopefully I could be that pro.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    The thing that took the longest was find the right count for the number of moons for Jupiter <grin/>.

    Even then, I had to take a 4-year-old date.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    The thing that took the longest was find the right count for the number of moons for Jupiter <grin/>.

    Even then, I had to take a 4-year-old date.
    I did a quick search for how many moons Jupiter has and most of the sites that came up on the first page of the results said that it has 63+ moons. Only one of them gave 49 as the "official" number and even that one said that there were at least 14 more waiting to be given names.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    Quote Originally Posted by felgall View Post
    I did a quick search for how many moons Jupiter has and most of the sites that came up on the first page of the results said that it has 63+ moons. Only one of them gave 49 as the "official" number and even that one said that there were at least 14 more waiting to be given names.
    Yep, I saw numbers all over the place. But the debate seems to be how big and/or how regular an orbit a satellite has to be to called a "moon". I'm sure there are more than 49 official ones by now, since that figure was true 4 years ago, but I couldn't find anything more recent with an "official" number.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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