www.webdeveloper.com
Results 1 to 4 of 4

Thread: Button when display a function

  1. #1
    Join Date
    Feb 2014
    Posts
    16

    Button when display a function

    Dear friends,

    How can I do thatů.


    When I press the button, a list of cars are display on screen.
    Once it display, I would like to have another button that display a list of prices when pressed.

    I did the first level, but when I press the button I have the car list without another button which contain the price list.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
    <p>Click to see</p>
    <button onclick="myFunction()">Press</button>
    
    <script>
        function myFunction() {
            Cars = ["volvo", "doge", "mercedes", "ford", "mitsubishi", "mazda"];
            for (var i = 0; i < Cars.length; i++) {
                document.write(Cars[i] + "<br>");
               }
        }
       
    </script>
    
    </body>
    

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Either provide the associated prices lists or modify the following...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>2-level Drop Down Selection</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=223096
    
      var selOptions = [
    	  ['drink', 'water','milk','soda','wine','beer'],
    	  ['fruit', 'apple','orange','banana'],
          ['veggie','carrot','corn','potato'],
    	  ['meat',  'beef','chicken','lamb','pork','loaf'],
          ['cake',  'sponge','chocolate','tiramissu','mud'],
    	  ['coffee','black','cream','latte','cuban']
      ];
      function setSel2Options(obj){
        oSel2.options.length = 0;
    	if (obj.selectedIndex == 0) { return; }
    	for( i=0; i < selOptions.length; i++) {
          if (obj.value == selOptions[i][0]) {
            oSel2.options[oSel2.options.length] = new Option('Select a '+obj.value,'',false,false);
    		for (j=1; j < selOptions[i].length; j++) {  
              oSel2.options[oSel2.options.length] = new Option(selOptions[i][j],selOptions[i][j],false,false);
            }
            i = selOptions.length;
          }
        }
      }
      window.onload=function() {
        oSel1 = document.getElementById('sel1');
        oSel2 = document.getElementById('sel2');
        oSel1.options[oSel1.options.length] = new Option('Select an option','',false,false);
    	for (i=0; i < selOptions.length; i++) {
          oSel1.options[oSel1.options.length] = new Option(selOptions[i][0],selOptions[i][0], false,false);
        }
        oSel1.onchange=function(){setSel2Options(this);}
      }
      
      var savedInfo = [];
      for (i=0; i<selOptions.length; i++) { savedInfo[i] = ''; }
      function saveSelOptions() {
        oSel1 = document.getElementById('sel1');
        oSel2 = document.getElementById('sel2');
    	savedInfo[oSel1.selectedIndex] = oSel1.value + ':'+ oSel2.value;
    	var str = '';  	for (var i=0; i<savedInfo.length; i++) { str += savedInfo[i] +"\n"; }
    	document.getElementById('choices').innerHTML = str;
      }
      
    </script>
    </head>
    <body>
      <select id="sel1"></select>
      <select id="sel2" onchange="saveSelOptions()"></select>
      <button onclick="document.getElementById('choices').innerHTML=''">Clear</button>
      <div style="float:left"> Choices: 
       <pre id="choices"></pre>
      </div><br style="clear:both">
    </body>
    </html>
    There are a number of other solutions available by using the search of this forum for "drop down" or "select box" terms.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,500
    Crikey JMRKER, I think the guys a newbie.

    What I think needs explaining is when you use document,write in a script, unless you are writing in data at the time of page load, after the page load the use of document write will replace any JavaScript and HTML.

    So you need to use a dynamic approach as JMRKER has shown you.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Feb 2014
    Posts
    16
    Thanks a lot !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles