Change text on page based on id??

JS Newbie · 01-09-2013, 08:49 PM

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

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

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>

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!