How to display a number of images based on a number entered by user?

Page 1 of 1

4 Replies - 206 Views - Last Post: 19 October 2012 - 02:20 PM

#1 JasonHerr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-September 09

How to display a number of images based on a number entered by user?

Posted 18 October 2012 - 12:34 PM

I have displayed an image based on a value from 1 through 4 entered in a textbox. So if I enter 1 it shows flag1, if I enter 2 it shows flag2, etc. Now I want to change my javascript function to display the number of images based on the number entered. For example, if 2 is entered it should show 2 images. If 3 is entered it should show 3 images, etc. Any suggestions would be appreciated. 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example: Javascript Code to show a hidden object</title>
</head>

<body> 
<script type="text/javascript">
	//Make Flags Visible or Hidden
	function toggleFlags() {
		var whichFlag = document.getElementById('whichFlag').value;

		if (document.getElementById('flag' + whichFlag).style.display == '') {
			document.getElementById('flag' + whichFlag).style.display = 'none';	
		} else {
			document.getElementById('flag' + whichFlag).style.display = '';	
		}
	}
</script> 


<form method="post" action="" onsubmit="toggleFlags();return false;"> 
	Enter a number from 1 - 8. Then click the button:
	<input type="text" id="whichFlag" name="whichFlag" />
	<br>
	<input type="submit" name="flagTotal" value="Toggle Flag"/>

	<div id="flag1" style="display:none;"><img src="http://www.50states.com/flag/image/nunst064.gif" alt="Pennsylvania"></div>
	<div id="flag2" style="display:none;"><img src="http://www.50states.com/flag/image/nunst010.gif" alt="Delaware"></div>
	<div id="flag3" style="display:none;"><img src="http://www.50states.com/flag/image/nunst032.gif" alt="Maryland"></div>
	<div id="flag4" style="display:none;"><img src="http://www.50states.com/flag/image/nunst030.gif" alt="Maine"></div>
</form> 

</body> 
</html>

This post has been edited by Atli: 18 October 2012 - 05:06 PM
Reason for edit:: Please use [code] tags when posting code.


Is This A Good Question/Topic? 0
  • +

Replies To: How to display a number of images based on a number entered by user?

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: How to display a number of images based on a number entered by user?

Posted 19 October 2012 - 09:44 AM

Not sure why you ask for a number from 1 to 8
when only 4 images are available with your code.

Here is a modified version which assumes I understand your request.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>Example: Javascript Code to show a hidden object</title>
<!-- Modified from: 
  http://www.dreamincode.net/forums/topic/296281-how-to-display-a-number-of-images-based-on-a-number-entered-by-user/
-->
<style type="text/css">
 .flags { display:none; }
</style>
</head>

<body> 
<form method="post" action="" onsubmit="return false"> 
 Enter a number from 1 - 8. <br>
 Then click outside entry box: <input type="text" id="whichFlag" name="whichFlag" /> <br>
 <input type="submit" name="flagTotal" value="Toggle Flag" onclick="toggleFlags()" /> <br>

 <img id="flag1" class="flags" src="" alt="">
 <img id="flag2" class="flags" src="" alt="">
 <img id="flag3" class="flags" src="" alt="">
 <img id="flag4" class="flags" src="" alt="">
 <img id="flag5" class="flags" src="" alt="">
 <img id="flag6" class="flags" src="" alt="">
 <img id="flag7" class="flags" src="" alt="">
 <img id="flag8" class="flags" src="" alt="">

</form> 

<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }

//Make Flags Visible or Hidden
function toggleFlags() {
  for (var i=1; i<flagGif.length; i++) {
    $_('flag'+i).style.display = 'none'; // hide all flags
  }

  var flagCount = $_('whichFlag').value*1;
  if ((flagCount < 1) || (flagCount >= flagGif.length)) { alert('Invalid input'); return; }

  for (var i=1; i<=flagCount; i++) {
    $_('flag'+i).style.display = 'block'; // show choice of flags
  }
}

var baseURL = "http://www.50states.com/flag/image/";
var flagGif = [ ':', // default not used
  'Pennsylvania:nunst062.gif',
  'Delaware:nunst010.gif',
  'Maryland:nunst032.gif',
  'Maine:nunst030.gif',
  'Oregon:nunst061.gif',
  'Iowa:nunst022.gif',
  'Indiana:nunst021.gif',
  'Florida:nunst012.gif'  // No comma after final entry
];

