Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Change text on page based on id??

    Hi,

    I'm trying to add a some text to my site that changes depending on the element id but i think the JS function is incorrect.

    Code:
    <script language="javascript">
    
    function modetext() 
    {
    i = document.getElementById('datamem14').value;
    if (i == 1) 
    {
    document.getElementById('mode') = "Auto"; // not sure if this should have a .txt?? i.e document.getElementById('mode').txt = "Auto";???
    }
    else if (i == 2) 
    {
    document.getElementById('mode') = "Manual"; 
    }
    else
    {
    document.getElementById('mode') = "Off"; 
    }
    }
    
    </script>
    and the HTML bit...

    Code:
    <!-- is this ok???? -->
    
    <input id="mode" class="smalltextbox1"  style="position:absolute; left: 0px; top: 0px;" name="" type="text" value="WAIT" >
    
    <!-- or should this be below?? -->
    
    <h1 id="mode" "></h1>
    
    <!-- i think this is ok -->
    
    <input id="datamem14" class="smalltextbox"  style="position:absolute; left: 0px; top: 25px;" name="" type="text" value="WAIT" >
    any ideas appreciated!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,455
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    If you use
    Code:
    <input id="mode" ...>
    Then you need
    Code:
    document.getElementById('mode').value = "Manual";
    On the other hand, if you use
    Code:
    <h1 id="mode" "></h1>
    then you need
    Code:
    document.getElementById('mode').innerHTML = "Manual";
    Last edited by Old Pedant; 01-09-2013 at 09:21 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    JS Newbie (01-11-2013)

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Brilliant. Thank you very much

    I'll update my stuff and report back!

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    All working , Again many thanks.

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    And a wee bit more help required ;-)

    Evening All,

    Just to go one step further on this.....

    I'm looking to expand this to to maybe 100 to 150 different phrases based in the datamem14 value and was wondering if I can do this either via a lookup table, external .txt file or 'For to Loop'??

    Any recommendations appreciated. .

    Code:
    <script language="javascript">
    
    function modetext() 
    {
    i = document.getElementById('datamem14').value;
    if (i == 1) 
    {
    document.getElementById('mode').value = "Auto"; 
    }
    else if (i == 2) 
    {
    document.getElementById('mode').value = "Manual"; 
    }
    else
    {
    document.getElementById('mode').value = "Off"; 
    }
    }
    
    </script>

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    An array would probably be easiest as then you'd only need a single statement to do the assignment.

    Code:
    <script type="text/javascript">
    
    var vals = ["Off","Auto","Manual"];
    function modetext() 
    {
    i = document.getElementById('datamem14').value;
    if (i < 0 || i >= vals.length) i = 0;
    document.getElementById('mode').value = vals[i]; 
    }
    </script>
    Just add as many entries to the array as you need, the rest of the code will not need to be changed.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    JS Newbie (01-12-2013)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,455
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Lookup table is easiest. External file may be best. You have to decide that part.

    Lookup table is trivial:
    Code:
    var phrases = [
         null, /* 0 is never used */
         "this is phrase 1",
         "this is phrase 2",
         ..
         "this is phrase 140"
    ];
    var chosenPhrase = phrases[document.getElementById('datamem14').value];
    if ( chosenPhrase == null ) chosenPhrase = "That is not a valid selection";
    As an alternative, if you wanted the value from datamem14 to be something other than a number form 1 to 140:
    Code:
    var phrases = {
        "auto" : "This is automatic",
        "manual" : "5 speed on the floor",
        "chain" : "Must be a bicycle",
        ...
    }
    var chosenPhrase = phrases[document.getElementById('datamem14').value];
    if ( chosenPhrase == null ) chosenPhrase = "That is not a valid selection";
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    JS Newbie (01-11-2013)

  • #8
    New Coder
    Join Date
    Dec 2012
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    That's flipping great. Thanks!


  •  

    Posting Permissions

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