How do you set values from textboxes to join and form an iframe URL?

I've been trying to find a way where there are 3 textboxes, a button and a iframe which can join the values of the 3 textboxes to make a URL for the iframe. When a user enters text in each textbox and clicks the button, the iframe will change url source to what the values of the textbox are.

This is the script i'm still stuck with:

<script type="text/javascript">
var ray={
changeIframe:function(inp1,inp2,inp3,iframeEl)
	{
		this.returnID(iframeEl).setAttribute('src',this.returnID(inp1).value);
                this.returnID(iframeEl).setAttribute('src',this.returnID(inp2).value);
	 	this.returnID(iframeEl).setAttribute('src',this.returnID(inp3).value);
	},
returnID:function(el)
	{
		return document.getElementById(el);
	}
}
</script>
<b>Today's Quiz</b><br>
Your age: <input type='text' id='age' value='' /><br>
Favorite color: <input type='text' id='color' value='' /><br>
Favorite number: <input type='text' id='number' value='' /><br>
<button onclick="ray.changeIframe('age','color','number','myframe');">Show Results</button><br><br>
<iframe src="/instructions.htm" id="myframe" width="100%" height="100%"></iframe>

Code (markup):

for example, if the user writes a age of 16, color of blue and number of 3, the iframe's url will go to "/16blue3.htm" which looks weird but it's what i'm trying to get.

Also, the iframes original source "/instructions.htm" is just simple instructions of the short quiz.

 

This should work for ya:

<script type="text/javascript">
var ray={
changeIframe:function(inp1,inp2,inp3,iframeEl)
	{
		var s = "";
		s += this.returnID(inp1).value;
                s += this.returnID(inp2).value;
	 	s += this.returnID(inp3).value;
		this.returnID(iframeEl).setAttribute("src",s + ".htm");
	},
returnID:function(el)
	{
		return document.getElementById(el);
	}
}
</script>
<b>Today's Quiz</b><br>
Your age: <input type='text' id='age' value='' /><br>
Favorite color: <input type='text' id='color' value='' /><br>
Favorite number: <input type='text' id='number' value='' /><br>
<button onclick="ray.changeIframe('age','color','number','myframe');">Show Results</button><br><br>
<iframe src="/instructions.htm" id="myframe" width="100%" height="100%"></iframe>

Code (markup):

Everytime you were setting the src attribute your were setting it a new value, not appending to the current value. The += operator will do this easily for you.
For example:
a = 20
a += 1
is the same as
a = 20
a = a + 1