button question

diceman93 · 01-11-2013, 10:45 PM

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!

Old Pedant · 01-11-2013, 10:54 PM

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.

jmrker · 01-11-2013, 10:55 PM

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.

Old Pedant · 01-11-2013, 11:18 PM

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>

Old Pedant · 01-11-2013, 11:21 PM

Quote:

Originally Posted by jmrker

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.

diceman93 · 01-11-2013, 11:21 PM

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;

diceman93 · 01-11-2013, 11:25 PM

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.

felgall · 01-11-2013, 11:25 PM

Code:

switch(planet.toLowercase()){
case 'mercury':

xelawho · 01-11-2013, 11:26 PM

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

Old Pedant · 01-11-2013, 11:27 PM

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/>

diceman93 · 01-11-2013, 11:50 PM

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.

Old Pedant · 01-12-2013, 12:02 AM

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.

felgall · 01-12-2013, 12:56 AM

Quote:

Originally Posted by Old Pedant

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.

Old Pedant · 01-12-2013, 07:10 AM

Quote:

Originally Posted by felgall

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.