how to call onClick button, a function from external JS file

Question

I'm doing my first steps with JS and HTML, I'm trying to make a page for squaring a number, in the first box I enter a number, the second is blank, I click the button and I want the result of the number entered earlier to appear in the second box, the function is loaded from the external js file, can anyone explain how to do it?

HTML code

<html>

<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="styl.css" type="text/css" />

</head>

<body>
<section>
    <h2>Skrypt do potęgowania liczb</h2><br> 
Podaj liczbę którą podniesiemy do kwadratu:<br>
<input type="text" id="Liczba" value="" placeholder="Liczba" /><br>
<input type="text" id="Wynik" value="" placeholder="Wynik" /> 
<button type="button" id="Przycisk" onclick="Potegowanie(Liczba, Wynik)" >Oblicz</button><br>

</section>
<script type="text/javascript" src="script.js"></script>
</body>

</html>

JS code

<script type="text/javascript">
function Potegowanie(pole_na_liczbe, pole_na_wynik)
{
var liczba = document.getElementById("pole_na_liczbe").value;
var wynik = liczba*liczba;
pole_na_wynik.value = wynik;
}
</script>

Paul Martin · Accepted Answer · 2021-06-13 17:24:15Z

2

To get the first value, you could use the document.getElementById(); method, and reference the id of your first inout box, like...

var liczba = document.getElementById("Liczba").value;

...then after you've done the calculation, you could use a similar method to assign the value to your second input box...

document.getElementById("Wynik").value = wynik

Altogether, it looks like this...

   function Potegowanie()
        {
        var liczba = document.getElementById("Liczba").value;
        var wynik = liczba*liczba;
        document.getElementById("Wynik").value = wynik
        }

        <html>

        <head>
        <title>Tytuł strony</title>
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <script type="text/javascript" src="script.js"></script>
        </head>

        <body>
        <section>
            <h2>Skrypt do potęgowania liczb</h2><br> 
        Podaj liczbę którą podniesiemy do kwadratu:<br>
        <input type="text" id="Liczba" value="" placeholder="Liczba" /><br>
        <input type="text" id="Wynik" value="" placeholder="Wynik" /> 
        <button type="button" id="Przycisk" onclick="Potegowanie()" >Oblicz</button><br>

        </section>
        
        </body>

        </html>

Extra pointer... In JavaScript, we use camelcase to name variables, id's and functions, so your function Potegowanie() for example would be better off being called potegowanie(). It will still work the same, but it's just good practice.

edited Jun 13, 2021 at 17:24

answered Jun 13, 2021 at 16:58

Paul Martin

4693 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Patryk Kobyłka Over a year ago

Thank u very much for advice! second problem is that i have to use external js file whats why my function had 2 arguments, and even if change it like u said, I'm still getting error "Cannot read property 'value' of null at Potegowanie (script.js:3) at HTMLButtonElement.onclick (zadanie7.html:15)"

Paul Martin Over a year ago

It would work the same with an external .js file. I've separated out the .js file in the snippet to demonstrate. Have you changed the id in your document.getElementById() function? The one you have in your question doesn't exist, so I changed it to "Liczba", which is the id of your second input.

Patryk Kobyłka Over a year ago

call me silly but i rly dont know whats wrong, I will send u a beer if u will write that code for my, I know that u shouldnt do that, but maybe then I will get enlightenment...

Paul Martin Over a year ago

If you copy my .html code into a .html file and my .js code into a .js file called '.scripts.js', it will work as expected. Could you try this, run it and let me know the error message you get (if any). If you're getting "Cannot read property 'value' of null at Potegowanie", it means the "document.getElementById()" can't find the element you're looking for, which means the id in the html is different from the id in the function.

Collectives™ on Stack Overflow

how to call onClick button, a function from external JS file

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related