innerHTML not working

[unplugged_web]

Okay now I know I'm definately doing something wrong here. I've been trying for days to get this to work, but for some reason it just won't I've got a series of forms that are show at the user progresses. The first thing somebody selects is the country. Last of all I want to country to to shown later down on the page. I've used:

<script src="js/jquery.js" type="text/javascript"></script><script>var el = document.getElementById("preferred_city");el.innerHTML="";</script>  </head>

at the top, then the country part of the form is:

<form action="testcode.php" method="post">	  		<select style="position: relative" id="preferred_city" name="preferred_city" onchange="city_dropdown_changed(this)">			<option value="New York">New York</option><option value="London">London</option><option value="Paris">Paris</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option>

further down on the page I'm using:

<span id="preferred_city" style="margin-bottom: 10px; font-size: 32px;"></span>

but nothing every shows there. No matter what I do I can't get it to work.Thanks for your help

[chibineku]

Well, there's no function called city_dropdown_changed(), so how do you expect the span to be updated if there's no function to do it? Also, having a bit of JavaScript that immediately makes the span innerHTML = '' isn't going to work if the JavaScript appears above the element you wish to target, as it doesn't yet exist in the DOM when you try to make a reference to it. You should also use the canonical <script type="text/javascript"> opening script tag, and not just <script>.Also, you have two elements with id preferred_city - ids are unique, so you need to call one of them something else.

[unplugged_web]

Well, there's no function called city_dropdown_changed(), so how do you expect the span to be updated if there's no function to do it? Also, having a bit of JavaScript that immediately makes the span innerHTML = '' isn't going to work if the JavaScript appears above the element you wish to target, as it doesn't yet exist in the DOM when you try to make a reference to it. You should also use the canonical <script type="text/javascript"> opening script tag, and not just <script>.Also, you have two elements with id preferred_city - ids are unique, so you need to call one of them something else.

Sorry my mistake I pasted in the wrong bit of code. The correct code is:

<script>var city_dropdown_changed = function(sel_element){	 document.getElementById('preferred_city').innerHTML = .val();}</script>

I also moved it to just above the span id <span id="preferred_city"> but that didn't work either.

[chibineku]

Okay, again, use the proper script tags. Assigning the function to a variable like that makes the function fire straight away, which you don't want. Try:

<script type="text/javascript">function city_dropdown_changed(sel) {var index = sel.selectedIndex;var city = sel.options[index].value;el = document.getElementById["preferred_city"];el.innerHTML = city;}</script>

But as I said you need to change the id of the select to something else for this to work - two elements with the same id won't do what you expect.

[unplugged_web]

Okay, again, use the proper script tags. Assigning the function to a variable like that makes the function fire straight away, which you don't want. Try:

<script type="text/javascript">function city_dropdown_changed(sel) {var index = sel.selectedIndex;var city = sel.options[index].value;el = document.getElementById["preferred_city"];el.innerHTML = city;}</script>

But as I said you need to change the id of the select to something else for this to work - two elements with the same id won't do what you expect.

I changed the code to that, but again it didn't work. I'm not sure what you mean about the id being the same twice - I thought that the span id had to be the same as the one in the function (so also being the same as the one in the form)? Also should I put the code just before the span tag?

[chibineku]

It's tidiest to put all your scripts in the head tags, at the top of the page. I just meant that if you try to reference an element in the head it has to be be in a function that will fire after the page has loaded, otherwise the element won't exist yet.You should never have two elements with the same id. Your select should have an id, and the span a different one. The span id is needed inside the script to find it on the page and to change it's innerHTML. If you have to elements with the same id, the script might try to change the innerHTML of the select element or something else unexpected. The id of the select is not important in this script, because when you call the function that updates the span with the newly selected it, you pass a reference to it with the use of the word 'this'. When the function is called, the reference to the select is stored in the variable sel (the bit between the brackets). We then create a reference to the span with document.getElementById('preferred_city'). So, try changing the select name to city_select or something and give it another shot.

[unplugged_web]

It's tidiest to put all your scripts in the head tags, at the top of the page. I just meant that if you try to reference an element in the head it has to be be in a function that will fire after the page has loaded, otherwise the element won't exist yet.You should never have to elements with the same id. Your select should have an id, and the span a different one. The span id is needed inside the script to find it on the page and to change it's innerHTML. If you have to elements with the same id, the script might try to change the innerHTML of the select element or something else unexpected. The id of the select is not important in this script, because when you call the function that updates the span with the newly selected it, you pass a reference to it with the use of the word 'this'. When the function is called, the reference to the select is stored in the variable sel (the bit between the brackets). We then create a reference to the span with document.getElementById('preferred_city'). So, try changing the select name to city_select or something and give it another shot.

