如何将输入html数据作为变量传递给javascript函数并获得响应_Javascript_Html

如何将输入html数据作为变量传递给javascript函数并获得响应

javascript html

如何将输入html数据作为变量传递给javascript函数并获得响应,javascript,html,Javascript,Html,我的问题：我无法将html中的输入数据作为变量传递给js函数并获得相应的响应我的目标：当用户点击提交按钮时，他会收到js函数提供的任何响应我在同一目录中有两个文件： -index.html -index.js index.js内容： function quEq(a, b, c) { var delta = (b ** 2) - (4 * a * c); if (a == 0) { return "Not a quadratic equation"; }; if (delta &l

我的问题：我无法将html中的输入数据作为变量传递给js函数并获得相应的响应

我的目标：当用户点击提交按钮时，他会收到js函数提供的任何响应

我在同一目录中有两个文件： -index.html -index.js

index.js内容：

function quEq(a, b, c) {
var delta = (b ** 2) - (4 * a * c);
  if (a == 0) {
  return "Not a quadratic equation";
  };
if (delta < 0) {
    return "Complex root! No solution in real numbers";
    } else {
        var first= (-b + Math.sqrt(delta)) / (2*a);
        var second= (-b - Math.sqrt(delta)) / (2*a);
        return {first, second};
        };
};

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="index.js"></script>
    <title>Quadratic Equation</title>
  </head>
  <body>

    <div class="container">
        <div class="row justify-content-center">
            <div class="bg-red-400">
                <div class="">
                  <form>
                    <div class="form-group">
                      <label>Enter 'a' value</label>
                      <input type="number" class="form-control" id="a" placeholder="1">
                      <label>Enter 'b' value</label>
                      <input type="number" class="form-control" id="b" placeholder="5">
                      <label>Enter 'c' value</label>
                      <input type="number" class="form-control" id="c" placeholder="6">
                      <button onclick="quEq(document.getElementById('a').nodeValue, document.getElementById('b').value, document.getElementById('c').value)" type="submit" class="btn btn-primary">Submit</button>
                    </div>
                    <div class="form-group">
                  </form>                  
                </div>
            </div>
        </div>
    </div>

  </body>
</html>

功能查询（a、b、c）{
变量δ=（b**2）-（4*a*c）；
如果（a==0）{
返回“不是二次方程”；
};
if（δ<0）{
返回“复数根！没有实数解”；
}否则{
var first=（-b+数学sqrt（δ））/（2*a）；
第二个变量=（-b-数学sqrt（delta））/（2*a）；
返回{first，second}；
};
};

index.html内容：

function quEq(a, b, c) {
var delta = (b ** 2) - (4 * a * c);
  if (a == 0) {
  return "Not a quadratic equation";
  };
if (delta < 0) {
    return "Complex root! No solution in real numbers";
    } else {
        var first= (-b + Math.sqrt(delta)) / (2*a);
        var second= (-b - Math.sqrt(delta)) / (2*a);
        return {first, second};
        };
};

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="index.js"></script>
    <title>Quadratic Equation</title>
  </head>
  <body>

    <div class="container">
        <div class="row justify-content-center">
            <div class="bg-red-400">
                <div class="">
                  <form>
                    <div class="form-group">
                      <label>Enter 'a' value</label>
                      <input type="number" class="form-control" id="a" placeholder="1">
                      <label>Enter 'b' value</label>
                      <input type="number" class="form-control" id="b" placeholder="5">
                      <label>Enter 'c' value</label>
                      <input type="number" class="form-control" id="c" placeholder="6">
                      <button onclick="quEq(document.getElementById('a').nodeValue, document.getElementById('b').value, document.getElementById('c').value)" type="submit" class="btn btn-primary">Submit</button>
                    </div>
                    <div class="form-group">
                  </form>                  
                </div>
            </div>
        </div>
    </div>

  </body>
</html>


二次方程
输入“a”值
输入“b”值
输入“c”值
提交

感谢您的帮助

我希望我没有违反任何规则

您的onclick事件处理程序应该成功地处理click事件，但不清楚您希望如何处理函数的返回值。默认情况下，浏览器不会执行任何操作。相反，你需要自己来管理

例如，您可以将结果写入DOM的其他部分

在HTML中，您可以创建一些节点来保存输出：

<div id="result-1" />
<div id="result-2" />

onclick事件处理程序应该成功地处理click事件，但不清楚要对函数的返回值执行什么操作。默认情况下，浏览器不会执行任何操作。相反，你需要自己来管理

例如，您可以将结果写入DOM的其他部分

在HTML中，您可以创建一些节点来保存输出：

<div id="result-1" />
<div id="result-2" />

您有各种HTML和JavaScript语法错误

请参见下面代码中的注释：

//获取要使用的DOM元素的引用
var btn=document.querySelector（“按钮”）；
var a=document.getElementById（'a'）；
var b=document.getElementById（'b'）；
var c=document.getElementById（'c'）；
//在JavaScript中进行事件绑定，而不是使用内联HTML属性
btn.addEventListener（“单击”，函数（）{
//使用“值”，而不是“节点值”
quEq（a值、b值、c值）；
});
功能查询（a、b、c）{
//小心语法！
变量δ=（b*2）-（4*a*c）；
如果（a==0）{
//return没有出现在任何地方
警惕（“不是二次方程”）；
}else if（delta<0）{
警报（“复数根！没有实数解”）；
}否则{
var first=（-b+数学sqrt（δ））/（2*a）；
第二个变量=（-b-数学sqrt（delta））/（2*a）；
警报（第一次+第二次）；
}
}


二次方程
输入“a”值
输入“b”值
输入“c”值
提交

您有各种HTML和JavaScript语法错误

请参见下面代码中的注释：

//获取要使用的DOM元素的引用
var btn=document.querySelector（“按钮”）；
var a=document.getElementById（'a'）；
var b=document.getElementById（'b'）；
var c=document.getElementById（'c'）；
//在JavaScript中进行事件绑定，而不是使用内联HTML属性
btn.addEventListener（“单击”，函数（）{
//使用“值”，而不是“节点值”
quEq（a值、b值、c值）；
});
功能查询（a、b、c）{
//小心语法！
变量δ=（b*2）-（4*a*c）；
如果（a==0）{
//return没有出现在任何地方
警惕（“不是二次方程”）；
}else if（delta<0）{
警报（“复数根！没有实数解”）；
}否则{
var first=（-b+数学sqrt（δ））/（2*a）；
第二个变量=（-b-数学sqrt（delta））/（2*a）；
警报（第一次+第二次）；
}
}


二次方程
输入“a”值
输入“b”值
输入“c”值
提交

我发现这段代码有两个缺陷

(一)

而不是

document.getElementById('a').value

2）您应该知道占位符只是一个文本，看起来很奇怪，您可以看到6，但还没有数字，所以如果您想要一些默认数字，可以直接设置值属性，而不是占位符

<input type="number" class="form-control" id="a" value="1">

我发现这段代码有两个缺陷

(一)

而不是

document.getElementById('a').value

2）您应该知道占位符只是一个文本，看起来很奇怪，您可以看到6，但还没有数字，所以如果您想要一些默认数字，可以直接设置值属性，而不是占位符

<input type="number" class="form-control" id="a" value="1">

现在它可以工作了

a:

b:

c:

提交
功能查询（a、b、c）{
变量δ=（b**2）-（4*a*c）；
如果（a==0）{
警惕（“不是二次方程”）；
};
if（δ<0）{
警报（“复杂的根！不是这样