如何调用onClick按钮，一个来自外部JS文件的函数答案

【问题标题】：how to call onClick button, a function from external JS file如何调用onClick按钮，一个来自外部JS文件的函数
【发布时间】：2021-06-13 16:49:31
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html function button

【解决方案1】：

要获取第一个值，您可以使用document.getElementById(); 方法，并引用您的第一个输入框的 id，例如...

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

...然后在您完成计算后，您可以使用类似的方法将值分配给您的第二个输入框...

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

总而言之，它看起来像这样......

   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>

额外的指针... 在 JavaScript 中，我们使用驼峰式命名变量、id 和函数，因此您的函数 Potegowanie() 最好称为 potegowanie()。它仍然可以正常工作，但这只是一种很好的做法。

【讨论】：

非常感谢您的建议！第二个问题是我必须使用外部 js 文件为什么我的函数有 2 个参数，即使像你说的那样改变它，我仍然收到错误“无法在 Potegowanie 读取 null 的属性'值'（script.js： 3) 在 HTMLButtonElement.onclick (zadanie7.html:15)"
它与外部 .js 文件的工作方式相同。我已经在 sn-p 中分离出 .js 文件来演示。您是否更改了 document.getElementById() 函数中的 id？您的问题中的那个不存在，所以我将其更改为“Liczba”，这是您第二个输入的 id。
叫我傻但我不知道怎么了.
如果您将我的 .html 代码复制到一个 .html 文件中，并将我的 .js 代码复制到一个名为“.scripts.js”的 .js 文件中，它将按预期工作。你能试试这个，运行它，让我知道你得到的错误信息（如果有的话）。如果您收到“Cannot read property 'value' of null at Potegowanie”，这意味着“document.getElementById()”找不到您要查找的元素，这意味着 html 中的 id 不同于函数中的id。