Js Array Prompt Input Data

JavaScript
1

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.

<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" + '\
'+ p_Disp + '\
' + "Please Choose a Number again");
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE="button" onClick="p_Names()" value="Chose a Number">
</FORM>

Thanks for your help

Adam

2

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.


        <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 ** \
 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

It would probably be better to use the select/option route, then show the message in the HTML like this example:


<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

Not in this case :wink:

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

You can use arrays to populate the option list.


<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

Yes, that is one option.

If you go that route you can then shorten

selVal [COLOR=#339933]=[/COLOR] playerOpts.[COLOR=#660066]options[/COLOR][COLOR=#009900][[/COLOR]playerOpts.[COLOR=#660066]selectedIndex[/COLOR][COLOR=#009900]][/COLOR].[COLOR=#660066]value[/COLOR][COLOR=#339933];[/COLOR]

to just

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.

[COLOR=#339933]<[/COLOR]option value[COLOR=#339933]=[/COLOR][COLOR=#3366CC]"none"[/COLOR][COLOR=#339933]>[/COLOR]Choose a Number[COLOR=#339933]</[/COLOR]option[COLOR=#339933]>[/COLOR]

To make the code more flexible you can just check if the selectedIndex is > 0 to see if a legitimate selection has been made