[Solved] Not getting correct javascript [closed]

by


So the mistake you’re making is that if you loop through several things and hardcode the id, several elements get the same id, which is why your increase() function is updating the “wrong” elements.

So you need to give each item in the loop a unique id. One way is to append an id from the resultSet to the id of the HTML element.

<div class="col-md-6 pull-right">
    <button type="button" class="btn btn-primary btn-box-tool pull-right" onclick="increase()">
        <i class="fa fa-plus"></i>
    </button>
    <div class="col-xs-3 pull-right">
        <input type="text" id="quantity<%= resultSet.id %>" class="form-control input-sm" value="<%= resultSet.getInt(3) %>" onchange="increase('quantity<%= resultSet.id %>', 'price<%= resultSet.id %>', 'baseprice<%= resultSet.id %>')">
    </div>
    <button type="button" class="btn btn-primary btn-box-tool pull-right">
        <i class="fa fa-minus"></i>
    </button>
    <br>
    <br>
    <div class="input-group pull-right col-sm-3">
        <span class="input-group-addon">
            <i class="fa fa-rupee"></i>
        </span>
        <input type="hidden" id="baseprice<%= resultSet.id %>" value="<%= resultSet.getInt(3) %>">
        <input type="text" id="price<%= resultSet.id %>" class="form-control" value="<%= resultSet.getInt(3) %>"  disabled>
    </div>
</div>

The onchange should fire when the quantity is changed, and the function now receives a pair of specific fields that have unique ids. The function then just needs to do the math and make the updates.

<script type="text/javascript">
    function increase(qelement, pelement, bpelement){
        document.getElementById(qelement).value += 1;
        var dishQuantity = document.getElementById(qelement).value;

        var basePrice = document.getElementById(bpelement).value;
        document.getElementById(pelement).value *= dishQuantity;
    }
</script>

That just increments the value of the quantity field, and multiplies the base price by the new quantity.

This is not a copy/paste solution. There may be some JavaScript issues since I so often use jQuery. This is just a rough mockup of one way to achieve what you’re attempting. There are more elegant ways, but this is probably the quickest to get something working. Once it is, you should use this as an opportunity to learn more about how JavaScript interacts with the DOM, and possibly even eventListeners.

10

solved Not getting correct javascript [closed]