hemir hemir - 11 months ago 41
Ajax Question

innerHTML update value but HTML rendering isn't changed

I misunderstand a JS Behavior, I want to update a td content in my HTML. So I created an anchor with onclick attribute.

When I execute the function

, the content are updated in "back end" (means in javascript side, not server side) but not in front. I don't understand why.


td :

<td class="data" id="<?php echo 'data_'.$_data['code']; ?>">A value</td>

Js :

document.getElementById("data_sku").innerHTML = "myNewValue";

After this, my HTML rendering doesn't change but when I use
, I get "myNewValue";

I'm not comfortable with JS/Ajax behavior, just I don't understand why in this case, it's not working but in some other cases, it works.

EDIT : I'm sorry for misprints, I didn't copy paste, only writing error here, not in my code, so that wasn't the solution.

Answer Source
document.getElementByID("data_sku").innerHTML = "myNewValue";
//                    ^ If this is a misprint...
//                                    ^ and this is a misprint too

(otherwise I have no ideas how it can work at all),

I can assume, that you have multiple elements with the same id in the document.

In such case you are changing and getting in the script only first of them, but an the screen you can be looking on the other one, so dee no changes observable from script.

document.getElementById("data_sku").innerHTML = "New content";
<div id="data_sku" style="display: none;">First</div>
<div id="data_sku">Second</div>