CodingForums.com - Change text on page based on id??

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Change text on page based on id?? (http://www.codingforums.com/showthread.php?t=285536)

JS Newbie

01-09-2013 08:49 PM

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!

Old Pedant

01-09-2013 09:18 PM

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";

JS Newbie

01-09-2013 09:26 PM

Brilliant. Thank you very much :thumbsup:

I'll update my stuff and report back!

JS Newbie

01-09-2013 10:12 PM

All working :), Again many thanks.

JS Newbie

01-11-2013 11:08 PM

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. :thumbsup:.

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>

felgall

01-11-2013 11:32 PM

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.

Old Pedant

01-11-2013 11:39 PM

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";

JS Newbie

01-11-2013 11:41 PM

That's flipping great. Thanks!:D

All times are GMT +1. The time now is 02:13 PM.