SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Js Array Prompt Input Data

    I am playing about with javascript arrays.

    Have recently just sat today looking through w3c and going through pages in a w3c book i bought on javascript and ajex and i was wondering whether you guys can help me on this little thing im playing on. someone suggested if im wanting to display stuff to use a drop down box but i need to learn to use arrays as the course im studying in college is on javascript and i feel this would be beneficial for me personally to know.

    i want to know if its possible to as well as select data from the array but also to Input new data from a button that opens a prompt box for users to enter a new array object.


    Code JavaScript:
    <SCRIPT language="JavaScript">
    <!--
    function p_Names()
    {
    var p_Names= new Array()
    p_Names["0"]="Player Number 0: Kyle Alexander";
    p_Names["1"]="Player Number 1: Adam Mckenzie";
    p_Names["2"]="Player Number 2: Lisa Rettie";
    p_Names["3"]="Player Number 3: Jamie Scott";
    p_Names["4"]="Player Number 4: Martyn Cooper";
    p_Names["5"]="Player Number 5: Andrew Paterson";
     
    var p_Disp=prompt("Please Chose a Number ","");
     
    if ((p_Disp=="0") || (p_Disp=="1") || (p_Disp=="2") || (p_Disp=="3") || (p_Disp=="4") || (p_Disp=="5"))
      alert("You Chose "+p_Names[p_Disp]+".");
    else
      alert("There are currently No Player Numbered" + '\n'+ p_Disp + '\n' + "Please Choose a Number again");
    }
    //-->
    </SCRIPT>
    <FORM>
    <INPUT TYPE="button" onClick="p_Names()" value="Chose a Number">
    </FORM>


    Thanks for your help

    Adam

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code might be easier to maintain. You can add as many players as you like to the array without having to modify the javascript. The user input is validated to ensure it is an integer and within the length of the array. It also allows the user to cancel their selection.
    Code JavaScript:
            <script type="text/javascript">
     
                var players = ['Player 1','Player 2','Player 3','Player 4','Player 5'];
     
                var playerNum = window.prompt('Choose a player number','');
     
                if(playerNum.length > 0){
                    var regex = /^\d+$/;
                    while(!regex.test(playerNum) || Number(playerNum) < 1 || Number(playerNum) > players.length){
                        playerNum = window.prompt("** Invalid Number ** \n Choose a player number between 1 and "+players.length,'');
                        if(playerNum == null){break;}
                    }
                    if(playerNum != null){
                        alert('Chosen player is: '+players[playerNum-1]);
                    }
                }
     
            </script>

    i want to know if its possible to as well as select data from the array but also to Input new data from a button that opens a prompt box for users to enter a new array object
    Yes you can do all that, but it's probably better to get the first part of your code working properly first

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It would probably be better to use the select/option route, then show the message in the HTML like this example:
    Code JavaScript:
    <form>
    	<select name="playerName">
    		<option value="none">Choose a Number</option>
    		<option value="Person 1">1</option>
    		<option value="Person 2">2</option>
    		<option value="Person 3">3</option>
    	</select>
    </form>
    <div id="notice"></div>
     
     
    <script>
    	var frm = document.forms[0],
    		playerOpts = frm.playerName,
    		noticeTxt,
    		noticeDiv = document.getElementById('notice'),
    		selVal;
     
    	playerOpts.onchange = function() {
    		selVal = playerOpts.options[playerOpts.selectedIndex].value;
    		if( selVal === 'none' ){
    			noticeTxt = 'You need to select a number.';
    		} else {
    			noticeTxt = 'You selected ' + selVal;
    		}
    		noticeDiv.innerHTML = noticeTxt;
    	};
    </script>

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    It would probably be better to use the select/option route,....
    Not in this case

    The OP said in their original post

    .......someone suggested if im wanting to display stuff to use a drop down box but i need to learn to use arrays....
    since someone else in another thread said the same thing as you.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can use arrays to populate the option list.
    Code JavaScript:
    <form>
    	<select name="playerName">
    		<option value="none">Choose a Number</option>
    	</select>
    </form>
    <div id="notice"></div>
     
    <script>
    	var playerOpts = document.forms[0].playerName,
    		noticeDiv = document.getElementById('notice'),
    		noticeTxt,
    		optsArray = ['Player 1', 'Player 2', 'Player 3'],
    		selVal,
    		i, option;
     
    	for(i = 0; i < optsArray.length; i++) {
    		option = document.createElement('option');
    		option.setAttribute('value', optsArray[i]);
    		option.appendChild(document.createTextNode(i));
     
    		playerOpts.appendChild(option);
    	}
     
    	playerOpts.onchange = function() {
    		selVal = playerOpts.options[playerOpts.selectedIndex].value;
    		if( selVal === 'none' ){
    			noticeTxt = 'You need to select a number.';
    		} else {
    			noticeTxt = 'You selected ' + selVal;
    		}
    		noticeDiv.innerHTML = noticeTxt;
    	};
    </script>

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is one option.

    If you go that route you can then shorten


    Code:
    selVal = playerOpts.options[playerOpts.selectedIndex].value;
    to just

    Code:
    selVal = this.value
    You don't need to drill down the options array to the selected index to get the value of the selected option.

    Also, you don't need to give the first option a value of "none" or whatever. Just leave the value blank.

    Code:
    <option value="none">Choose a Number</option>
    To make the code more flexible you can just check if the selectedIndex is > 0 to see if a legitimate selection has been made


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
  •