JS: Uncaught TypeError: onlcick is not a function

Question

When I put the form tag on the button tag id="paybutton" function, it works well. But when I put the form tag on the div class="form-group, the up and down buttons don't work. i've added type="button" and tried to change input type ="button" but it is still not working.

<script>
    var up = function(max) {
        document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) + 1;
        if (document.getElementById("mynumber").value >= parseInt(max)) {
            document.getElementById("mynumber").value = max;
        }
        document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
        if (document.getElementById("amount").value >= 50000) {
            document.getElementById("amount").value = 50000;
        }
    }

    function down(min) {
        document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) - 1;
        if (document.getElementById("mfFFfFFynumber").value <= parseInt(min)) {
            document.getElementById("mynumber").value = min;
        }
        document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
        if (document.getElementById("amount").value <= 5000) {
            document.getElementById("amount").value = 5000;
        }
    }
</script>


<form method="post" action="/kakaoPay">
    <!--  ??? ?? -->
    <div class="form-group">
        <label>??? ? (1??? : 5??): </label>
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" id="down" class="btn btn-default" onclick="down('1')">
                    <span class="glyphicon glyphicon-minus"></span>
                </button>
            </div>
            <input type="text" name="mybumber" id="mynumber" class="form-control input-number" value="1" />
            <div class="input-group-btn">
                <button type="button" id="up" class="btn btn-default" onclick="up('10')">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </div>
        </div>
        <output type="number" id="amount" name="total" class="form-control input-number"></output>
    </div>
    -
    <h1> ?? </h1>
    -
    <!-- <form method="post" action="/kakaoPay">  -->
    - <button name="paybutton" id="paybutton"> ?? </button> -
</form>

The shown code will _not_ generate that error itself as _neither_ `onlcick` or `onclick` are attempted to be accessed as functions in the snippets shown. — user2864740, Aug 06 '19 at 02:06
Try renaming the ID of your button to `_down` or something else, the `onclick` event is selecting the button — Thum Choon Tat, Aug 06 '19 at 02:08
@ThumChoonTat yeah it works well when i put the form tag on the — kikioppa, Aug 06 '19 at 02:12
@Thum Choon Tat ahh sorry i didn't understand meaning of renaming id of button so i tried change both of it ; ( sorry i could give you more points bad my understanding — kikioppa, Aug 06 '19 at 02:41

score 1 · Answer 1 · answered Aug 06 '19 at 03:06

1

use window.up window.down because scope is current form not window like this

answered Aug 06 '19 at 03:06

kaluogh

64
5

– kaluogh Aug 06 '19 at 03:06
show log – kaluogh Aug 06 '19 at 03:11
add this line you will understand – kaluogh Aug 06 '19 at 03:11
in form scope down or up is a element – kaluogh Aug 06 '19 at 03:13

Alex Pappas · Accepted Answer · 2019-08-06T02:27:33.067

You have to rename your functions "up" and "down". Try "up2" and "down2" and it will work. This is because the identifier names conflicts with your function names.

<script>
    var up2 = function(max) {
        document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) + 1;
        if (document.getElementById("mynumber").value >= parseInt(max)) {
            document.getElementById("mynumber").value = max;
        }
        document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
        if (document.getElementById("amount").value >= 50000) {
            document.getElementById("amount").value = 50000;
        }
    }

    function down2(min) {
        document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) - 1;
        if (document.getElementById("mfFFfFFynumber").value <= parseInt(min)) {
            document.getElementById("mynumber").value = min;
        }
        document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
        if (document.getElementById("amount").value <= 5000) {
            document.getElementById("amount").value = 5000;
        }
    }
</script>


<form method="post" action="/kakaoPay">
    <!--  ??? ?? -->
    <div class="form-group">
        <label>LABEL (1? : 5?): </label>
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" id="down" class="btn btn-default" onclick="down2('1')">
                    <span class="glyphicon glyphicon-minus">DOWN</span>
                </button>
            </div>
            <input type="text" name="mybumber" id="mynumber" class="form-control input-number" value="1" />
            <div class="input-group-btn">
                <button type="button" id="up" class="btn btn-default" onclick="up2('10')">
                    <span class="glyphicon glyphicon-plus">UP</span>
                </button>
            </div>
        </div>
        <output type="number" id="amount" name="total" class="form-control input-number"></output>
    </div>
    -
    <h1> HEADER </h1>
    -
    <!-- <form method="post" action="/kakaoPay">  -->
    - <button name="paybutton" id="paybutton"> PAY </button> -
</form>

Refer to this answer for more details: Why JS function name conflicts with element ID?

of course you have to rename the invoked function in the onclick accordingly — Alex Pappas, Aug 06 '19 at 02:19
the function name and the `id` value should be different. If you have `id="down"`, then `onclick="down('1')"` will not work. — Alex Pappas, Aug 06 '19 at 02:22
Refer to the link provided for detailed explanation. Don't forget to mark the answer as correct if it is. Have fun with JS. — Alex Pappas, Aug 06 '19 at 02:28
yeah im just new to here i was searching bout how can i give you a point and it says i gotta wait at least 2 days ? — kikioppa, Aug 06 '19 at 02:30
Don't worry about it. You can forget it and keep on learning JS. Goodluck! XD — Alex Pappas, Aug 06 '19 at 02:32

JS: Uncaught TypeError: onlcick is not a function

2 Answers2