Radio Buttons and JavaScript

ibex333

Diamond Member
Mar 26, 2005
4,094
123
106
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

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?
 

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,633
4,562
75
What if you add an event handler to each radio button that sets a global variable to this.value? Or an HTML5 property of the nodes' parent element? Or a property of SlideShow, or the like?

Alternatively, what about grouping all the radio buttons under an element and doing if-else cases on all the child nodes of that element?
 

ibex333

Diamond Member
Mar 26, 2005
4,094
123
106
Thanks Ken. I'll try that. I like the idea with event handlers for each radio more than if-else cases.
 

andrikaa

Junior Member
Feb 11, 2014
1
0
0
Can JavaScript create a rich interactive site like animations that when rolled over play out, or an interactive object that can be drug around the screen like a type of video game of sorts? or is Javascript limited to just hover buttons and photo gallery's thing like that?
______________________
cute video ~ video library ~ commercial video
 
Last edited:

Markbnj

Elite Member <br>Moderator Emeritus
Moderator
Sep 16, 2005
15,682
14
81
www.markbetz.net
Can JavaScript create a rich interactive site like animations that when rolled over play out, or an interactive object that can be drug around the screen like a type of video game of sorts? or is Javascript limited to just hover buttons and photo gallery's thing like that?

Javascript can do all that stuff, in concert with HTML5. Libraries like jquery make it easier.