newbie: how to change webpage element dynamically

[thebiggestbangtheory]

Hello all,
I am a newbie to JS and am trying to do a small project to
begin with. I am getting to grips with JS and have made some progress
but am stuck now. Any advice/pointers/snippets will be greatly
appreciated.

The task: I have an xml file, there is a portion in the file which
looks like

<myscript add_to_page="true" script_id="10" license="false"
rating="works">
<value>class1</value>

I need to come up with a way so that when this xml file is opened up
in a browser, I can see "class1" in the form of an entry in a drop
down menu (other entries are class2, class3 etc..) and when I select
say class2, the text in between the value tags must change to class2
too.

What have I done: I have written a shell script which takes the xml
file as input and inserts some code into it and invokes a browser to
display it. The code looks like

<myscript add_to_page="true" script_id="10" license="false"
rating="works">
<value>class1</value>
<form>
test menu:<br/>
<select id="60">
<option>class1</option>
<option>class2</option>
</select>
<input type="button" onclick="changeselection()" value="r u sure">
<input type="text" id="result" size="20">
</form>

and the associated JS

<script type="text/javascript">
function changeselection()
{
var no=document.getElementById("60");
var option=no.options[no.selectedIndex].text;
var txt=document.getElementById("result").value;
document.getElementById("result").value=txt;
}
</script>

This code will let me display a drop down menu, and if I select
something and click on the button it shows me what I have
selected...ultra-basic stuff. Can someone please let me know how I can
take the selected value and change the text in the value tags. I think
I can do document.getelementbyid("id-for-value-tag").innerHTML=txt but
the problem is that the value tags don't have an ID.

There are multiple <value> tags within the xml doc.

Thanks in advance

 

[Martin Honnen]

This code will let me display a drop down menu, and if I select
something and click on the button it shows me what I have
selected...ultra-basic stuff. Can someone please let me know how I can
take the selected value and change the text in the value tags. I think
I can do document.getelementbyid("id-for-value-tag").innerHTML=txt but
the problem is that the value tags don't have an ID.

There are multiple <value> tags within the xml doc.

It seems you are sending a mix of XML and HTML markup to the browser as
text/html and expect to script both as HTML (as you want to use
innerHTML). There is no well-defined behaviour for mixing XML and HTML
in text/html content, unless you restrict yourself to IE/Win and use XML
data islands.

If you want to use a clean approach then separate the XML from the HTML
and use different files where you would then use XMLHttpRequest to load
the XML and manipulate responseXML as needed with the XML DOM.

 

[thebiggestbangtheory]

It seems you are sending a mix of XML and HTML markup to the browser as
text/html and expect to script both as HTML (as you want to use
innerHTML). There is no well-defined behaviour for mixing XML and HTML
in text/html content, unless you restrict yourself to IE/Win and use XML
  data islands.

If you want to use a clean approach then separate the XML from the HTML
and use different files where you would then use XMLHttpRequest to load
the XML and manipulate responseXML as needed with the XML DOM.

Thanks I will try this out