Javascript innerHTML 更改不起作用

Question

我不想带着看似简单的问题来这里解决，但我很困惑，并且尝试了多种解决方案。

我有一个复选框，因此当单击它们时，它们将运行一个函数来更改购物车的总价，但是我什至无法在文本框上进行简单的 innerHTML 更改，以通过 onclick 事件显示总价.

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>

如您所见，在 javascript 运行之前，所有元素都已加载到 DOM 中。

JS:

function price_calc(price, chkbx) {

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

}

感谢您提前提供任何提示。

Answer 1

“总计”是一个字段。因此，尝试 document.getElementById('total').value

innerHTML 适用于非字段元素，如 span、div 等。