www.webdeveloper.com
Results 1 to 4 of 4

Thread: JavaScript putting complex vars into text fields

  1. #1
    Join Date
    Jun 2012
    Posts
    4

    Cool JavaScript putting complex vars into text fields

    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>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    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;
     }
    Last edited by Padonak; 06-20-2012 at 04:26 PM.

  3. #3
    Join Date
    Jun 2012
    Posts
    4
    Thanks! It worked - what four missing letters will do to a bunch of code.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    sometimes just one missing dot, comma or quote can ruin several weeks of coding ))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles