Fatal编程技术网
  • javascript/
  • 如何在HTML中定义javascript函数并使其能够接受来自用户的值

如何在HTML中定义javascript函数并使其能够接受来自用户的值

javascript

如何在HTML中定义javascript函数并使其能够接受来自用户的值,javascript,Javascript,我正在尝试对代码进行白盒测试，我必须创建一个可以接受用户值的函数。我使用了一个模板来创建一个提交表单，然后我为用户定义了一个函数来接受值，然后将其传递给另一个.js文件中的函数 以下是HTML代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Device motion</title> <script type="te

我正在尝试对代码进行白盒测试，我必须创建一个可以接受用户值的函数。我使用了一个模板来创建一个提交表单，然后我为用户定义了一个函数来接受值，然后将其传递给另一个.js文件中的函数

以下是HTML代码：

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Device motion</title>
    <script type="text/javascript" src="DeviceMotion3D.js">


    <script type="text/javascript">
    function Passing(){
    alert("called");
               var c = document.getElementById("textX").value;
                var d = document.getElementById("textY").value();
                var e = document.getElementById("multiX").value();
                var f = document.getElementById("multiY").value();
                alert("c:"+c +"d:"+ d +"e:"+e+"f:" +f);
               // DeviceMotion3D(c,d,e,f);

                 }

                 </script>
</script>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="header">
        <div>
            <div id="logo">

            </div>
            <ul id="navigation">

                <li class="selected">
                    <a href="contact.html">Device motion</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="contents">
        <div>
            <div class="body" id="contact">
                <div id="sidebar">
                    <div class="body">
                        <img src="images/chair-small.png" alt="Img">
                        <div class="contact">

                        </div>
                    </div>
                </div>
                <div id="main">
                    <h1>Cube</h1>
                    <p>
                        This cube does this. This file does that. These values do all this
                        </p>
                    <form action="Cube.html" method="post" onsubmit="Passing();">
                <form>
                        <label>X axis angle</label>
                        <input type="text" value="" name="X" id="textX">
                        <label>Y axis angle</label>
                        <input type="text" value="" name="Y" id="textY">
                        <label>multiplying factor x</label>
                        <input type="text" value="" name="x" id="multiX">
                        <label>multiplying factor y</label>
                        <input type="text" value="" name="y" id="multiY">
                        <input type="submit" value="Submit" class="btn1" onclick="Passing();" >
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
但这是行不通的。我使用了一个警报来知道它是否将传递给函数Passing（），但没有显示警报，因此所有值都未定义。因此，请帮助解决这个问题。

这里是一个小例子。用户在文本字段中输入两个数字，然后单击按钮和第三个文本字段（若填充了用户输入的数字总和）

以下是HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style1.css" />
        <script type="text/javascript" src="jsc2.js"> </script>
    </head>
    <body>
        <h3>Calculator</h3>
        <div style="border:none;height:130px;" id="okvir">
            <form action="#">
            First Number: <input type="text" id="num1" name="FirstNumber"> 
            <br /><br />
            Second Number: <input type="text" id="num2" name="SecondNumber">
            <br /><br />
            Sum: <input type="text" name="Result" id="result"></input>
            </form>
        </div>
        <br />
        <div id="buttons">
            <input type="button" class="button1" onClick="add();" value="Sum" />
        </div>
    </body>
</html>
var a=document.getElementById（'num1'）.value用于从用户和服务器获取数据 document.getElementById（'result'）。value=res；用于从函数中设置HTML格式的数据

onClick=“add（）；”用于在HTML中调用函数

输入type=“button”class=“button1”onClick=“add（）；”value=“Sum”

我希望这对您有所帮助，您可以在代码中使用它。祝你好运

在评论后添加：

好的，我在评论之后修改了你的代码。为了更好地查看，我删除了一些行。希望这有帮助。：）

HTML:

现在，先传球。然后在其中，使用参数调用DeviceMotion3D。如果要跳过呼叫传递，请替换

<input type="button" class="button1" onClick="Passing();" value="Submit" />
祝你好运。：）

为什么要使用表单和提交？只使用onclick可能会更容易。我尝试使用onclick，但它也不起作用。您的HTML看起来无效-我看到一行中有两个
打开的标记？我传递的变量是设备每时每刻抛出的角度。另外两个变量是乘数。这些角度和倍增因子决定立方体旋转的速度。（这是另一个js文件）对此不确定，但在onsubmit和onclick调用中传递（）后，请去掉分号。您好，谢谢您的回答。我试图定义只在js文件中传递的函数，并在html页面中进行了注释。但它仍然不起作用。无法理解和解决问题。好像它甚至不接受这些值，否则就会出现警报“called”。嗨，刚才看到了。我不得不在这一行中关闭js文件的脚本标记，现在该函数正在被调用，但它无法将值进一步传递给js文件。所以html页面中的alert给出了用户输入的值，而js文件中的alert给出了未定义的值。希望它能帮助您解决问题。非常感谢@Rod.：）将尝试此解决方案。。希望这个有效！！ 
function add(){
    var a = document.getElementById('num1').value;
    var b = document.getElementById('num2').value;
    a = parseInt(a);
    b = parseInt(b);
    var res = a + b;
    document.getElementById('result').value=res;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Device motion</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style1.css" />
    <script type="text/javascript" src="DeviceMotion3D.js"></script>
   <script type="text/javascript">
    function Passing(){
    alert("called in HTML");
               var c = document.getElementById("textX").value;
                var d = document.getElementById("textY").value;
                var e = document.getElementById("multiX").value;
                var f = document.getElementById("multiY").value;
                alert("c:"+c +"d:"+ d +"e:"+e+"f:" +f);
                DeviceMotion3D(c,d,e,f);
                 }
    </script>
</head>
<body>              
    <div id="main">
        <h1>Cube</h1>
        <p>This cube does this. This file does that. These values do all this</p>
        <!-- <form action="Cube.html" method="post" onclick="Passing();"></form>-->
        <form action="#">
            <label>X axis angle</label>
            <input type="text" value="" name="X" id="textX">
            <label>Y axis angle</label>
            <input type="text" value="" name="Y" id="textY">
            <label>multiplying factor x</label>
            <input type="text" value="" name="x" id="multiX">
            <label>multiplying factor y</label>
            <input type="text" value="" name="y" id="multiY">
        </form>
        <br />
        <div id="buttons">
            <input type="button" class="button1" onClick="Passing();" value="Submit" />
        </div>
    </div>
</body>
</html>

function DeviceMotion3D(pc,pd,pe,pf){
alert("called in funct");
alert("c:"+ pc +"d:"+ pd +"e:"+ pe +"f:" + pf);
var _obj = {
        c:pc,
        d:pd,
        e:pe,
        f:pf
    };
    alert("called in funct as object");
    alert("c:"+_obj.c +"d:"+ _obj.d +"e:"+_obj.e+"f:" +_obj.f);
}

<input type="button" class="button1" onClick="Passing();" value="Submit" /> 

<input type="button" class="button1" onClick="DeviceMotion3D();" value="Submit" />

function DeviceMotion3D(){
alert("called in funct");
               var pc = document.getElementById("textX").value;
                var pd = document.getElementById("textY").value;
                var pe = document.getElementById("multiX").value;
                var pf = document.getElementById("multiY").value;
alert("c:"+ pc +"d:"+ pd +"e:"+ pe +"f:" + pf);
var _obj = {
        c:pc,
        d:pd,
        e:pe,
        f:pf
    };
    alert("called in funct as object");
    alert("c:"+_obj.c +"d:"+ _obj.d +"e:"+_obj.e+"f:" +_obj.f);
}