简体   繁体   English

如何从外部JS文件中调用onClick按钮,一个function

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

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?我正在使用 JS 和 HTML 做我的第一步,我正在尝试制作一个用于平方数字的页面,在第一个框中我输入一个数字,第二个是空白的,我单击按钮,我想要结果之前输入的数字出现在第二个框中,function 是从外部 js 文件加载的,谁能解释一下怎么做?

HTML code HTML代码

<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 JS代码

<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>

To get the first value, you could use the document.getElementById();要获取第一个值,您可以使用document.getElementById(); method, and reference the id of your first inout box, like...方法,并引用您的第一个输入框的 id,例如...

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() .额外的指针...在 JavaScript 中,我们使用驼峰式命名变量、id 和函数,因此您的 function Potegowanie()例如最好被称为potegowanie() It will still work the same, but it's just good practice.它仍然可以正常工作,但这只是一种很好的做法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM