JavaScript putting complex vars into text fields

**liplabz** · 06-20-2012, 02:34 PM

I don't know if complex is the right word.. But the issue I'm getting is I'm trying to get the text box at the bottom of the page "FlavourOne" to show the variable "text" rather then the name of the variable.

Here's the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lip Labz Lip Candy Station</title>
<script type="application/ecmascript">

var x = 0;
var y =0;
var inc = 150;
var speed = 100;
var speedtest;
var flavourAselect
var flavourAnumber = 2;
var fla1 = "Strawberry";
var fla2 = "Banana";
var fla3 = "Mango";

function Init()
{
document.getElementById('img1').style.left = x + 'px';
document.getElementById('img1').style.top = y + 'px';
}

function moveUp(){
y -= inc;
document.getElementById('img1').style.top = y + 'px';
flavourAnumber++
flavourAselect = ('fla' + flavourAnumber);
document.Selection.FlavourOne.value = flavourAselect;

}

function moveDown(){
y += inc;
document.getElementById('img1').style.top = y + 'px';
flavourAnumber--
flavourAselect = ('fla' + flavourAnumber);
document.Selection.FlavourOne.value = flavourAselect;
}
</script>

<style>
#flavour1
{
width: 150px;
height: 450px;
position: relative;
margin: 20px auto 0px auto;
border: 0px outset #000;
overflow: hidden;
}

.image
{
position: absolute;
z-index:100;
}
</style>
</head>

<body onload="javascript:Init()">
<div id="flavour1"><img class="image" id="img1" src="flavour1.jpg"/></div>

<center>
<img src="arrowup.jpg" value="UpFlavour1" height="150" width="150" onMouseDown="javascript:moveUp()"/>
<br />
<img src="arrowdown.jpg" value="DownFlavour1" height="150" width="150" onMouseDown="javascript:moveDown()"/>
<form name="Selection">
Flavour One <input type="text" name="FlavourOne" value="Banana" size="4"> <br>
</form>
</center>

</body>
</html>

**Padonak** · 06-20-2012, 03:22 PM

in Opera, FF, IE and Safari it does show "Banana"... banana is not good or what?

was just kidding )) try this:

Code:

function moveUp(){
 y -= inc;
 document.getElementById('img1').style.top = y + 'px';
 flavourAnumber++
 flavourAselect = eval('fla' + flavourAnumber);
 document.Selection.FlavourOne.value = flavourAselect;

 }

 function moveDown(){
 y += inc;
 document.getElementById('img1').style.top = y + 'px';
 flavourAnumber--
 flavourAselect = eval('fla' + flavourAnumber);
 document.Selection.FlavourOne.value = flavourAselect;
 }