function init() {
  var tarr = [];
  for (var i=1; i<flagGif.length; i++) {
    tarr = flagGif[i].split(':');
    $_('flag'+i).alt = baseURL+tarr[0];
    $_('flag'+i).src = baseURL+tarr[1];
    $_('flag'+i).title = tarr[0];
  }
}

// Either of following works
window.onload = function() { init(); }
// init();
</script> 

</body> 
</html>

Good Luck!
:)

This post has been edited by JMRKER: 19 October 2012 - 09:47 AM

Was This Post Helpful? 0
  • +
  • -

#3 JasonHerr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-September 09

Re: How to display a number of images based on a number entered by user?

Posted 19 October 2012 - 11:24 AM

View PostJMRKER, on 19 October 2012 - 10:44 AM, said:

Not sure why you ask for a number from 1 to 8
when only 4 images are available with your code.

Here is a modified version which assumes I understand your request.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>Example: Javascript Code to show a hidden object</title>
<!-- Modified from: 
  http://www.dreamincode.net/forums/topic/296281-how-to-display-a-number-of-images-based-on-a-number-entered-by-user/
-->
<style type="text/css">
 .flags { display:none; }
</style>
</head>

<body> 
<form method="post" action="" onsubmit="return false"> 
 Enter a number from 1 - 8. <br>
 Then click outside entry box: <input type="text" id="whichFlag" name="whichFlag" /> <br>
 <input type="submit" name="flagTotal" value="Toggle Flag" onclick="toggleFlags()" /> <br>

 <img id="flag1" class="flags" src="" alt="">
 <img id="flag2" class="flags" src="" alt="">
 <img id="flag3" class="flags" src="" alt="">
 <img id="flag4" class="flags" src="" alt="">
 <img id="flag5" class="flags" src="" alt="">
 <img id="flag6" class="flags" src="" alt="">
 <img id="flag7" class="flags" src="" alt="">
 <img id="flag8" class="flags" src="" alt="">

</form> 

<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }

//Make Flags Visible or Hidden
function toggleFlags() {
  for (var i=1; i<flagGif.length; i++) {
    $_('flag'+i).style.display = 'none'; // hide all flags
  }

  var flagCount = $_('whichFlag').value*1;
  if ((flagCount < 1) || (flagCount >= flagGif.length)) { alert('Invalid input'); return; }

  for (var i=1; i<=flagCount; i++) {
    $_('flag'+i).style.display = 'block'; // show choice of flags
  }
}

var baseURL = "http://www.50states.com/flag/image/";
var flagGif = [ ':', // default not used
  'Pennsylvania:nunst062.gif',
  'Delaware:nunst010.gif',
  'Maryland:nunst032.gif',
  'Maine:nunst030.gif',
  'Oregon:nunst061.gif',
  'Iowa:nunst022.gif',
  'Indiana:nunst021.gif',
  'Florida:nunst012.gif'  // No comma after final entry
];

function init() {
  var tarr = [];
  for (var i=1; i<flagGif.length; i++) {
    tarr = flagGif[i].split(':');
    $_('flag'+i).alt = baseURL+tarr[0];
    $_('flag'+i).src = baseURL+tarr[1];
    $_('flag'+i).title = tarr[0];
  }
}

// Either of following works
window.onload = function() { init(); }
// init();
</script> 

</body> 
</html>

Good Luck!
:)

Was This Post Helpful? 0
  • +
  • -

#4 JasonHerr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-September 09

Re: How to display a number of images based on a number entered by user?

Posted 19 October 2012 - 11:33 AM

JMRKER,

Thank you very much for your help. This is exactly what I was trying to do. The 1-8 listing was a mistake. I had been previously working with 8 images, and I decided to simplify it, but had forgotten to replace the 8 with a 4.

There is much online regarding toggling visibility, but I was having trouble finding anything that would toggle/display multiple images based on a value entered in a textbox. This is great. Thanks again.

Jason
Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: How to display a number of images based on a number entered by user?

Posted 19 October 2012 - 02:20 PM

You're most welcome.
Happy to help.

Keep in mind that the script only displays the 1st N-number of slides chosen
(with a check to make sure it is within range)
but it would need to be modified (slightly) if you decides to
randomize the image display.

Again, good luck! :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1