CODEWITHSUNDEEP
javascript
theStandard
theStandard

Reputation: 212

Javascript onClick functions not working

I've got this money management system that I'm trying to write, and It's not working correctly. The money is printed in the top right, but when I click on the buttons to change the value, it does not work.

HTML:

<div id="content">
<div id="money_count">$$MONEY$$</div>
<br>
<div id="items">
    <table>
        <tr>
            <td><a href="#">$12.19</a>
            </td>
            <td><a href="#">$15.00</a>
            </td>
        </tr>
        <tr>
            <td><a href="#">$24.99</a>
            </td>
            <td><a href="#">$35.50</a>
            </td>
        </tr>
    </table>
</div>
</div>

CSS:

#content {
font-family:Helvetica;
width:500px;
box-shadow:0px 0px 10px 0px #AAA;
top:30px;
margin:0px auto;
margin-top:40px;
padding:10px 20px;
border:dashed 2px #888;
}
#money_count {
    color:#0F0;
    padding:5px;
    text-shadow:0px 0px 1px #333;
    margin-right:0;
    margin-left:auto;
    margin-top:6px;
    width:100px;
    text-align:center;
}

table, th td {
    border:ridge 3px #AAA;
    box-shadow:0px 0px 6px 0px #AAA;
}
table {
    width:400px;
    margin-left:50px;
    margin-top:20px;
    margin-bottom:50px;
}
td {
    padding:4px;
    background-color:#CCC;
    text-align:center;
}
a, td {
    color:black;
    text-decoration:none;
    width:auto;
    height:100px;
}

Javascript:

var money = 500.27 - 0.27;
var moneyElement = document.getElementById("money_count");
moneyElement.innerHTML = money;

function updateMoney() {
    moneyElement.innerHTML = money;
}

function subtractMoney(amount) {
    money -= amount;
    updateMoney();
}

any ideas as to why this doesn't update the money value in the top right?

Upvotes: 0

Views: 389

Answers (1)

adrianp
adrianp

Reputation: 2551

You need to bind the event listeners to the elements:

document.getElementById('button_id').addEventListener('onclick', updateMoney, false)

Upvotes: 1

Related Questions