ibex333
Diamond Member
Lets say I have some radio buttons in an html file...
Suppose there are 5 of them. Each has a numerical value assigned to them 1 through 5.
I need to pass the value from whichever radio button was selected into the javascript file and I am not sure how to do that. If I had a select list, whatever value was selected can get passed using the id of that select list. But in the case of radio buttons, I don't want to have to assign an id to each radio button and have if/else cases to check which radio button was selected.
Is there any way to group all these radio buttons, and assign an id to that group such that the group holds the value that was selected, and I do not need to check each individual radio button?
I hope this makes sense.
Let me put some code to illustrate what I want.
This is the htm file
this is the params object which gets passed into the javascript file which holds ids of elements in the htm file
and this is the main js file
Basically the code I posted uses the select list to provide the time delay value between pictures which the user chose. But what if I wanted to use radio buttons to accomplish the same task?
Suppose there are 5 of them. Each has a numerical value assigned to them 1 through 5.
I need to pass the value from whichever radio button was selected into the javascript file and I am not sure how to do that. If I had a select list, whatever value was selected can get passed using the id of that select list. But in the case of radio buttons, I don't want to have to assign an id to each radio button and have if/else cases to check which radio button was selected.
Is there any way to group all these radio buttons, and assign an id to that group such that the group holds the value that was selected, and I do not need to check each individual radio button?
I hope this makes sense.
Let me put some code to illustrate what I want.
This is the htm file
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>Slide Show</title>
<link rel="stylesheet" type="text/css" href="slide_show.css"/>
<script type="text/javascript" src="slide_show_library.js"></script>
<script type="text/javascript" src="slide_show.js"></script>
</head>
<body>
<div id="content">
<h1 class="center">Fishing Slide Show</h1>
<ul class="center" id="imageList">
<li><a href="casting1.jpg" title="Casting 1">Casting 1</a></li>
<li><a href="casting2.jpg" title="Casting 2">Casting 2</a></li>
<li><a href="catchrelease.jpg" title="Catch and Release">
Catch and Release</a></li>
<li><a href="fish.jpg" title="Fish">Fish</a></li>
<li><a href="lures.jpg" title="Lures">Lures</a></li>
</ul>
<p class="center">
<button id="btnPrevious" disabled="disabled">
<img src="prev.gif" alt="Previous Image" />
</button>
<button id="btnPlay">
<img src="pause.gif" alt="Play or Pause" id="imgPlayPause" />
</button>
<input type="button" id="btnSpeed" value="Fast" />
<button id="btnNext" disabled="disabled">
<img src="next.gif" alt="Next Image" />
</button>
</p>
<p class="center">
<label>Fast speed: </label>
<select name="chooseSpeed" id="chooseSpeed">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="8">9</option>
<option value="8">10</option>
</select>
<label> seconds.</label>
</p>
<p class="center"><span id="caption">Casting 1</span></p>
<p class="center">
<img src="casting1.jpg" alt="Casting 1" id="image" />
</p>
</div>
</body>
</html>this is the params object which gets passed into the javascript file which holds ids of elements in the htm file
Code:
var slideShow;
window.onload = function () {
var params = {
listId : "imageList",
imageId : "image",
captionId : "caption",
previousId : "btnPrevious",
playId : "btnPlay",
playPauseId: "imgPlayPause",
nextId : "btnNext",
speedId : "btnSpeed",
chooseId : "chooseSpeed"
}
slideShow = new SlideShow( params );
}and this is the main js file
Code:
var $ = function (id) { return document.getElementById(id); }
var SlideShow = function ( params ) {
var that = this;
// Store references to the element nodes as properties
if ( !params ) params = {};
this.listNode = $(params.listId);
this.imageNode = $(params.imageId);
this.captionNode = $(params.captionId);
this.previousNode = $(params.previousId);
this.playNode = $(params.playId);
this.playPauseNode = $(params.playPauseId);
this.nextNode = $(params.nextId);
this.speedNode = $(params.speedId);
this.chooseNode = $(params.chooseId);
// Validate nodes
this.validateNode( this.listNode, "*", "List ID");
this.validateNode( this.imageNode, "img", "Image ID");
this.validateNode( this.captionNode, "span", "Caption ID");
this.validateNode( this.previousNode, "button", "Previous Button ID");
this.validateNode( this.playNode, "button", "Play Button ID");
this.validateNode( this.playPauseNode, "img", "PlayPause Image ID");
this.validateNode( this.nextNode, "button", "Next Button ID");
this.validateNode( this.speedNode, "input", "Speed Button ID");
this.validateNode (this.chooseNode, "select", "User Select ID");
// Define application parameters
this.imageCounter = 0;
this.play = true;
this.fast = 1000;
this.slow = 10000;
this.speed = this.fast;
// Retrieve image links
this.imageLinks = this.listNode.getElementsByTagName("a");
if ( this.imageLinks.length == 0 ) {
throw new Error("Slide Show: List ID contains no image links.");
}
// Process image links
var i, node, image;
this.imageCache = [];
for ( i = 0; i < this.imageLinks.length; i++ ) {
node = this.imageLinks[i];
// Preload image and copy title properties
image = new Image();
image.src = node.href;
image.title = node.title;
this.imageCache.push( image );
}
// Create event handlers
this.playClick = function () {
that.togglePlay();
that.playNode.blur();
}
this.previousClick = function () {
that.displayPrevImage();
that.previousNode.blur();
}
this.nextClick = function () {
that.displayNextImage();
that.nextNode.blur();
}
this.speedClick = function () {
that.toggleSpeed();
that.speedNode.blur();
}
this.changeClick = function () {
that.changeSpeed();
}
// Attach event handlers
this.playNode.onclick = this.playClick;
this.previousNode.onclick = this.previousClick;
this.nextNode.onclick = this.nextClick;
this.speedNode.onclick = this.speedClick;
this.chooseNode.onclick = this.changeClick;
// Set button states
this.previousNode.disabled = true;
this.nextNode.disabled = true;
// Start slide show
this.timer = setInterval(
function () { that.displayNextImage(); },
this.speed
);
}
SlideShow.prototype.validateNode = function ( node, nodeName, nodeDesc ) {
if ( ! node ) {
throw new Error("Slide Show: " + nodeDesc + " not found.");
}
if ( node.nodeType !== 1 ) {
throw new Error("Slide Show: " + nodeDesc +
" is not an element node.");
}
if ( nodeName != "*" && node.nodeName !== nodeName.toUpperCase() ) {
throw new Error("Slide Show: " + nodeDesc +
" is not a " + nodeName.toLowerCase() + " tag.");
}
}
SlideShow.prototype.displayImage = function () {
var image = this.imageCache[this.imageCounter];
this.imageNode.src = image.src;
this.captionNode.firstChild.nodeValue = image.title;
}
SlideShow.prototype.displayNextImage = function () {
this.imageCounter = ++this.imageCounter % this.imageCache.length;
this.displayImage();
}
SlideShow.prototype.displayPrevImage = function () {
this.imageCounter =
(this.imageCounter + this.imageCache.length - 1) %
this.imageCache.length;
this.displayImage();
}
SlideShow.prototype.togglePlay = function () {
var that = this;
if ( this.play ) {
clearInterval( this.timer );
this.playPauseNode.src = "play.gif";
this.previousNode.disabled = false;
this.nextNode.disabled = false;
}
else {
this.timer = setInterval(
function () { that.displayNextImage(); },
this.speed
);
this.playPauseNode.src = "pause.gif";
this.previousNode.disabled = true;
this.nextNode.disabled = true;
}
this.play = ! this.play;
}
SlideShow.prototype.toggleSpeed = function () {
var that = this;
if ( this.speedNode.value == "Fast" ) {
this.speedNode.value = "Slow";
this.speed = this.slow;
}
else {
this.speedNode.value = "Fast";
this.speed = this.fast;
}
if ( this.play ) {
clearInterval( this.timer );
this.timer = setInterval(
function () { that.displayNextImage(); },
this.speed
);
}
}
SlideShow.prototype.changeSpeed = function () {
var that = this;
this.fast = this.chooseNode.value;
this.fast = this.fast*1000;
this.speed = this.fast;
clearInterval( this.timer );
this.timer = setInterval(
function () { that.displayNextImage(); },
this.speed
);
this.play = true;
this.playPauseNode.src = "pause.gif";
this.speedNode.value = "Fast";
this.speed = this.fast;
}Basically the code I posted uses the select list to provide the time delay value between pictures which the user chose. But what if I wanted to use radio buttons to accomplish the same task?