:) :)Still no luck. I've now got, this in the <head></head>

  <script type="text/javascript">function city_dropdown_changed(sel) {var index = sel.selectedIndex;var city = sel.options[index].value;el = document.getElementById["city_select"];el.innerHTML = city;}</script>

the form is:

<select style="position: relative" id="preferred_city" name="preferred_city" onchange="city_dropdown_changed(this)">

and the span is:

<span id="city_select" style="margin-bottom: 10px; font-size: 32px;"></span>

I don't know if this means anything, but when I tested it in FireFox/FireBug I got this error:

el is undefined el.innerHTML = city;

[chibineku]

My mistake: the line that says:

el = document.getElementById["city_select"];

should be brackets and not square brackets:

el = document.getElementById("city_select");

[unplugged_web]

My mistake: the line that says:

el = document.getElementById["city_select"];

should be brackets and not square brackets:

el = document.getElementById("city_select");

It still isn't working :)I didn't get any errors this time so it's a start, but it's still not working though

[chibineku]

I tested it in w3school's tryit editor. Here is the code:

<html><head><script type="text/javascript">function city_dropdown_changed(sel) {var index = sel.selectedIndex;var city = sel.options[index].value;el = document.getElementById("city_select");el.innerHTML = city;}</script></head><body><form action="testcode.php" method="post">	  		<select style="position: relative" id="preferred_city" name="preferred_city" onchange="city_dropdown_changed(this)">			<option value="New York">New York</option><option value="London">London</option><option value="Paris">Paris</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option></select></form><span id="city_select" style="margin-bottom: 10px; font-size: 32px;"></span></body></html>

That all works, anyway.

[unplugged_web]

I tested it in w3school's tryit editor. Here is the code:

<html><head><script type="text/javascript">function city_dropdown_changed(sel) {var index = sel.selectedIndex;var city = sel.options[index].value;el = document.getElementById("city_select");el.innerHTML = city;}</script></head><body><form action="testcode.php" method="post">	  		<select style="position: relative" id="preferred_city" name="preferred_city" onchange="city_dropdown_changed(this)">			<option value="New York">New York</option><option value="London">London</option><option value="Paris">Paris</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option></select></form><span id="city_select" style="margin-bottom: 10px; font-size: 32px;"></span></body></html>

That all works, anyway.

I'm not sure what's going wrong here. I tested to code too and that worked fine, but it just isn't working on the site. Here's the file I'm working onThanks for helping me try to get this working

[chibineku]

It's working just fine - the span with id city_select is hidden, but if you view the source in firebug and choose something from the select, it changes the span contents to match.

[unplugged_web]

It's working just fine - the span with id city_select is hidden, but if you view the source in firebug and choose something from the select, it changes the span contents to match.

Okay now I've really puzzled. After doing what you said it worked perfectly in FF. I think quit FF and tried again, as well as trying in Safari and neither worked., is there anyway I can make sure it always works in all browsers?

[chibineku]

It works in Safari, too, you just need to reopen the web inspector.

[unplugged_web]

It works in Safari, too, you just need to reopen the web inspector.

Will it work if somebody doesn't open that? Say somebody else navigates to the page and goes through the form will it work for them?

[chibineku]

Yes, of course. The thing is, what use is a span that mirrors the user's selection, especially if it's hidden? I don't understand the point, really. They can see what they selected, and it won't be any advantage when you're processing the form in a server side language.

[unplugged_web]

Yes, of course. The thing is, what use is a span that mirrors the user's selection, especially if it's hidden? I don't understand the point, really. They can see what they selected, and it won't be any advantage when you're processing the form in a server side language.

No I agree with you, but when they get to the end they won't be able to see which country the selected. I haven't finished building it yet, but the next stage is for the text to say please confirm you selected whatever country, if yes the press submit, if not the go back.Also long as that bit works though I'm happy and can sort other bits out later. Thanks for your help

[chibineku]

Okay dokies, though most people will be able to remember what country they're in by the end of a form.You're welcome.

[unplugged_web]

Okay dokies, though most people will be able to remember what country they're in by the end of a form.You're welcome.

Thanks! Now I can show the bosses

[chibineku]

Bosses ######.

[thescientist]

so when you pass the form values, using a server side language, won't all those values be present? If you get their values in the form, then all you need to is just go look to the $_POST/$_GET array, no?