I can't get my html to call my js

Question

Can anyone help me? I am trying to get it to call the click() function when you click the button but nothing happens. The alerts are for testing purposes, and the js will be exported to an external js when I can get it working. Thanks =)

    <!DOCTYPE html />

<html>
    <head>
        <title>Idle Numbers</title>

        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
        <h1>Idle Numbers</h1>
        <p>Number Bank: <span id="numberBank">0</span> | Numbers per Second: <span id="NpS">0</span> | Numbers per Click: <span id="NpC">1</span></p>
        <button onclick="click()">Click me</button>
        <table id="shop">
            <tr>
                <th colspan="4">Shop</th>
            </tr>
            <tr>
                <td><p>Ones Place <button onclick="onesPurchase" id="buyOnes">25</button></p></td>
                <td><p>Tens Place <button onclick="tensPurchase" value="100" id="buyTens">100</button></p></td>
                <td><p>Hundreds Place <button onclick="hundredsPurchase"  id="buyHundres">250</button></p></td>
                <td><p>Thousands Place <button onclick="ThousandsPurchase" id="buyThousands">2500</button></p></td>
            </tr>
        </table>
        <script type="text/javascript">
            var nB, NpS, onesValue, tensValue, hundredsValue, thousandsValue;
            var NpC = 1;

            function click(){
                alert("numberBank");
                numberBank = nB + NpC;
                alert("numberBank");
                document.getElementById("numberBank").innerHTML = nB;
            }
        </script>
    </body>
</html>

`onclick="functionName()"` Look at the developer console for errors. — epascarello, Oct 28 '15 at 20:22

score 0 · Answer 1 · edited May 23 '17 at 12:14

You do not have defined functions for onesPurchase, tensPurchase, etc. where you have the onclick handlers initialized. If you are trying to bind the click() function to the onclick handlers, you would just have

<td><p>Ones Place <button onclick="click();" id="buyOnes">25</button></p></td>

See: Using an html button to call a javascript function

If you want to change how the click function acts, you'd probably want some sort of argument defined where you created the click() function that determines which purchase you are calculating.

shredMER · Accepted Answer · 2015-10-28T21:10:31.063

This problem is due to naming your function as click(). This function name is assigned to the button by default to handle the mouseclick event. It is best to use function names that are more descriptive anyways.

Simply changing to calculate() works:

HTML

<button onClick="calculate()">Click me</button>

JS

 function calculate() {
                alert("numberBank");
                numberBank = nB + NpC;
                alert("numberBank");
                document.getElementById("numberBank").innerHTML = nB;
            }

score 0 · Answer 3 · answered Oct 28 '15 at 20:48

0

.click() is a built-in function in javascript.

You can override the normal function by changing

function click(){

to

click()=function(){

I don't recommend it though. Best to follow shredMER's answer and change the function name.

answered Oct 28 '15 at 20:48

CasualProgrammer

1
1

score 0 · Answer 4 · answered Oct 28 '15 at 20:50

The button element already has a click() method which simulates a mouse-click on the button element. The button element's click() method will get called instead of your click() method. As shreadMER suggests, rename your click() method to something else. For example...

HTML

<button onclick="btn_click()">Click me</button>

JS

function btn_click() {
    alert("numberBank");
    numberBank = nB + NpC;
    alert("numberBank");
    document.getElementById("numberBank").innerHTML = nB;
}

I can't get my html to call my js

4 Answers4