CODEWITHSUNDEEP
javascripthtml
Charlieabee
Charlieabee

Reputation: 89

Javascript innerHTML change not working

I hate to come here with what is seemingly a simple issue to solve but I'm stumped, and have tried multiple solutions.

I have a checkboxes, so that when clicked they will run a function that will change the total price of the cart however I can't even get a simple innerHTML change on the textbox that will display the total price with the onclick event.

HTML/php:

<?php

....
....
echo "<span class='chosen'><input type='checkbox' name='event[]'
value='{$event['eventID']}' title='{$event['eventPrice']}'
onclick='price_calc(this.title, this)'/></span>"

?>

<div id="checkCost">
    <h2>Total cost</h2>
    Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
</div>
....
....
<script src="bookingJS.js"></script>
</body>

As you can see the elements are all loaded into the DOM before the javascript runs.

JS:

function price_calc(price, chkbx) {

    document.getElementById('total').innerHTML = 'Hello';
    alert(document.getElementById('total').innerHTML);

}

Thank you for any tips in advance.

Upvotes: 2

Views: 655

Answers (3)

Abdullah Obaidullah
Abdullah Obaidullah

Reputation: 79

try this:

document.getElementById('total').value="Hello";
alert(document.getElementById('total').value);

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

To set a input[type=text] value, you use .value not innerHTML:

function price_calc(price, chkbx) {
    document.getElementById('total').value = 'Hello';
    alert(document.getElementById('total').value);
}

Upvotes: 4

vivek_nk
vivek_nk

Reputation: 1600

"total" is a field.So, try document.getElementById('total').value

innerHTML is for non field elements like span,div etc..

Upvotes: 4

Related Questions