在HTML代码中按下按钮时如何触发JavaScript函数

2024-05-19 • 问答

我正在尝试创建一个可以解决毕达哥拉斯定理的计算器。我在代码中的标记内创建了一个函数，该函数带有两个参数（每个直角三角形的边长为一个）。如果我只用两个数字作为参数的console.log，并且该函数正确执行，则该函数有效它在script标签内。但是我只想知道如何在文本框中采用两个参数，然后在按下按钮时使结果显示在屏幕上。

<html>
  <main>
    <head>
        <!--Textboxes to input lengths of legs-->

        <input type = "text" required placeholder= "1st legnth">
        <br> <br>
        <input type = "text" required placeholder= "2nd legnth">
        <br> <br>
        <button type = "submit">Give me the answer.
    </head>
   </main>
</html>


 <script>


    function solveforHyp (a,b)
    {

     var c = a*a + b*b;

     return Math.sqrt(c);

     }

     var final = (solveforHyp(3,4));

     console.log(final);

     </script>

在按钮后添加一个跨度以包含最终结果：

<span id="final-result"></span>

向按钮添加onclick事件，看起来可能像这样：

<button type="button" onclick="onButtonSubmit()"></button>

您还可以给输入一些相关的ID，例如：

<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">

最后，编写onButtonSubmit函数以访问输入并调用resolveforHyp函数：

function onButtonSubmit(){
     const firstValue = document.getElementById('first-length').value;
     const secondValue = document.getElementById('second-length').value;

     document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally,put the returned value in the created span.
}

首先，您的文档结构是完全错误的，HTML标记后有很多未关闭脚本的标记，并且内容被写入head标记内，并且head处于main内，没有完成doctype声明，最重要的是您想提交一些东西，至少应该防止其默认行为。在JavaScript Brother之前学习HTML，并且在知道输入始终为数字的情况下，最好使用输入类型Number。

这是您要编写的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
<body>
    <form id="formOne">
            <input type="number" required placeholder="1st legnth" id="first">
            <br> <br>
            <input type="number" required placeholder="2nd legnth" id="second">
            <br> <br>
            <button type="submit">Give me the answer</button>
    </form>
</body>

<script>
    let form = document.querySelector("#formOne");
    let inputOne = document.querySelector("#first");
    let inputTwo = document.querySelector("#second");

    form.addEventListener("submit",function(e){
        e.preventDefault();
        console.log(Math.sqrt(Math.pow(inputOne.value,2) + Math.pow(inputTwo.value,2)));
    })

</script>
</html>

要调用的js文件功能

function tryMe(arg) {
    document.write(arg);
}

HTML文件

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src='object.js'> </script>
    <title>abc</title><meta charset="utf-8"/>
</head>
<body>
    <script>
    tryMe('This is me vishal bhasin signing in');
    </script>
</body>
</html>

您可以尝试这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form id="form">
      <input type="text" id="first_length" name="first_length" />
      <input type="text" id="second_length" name="second_length" />
      <input type="submit" value="Submit" />
    </form>

    <script>
      function logSubmit(event) {
        event.preventDefault();
        var first_length = document.getElementById("first_length").value;
        var second_length = document.getElementById("second_length").value;

        var final = solveforHyp(first_length,second_length);

        console.log(final);
      }

      const form = document.getElementById("form");

      form.addEventListener("submit",logSubmit);

      function solveforHyp(a,b) {
        var c = a * a + b * b;

        return Math.sqrt(c);
      }
    </script>
  </body>
</html>

在HTML代码中按下按钮时如何触发JavaScript函数

zl19890416 回答：在HTML代码中按下按钮时如何触发JavaScript函数

大家都在问