I can't connect my javascript file with the html file can someone help me?

Question

I'm trying to use onclick to connect the function click and read the number clicked and place it in the input boxes.

Calculator HTML file:

 <!DOCTYPE html>

    <head>
        <title>A javascript calculator</title>
        <link rel="stylesheet" type="text/css" href="C:\Users\W-book\Downloads\vscode\calculator\calculator.css">
        <script src="calculator.js" type="text/javascript"></script>
    </head>

<body class="body">


    <div class="calculator">
        <div class="row">
            <div class="box" onclick="click(1, 'left')">1</div>
            <div class="box" onclick="click(2, 'left')">2</div>
            <div class="box" onclick="click(3, 'left')">3</div>
        </div>
        <div class="row">
            <div class="box" onclick="click(4, 'left')">4</div>
            <div class="box" onclick="click(5, 'left')">5</div>
            <div class="box" onclick="click(6, 'left')">6</div>
        </div>
        <div class="row">
            <div class="box" onclick="click(7, 'left')">7</div>
            <div class="box" onclick="click(8, 'left')">8</div>
            <div class="box" onclick="click(9, 'left')">9</div>
        </div>
        <div class="row">
            <div class="box" onclick="click(0, 'left')">0</div>
            <div class="clear" onclick="click('c', 'left')">C</div>
        </div>
    </div>

    <div class="space"></div>

    <div class="calculator">
        <div class="row">
            <div class="box" onclick="click(1, 'left')">1</div>
            <div class="box" onclick="click(2, 'left')">2</div>
            <div class="box" onclick="click(3, 'left')">3</div>
        </div>
        <div class="row">
            <div class="box" onclick="click(4, 'left')">4</div>
            <div class="box" onclick="click(5, 'left')">5</div>
            <div class="box" onclick="click(6, 'left')">6</div>
        </div>
        <div class="row">
            <div class="box" onclick="click(7, 'left')">7</div>
            <div class="box" onclick="click(8, 'left')">8</div>
            <div class="box" onclick="click(9, 'left')">9</div>
        </div>
        <div class="row">
            <div class="box" onclick="click(0, 'left')">0</div>
            <div class="clear" onclick="click('c', 'left')">C</div>
        </div>
    </div>

    <div class="math">
        <input type="text" id="LO" class="IP" readonly>
        <select id="OP" class="op">
            <option value="">Select an operation</option>
            <option value="+">Addition</option>
            <option value="-">Subtraction</option>
            <option value="*">Multiplication</option>
            <option value="/">Division</option>
        </select>
        <input type="text" id="RO" class="IP" readonly>
    </div>

    <label for="answer">Answers</label>
    <br>
    <textarea name="answer" id="answers" class="ans" cols="30" rows="10"></textarea>

</body>

Calculator javascript file:

"use strict";

function click(number,side) {
    if (side == "left") {
        var val = document.getElementById("LO");
    } else {
        var val = document.getElementById("RO");
    }
    val.value += number;
}

I'm trying to get it to put the clicked number in the input box. Nothing happens when I click the number pads.

Can I get help?

Are you sure your javascript file (calculator.js) is actually loaded on the page? You may check either open Chrome DevTools and check out the network tab or just put "alert('test')" in the file. — vitkarpov, Apr 21 '20 at 16:59
Don't call the function `click`; it won't work using that name for some reason. — , Apr 21 '20 at 17:01
Also, why are you using the full path for CSS file but relative one for JS file? It's better to use relative paths everywhere in order to make HTML files more portable. — vitkarpov, Apr 21 '20 at 17:01
@ChrisG I changed the name to click2 and it worked. I guess there's a weird name conflict since the function is global. You're right. — vitkarpov, Apr 21 '20 at 17:05
You can't call your function `click` and [this is the reason](https://stackoverflow.com/a/2204568/11215806) — rksh1997, Apr 21 '20 at 17:11
change you javascript "click" function name to something else like "click_function" — tapu74, Apr 21 '20 at 17:13

score 0 · Answer 1 · answered Apr 21 '20 at 17:42

Here i added the function in the HTML file and changed the function name click_function

    <!DOCTYPE html>

        <head>
            <title>A javascript calculator</title>
            <link rel="stylesheet" type="text/css" >
        </head>

    <script>
    function click_function(number,side) {
        if (side == "left") {
            var val = document.getElementById("LO");
        } else {
            var val = document.getElementById("RO");
        }
        val.value += number;

    } 
    </script>

    <body class="body">



        <div class="calculator">
            <div class="row">
                <div class="box" onclick="click_function(1, 'left')">1</div>
                <div class="box" onclick="click_function(2, 'left')">2</div>
                <div class="box" onclick="click_function(3, 'left')">3</div>
            </div>
            <div class="row">
                <div class="box" onclick="click_function(4, 'left')">4</div>
                <div class="box" onclick="click_function(5, 'left')">5</div>
                <div class="box" onclick="click_function(6, 'left')">6</div>
            </div>
            <div class="row">
                <div class="box" onclick="click_function(7, 'left')">7</div>
                <div class="box" onclick="click_function(8, 'left')">8</div>
                <div class="box" onclick="click_function(9, 'left')">9</div>
            </div>
            <div class="row">
                <div class="box" onclick="click_function(0, 'left')">0</div>
                <div class="clear" onclick="click_function('c', 'left')">C</div>
            </div>
        </div>

        <div class="space"></div>

        <div class="calculator">
            <div class="row">
                <div class="box" onclick="count_click(1, 'left')">1</div>
                <div class="box" onclick="click_function(2, 'left')">2</div>
                <div class="box" onclick="click_function(3, 'left')">3</div>
            </div>
            <div class="row">
                <div class="box" onclick="click_function(4, 'left')">4</div>
                <div class="box" onclick="click_function(5, 'left')">5</div>
                <div class="box" onclick="click_function(6, 'left')">6</div>
            </div>
            <div class="row">
                <div class="box" onclick="click_function(7, 'left')">7</div>
                <div class="box" onclick="click_function(8, 'left')">8</div>
                <div class="box" onclick="click_function(9, 'left')">9</div>
            </div>
            <div class="row">
                <div class="box" onclick="click_function(0, 'left')">0</div>
                <div class="clear" onclick="click_function('c', 'left')">C</div>
            </div>
        </div>

        <div class="math">
            <input type="text" id="LO" class="IP" readonly>
            <select id="OP" class="op">
                <option value="">Select an operation</option>
                <option value="+">Addition</option>
                <option value="-">Subtraction</option>
                <option value="*">Multiplication</option>
                <option value="/">Division</option>
            </select>
            <input type="text" id="RO" class="IP" readonly>
        </div>

        <label for="answer">Answers</label>
        <br>
        <textarea name="answer" id="answers" class="ans" cols="30" rows="10"> 
      </textarea>

    </body>

I can't connect my javascript file with the html file can someone help me?

1 Answers1