javascript - Uncaught ReferenceError: Function is not defined at HTMLButtonElement.onclick

I have one issue.

I have function add() on buttons with number parameter. So when I click button in console there error Uncaught ReferenceError: add is not defined at HTMLButtonElement.onclick

This is my code below:

document.addEventListener("DOMContentLoaded", function() {
console.log("Script connected correctly");

function add(num) {
    console.log(num)
}
});

.calculator{
    display: flex;
}
button:not(.big):not(.button-c) {
    width: 38.5px;
    height: 38px;
    font-size: 16px; 
    padding: 5px;  
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}
#calc-input{
    height: 25px;
}
td[rowspan="2"] button {
    width: 38.5px;  
    height: 79px;
    font-size: 16px;
    padding: 5px;  
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}
td[colspan="2"] button {
    height: 38px;  
    width: 100%;
    font-size: 16px; 
    padding: 5px;  
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}
.button-c{
    background-color: rgb(255, 51, 0);
    width: 38.5px;
    height: 38px;
    font-size: 16px; 
    padding: 5px;  
    border: none;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <div class="calculator">
        <input add="text" id="calc-input">
    </div>
    <table>
        <tr>
            <td><button class="button-c">C</button></td>
            <td><button><i class="fas fa-backspace"></i></button></td>
            <td><button>/</button></td>
            <td><button>*</button></td>
        </tr>
        <tr>
            <td><button onclick="add(7)">7</button></td>
            <td><button onclick="add(8)">8</button></td>
            <td><button onclick="add(9)">9</button></td>
            <td><button>-</button></td>
        </tr>
        <tr>
            <td><button onclick="add(4)">4</button></td>
            <td><button onclick="add(5)">5</button></td>
            <td><button onclick="add(6)">6</button></td>
            <td><button>+</button></td>
        </tr>
        <tr>
            
            <td><button onclick="add(1)">1</button></td>
            <td><button onclick="add(2)">2</button></td>
            <td><button onclick="add(3)">3</button></td>
            <td rowspan="2"><button class="big">=</button></td>
        </tr>
        <tr>
            <td colspan="2"><button class="big" onclick="add(0)">0</button></td>
            <td><button>.</button></td>
        </tr>
    </table>

</body>
</html>

I have one issue.

I have function add() on buttons with number parameter. So when I click button in console there error Uncaught ReferenceError: add is not defined at HTMLButtonElement.onclick

This is my code below:

document.addEventListener("DOMContentLoaded", function() {
console.log("Script connected correctly");

function add(num) {
    console.log(num)
}
});

.calculator{
    display: flex;
}
button:not(.big):not(.button-c) {
    width: 38.5px;
    height: 38px;
    font-size: 16px; 
    padding: 5px;  
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}
#calc-input{
    height: 25px;
}
td[rowspan="2"] button {
    width: 38.5px;  
    height: 79px;
    font-size: 16px;
    padding: 5px;  
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}
td[colspan="2"] button {
    height: 38px;  
    width: 100%;
    font-size: 16px; 
    padding: 5px;  
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}
.button-c{
    background-color: rgb(255, 51, 0);
    width: 38.5px;
    height: 38px;
    font-size: 16px; 
    padding: 5px;  
    border: none;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <div class="calculator">
        <input add="text" id="calc-input">
    </div>
    <table>
        <tr>
            <td><button class="button-c">C</button></td>
            <td><button><i class="fas fa-backspace"></i></button></td>
            <td><button>/</button></td>
            <td><button>*</button></td>
        </tr>
        <tr>
            <td><button onclick="add(7)">7</button></td>
            <td><button onclick="add(8)">8</button></td>
            <td><button onclick="add(9)">9</button></td>
            <td><button>-</button></td>
        </tr>
        <tr>
            <td><button onclick="add(4)">4</button></td>
            <td><button onclick="add(5)">5</button></td>
            <td><button onclick="add(6)">6</button></td>
            <td><button>+</button></td>
        </tr>
        <tr>
            
            <td><button onclick="add(1)">1</button></td>
            <td><button onclick="add(2)">2</button></td>
            <td><button onclick="add(3)">3</button></td>
            <td rowspan="2"><button class="big">=</button></td>
        </tr>
        <tr>
            <td colspan="2"><button class="big" onclick="add(0)">0</button></td>
            <td><button>.</button></td>
        </tr>
    </table>

</body>
</html>

What I have tried:

1)Placed the tag at the bottom of the body (just before the closing tag) to make sure the HTML elements are loaded before the JavaScript is executed. 2)Checked the browser console, and confirmed that console.log("Script connected correctly") is printed, indicating the script is loaded. 3)Tried other solutions such as using DOMContentLoaded event, but the error persists.

What I expect: I expect that when I click a number button (e.g., 7), the type() function should be called, and the number should be appended to the input field.

Can anyone help me understand why type() is not recognized as a function, even though it's clearly defined in the external script.js file?

Share Improve this question edited Nov 19, 2024 at 6:46 Mehdi 1,7702 gold badges6 silver badges18 bronze badges asked Nov 18, 2024 at 18:49 ILoveWalking Walking 1

2 Your function declaration for add() is nested inside the "ready" event handler. Therefore it is not visible globally. – Pointy Commented Nov 18, 2024 at 18:51
2 Why are you defining your function within the DomContentLoaded listener? – mykaf Commented Nov 18, 2024 at 18:51
type() was previous function name of add() – ILoveWalking Walking Commented Nov 18, 2024 at 18:52
If you have your <script> element just prior to the closing body tag, you don't need to set up the DOMContentLoaded event handler because by the time the HTML parser reaches your script element (which is HTML), all your DOM content will have been parsed into memory. – Scott Marcus Commented Nov 18, 2024 at 20:34

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Your js only needs to be:

function add(num) {console.log(num)}

Waiting for dom load doesn't seem relevant as the function is only called after the buttons have become visible to the user.

I have tested it & it runs very nicely.

Programmer puzzle solving

javascript - Uncaught ReferenceError: Function is not defined at HTMLButtonElement.onclick - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)