Question

I have an INPUT text field, a DIV and an IMG.

The IMG has an onClick event:

• reads the INPUT field’s current value,

• increase it with 1,

• does a calculation with the increased value,

• writes the result into the DIV.

The value of the INPUT is always increased the right way and the DIV’s innerHTML always gets the right result but nothing changes in display. The displayed numbers always stay the same even if everything is done correctly in the “background”.

The funny thing in it that I used the same operation at another place on the same site and there everything works and displays perfectly.

Here is the function:

    function priceCalculator(max_amound,price,id)
    {
        var amound = parseInt(document.getElementById('sell_amound_' + id).value);
        max_amound = parseInt(max_amound);
        if (amound < max_amound)
        {
            amound = amound + 1;
            document.getElementById('sell_amound_' + id).value = amound;
            var item_value = amound * price;
            document.getElementById('price_' + id).innerHTML = item_value;

            alert(document.getElementById('sell_amound_' + id).value + ',' + document.getElementById('price_' + id).innerHTML);
        }
    }

And here are the elements within a PHP code:

<img src="images/plus.png" onclick="priceCalculator(\''.$bag_items[$i]['amound'].'\',\''.$bag_items[$i]['infos']['price'].'\',\''.$i.'\')" />
<form>
    <input id="sell_amound_'.$i.'" type="text" readonly value="1" />
</form>
<div id="price_'.$i.'">'.$bag_items[$i]['infos']['price'].'</div>

The alert at the end of the function shows the right values but the displayed values stay the same.

It’s a really simple action… What could be the problem?

EDIT:

After loading the source code of an “item” looks like this (these parts are created with loops from database, and, of course, I removed the irrelevant styling from the code and those many divs are there because of them):

<td>
    <img id="item_pic_3" src="images/potions/3.png" onClick="shopSellInfo('3')" />
    <div>26</div>
    <form>
        <input type="hidden" id="selected_item" value="" />
    </form>
    <div id="item_3" style="display: none;">
        <span>blah...</span><br />
        <span>
            <br />blah...<br /><br />
            <div>
                <div>
                    <img src="images/increase.png" onclick="priceCalculator('26','10','3')" /><br />
                </div>
            <div>
            <form>
                <input id="sell_amound_3" type="text" readonly value="1" />
            </form>
            /26
            </div>
        </div>
        <br />
        <div id="price_3">10</div>
        </span>
    </div>
</td>

shopSellInfo(‘3’) is the function that makes item_3 displayed at the right place.

Answer 1

I solved the problem!

The problem was that the IDs appeared at another place, too, so the function didn’t know where to change the values because of the duplicated IDs.

Anyway, thanks your answers and will for help!