javascript - 提交链接到js函数的输入表单
问题描述
我想用一些值填写表格。这些值对应于电机的角度、速度……。
因此，用户输入这些值，然后提交它们。提交输入链接到一个 js 函数onclick="myFunction()"，该函数必须进行计算。然后，这个计算的结果必须显示在网页上。
我正在使用烧瓶。我的代码中有一部分必须通过 opc ua 向电机发送值。这部分运作良好。我要做的是根据用户输入的值计算一个值（用js）。
这是我的python代码：
# sends data from html form to database
from flask import Flask
from flask import request
from flask import render_template
import time
# from opcua import Client
# from opcua import ua
# client = Client("opc.tcp://{ip}:4840/freeopcua/server/".format(ip='192.168.1.101'))
# # client = Client("opc.tcp://{ip}:4840/freeopcua/server/".format(ip='10.1.5.130')) #new
# root = client.get_root_node()
# objects = client.get_objects_node()
# client.connect()
# client.load_type_definitions()
app = Flask(__name__)
####################SOLID SILOS####################
@app.route('/solid_silos/')
def home_solid_silos():
return render_template('solid_silos.html')
@app.route('/solid_silos/', endpoint='solid_silos', methods=['POST', 'GET'])
def test_endurance_solid_silos():
# print('solid>>>>>>', nodeid_solid)
return test_endurance('solid_silos.html')
#########################################################
def test_endurance(template_file):
global test_id
global nb_runs
global angle
global speed
global pause
test_id = request.form['test_id']
nb_runs = request.form['nb_runs']
angle = request.form['angle']
speed = request.form['speed']
pause = request.form['pause']
print('nb_runs', nb_runs)
if request.form.get("submit"):
test_id = request.form['test_id']
nb_runs = request.form['nb_runs']
angle = request.form['angle']
speed = request.form['speed']
pause = request.form['pause']
if test_id == '':
test_id = 0
if nb_runs == '':
nb_runs = 0
if angle == '':
angle = 0
if speed == '':
speed = 0
if pause == '':
pause = 0
speed_message=""
if int(speed)>300 or int(speed)<0:
speed = 0
speed_message = "This speed is not available, please try again"
run = 0
while int(run) < int(nb_runs):
try:
#call function
# opcua_function = client.get_node(ua.NodeId(functionId,4))
# opcua_function.call_method(ua.NodeId(functionId, 4), ua.Variant(int(function_id),ua.VariantType.Int16), ua.Variant(int(angle),ua.VariantType.Int16), ua.Variant(int(speed),ua.VariantType.Int16) )
run = run + 1
print('run',run)
python_file = open("success.txt", "w")
python_file.write("Number of runs we want to execute: " + str(nb_runs) + ", Number of runs successfully done: " + str(run) + ", Angle chosen: " + str(angle) + ", Speed chosen: " + str(speed))
python_file.close()
time.sleep(int(pause))
continue
except ValueError:
print("Oops! We have an issue. Try again...")
python_file = open("data_error.txt", "w")
python_file.write("Number of runs we want to execute: " + str(nb_runs) + ", Number of runs successfully done: " + str(run) + ", Angle chosen: " + str(angle) + ", Speed chosen: " + str(speed))
python_file.close()
break
return render_template(template_file, test_id=test_id, nb_runs=nb_runs, angle=angle, speed=speed, pause=pause, message=speed_message, run=run)
这是我的html代码：
<!DOCTYPE HTML>
<html>
<div id="menu">
<ul id="onglets">
<li class="active"><a href="/solid_silos/"> Solid Silos </a></li>
<li><a href="/liquid_silos/"> Liquid Silos </a></li>
</ul>
</div>
<head>
<link rel="stylesheet" href='/static/main.css'/>
<p4>Started time: </p4><p4 id="date"></p4>
<p4>Add time: </p4><p4 id="add"></p4>
<script type=text/javascript src="{{
url_for('static', filename='main.js') }}"></script>
</head>
<body>
<title>Endurance test</title>
<p class="title"><strong>TEST THE ENDURANCE OF THE SOLID SILOS</strong></p>
</head>
<body>
<div class="content">
<table>
<tr>
<td class="special_td">
<form>
<table>
<p2>Different callable functions:</p2><br>
<p1> ★ Motion</p1> <br>
<p1> ★ Homing </p1><br>
<p1> ★ Path </p1>
</table>
</form>
</td>
<td class="special_td">
<!--test form-->
<form method="post" action="/solid_silos/">
<table>
<tr>
<td class="special_td">
<table>
<tr>
<td> <p>Selected test:</p> </td>
<td><select name= test_id method="GET" action="/solid_silos/" style="height:50px;">
<option value= "2" name="2" >Motion</option>"
<option value= "3" name="3" >Homing</option>"
<option value= "3" name="3" >Path</option>"
<option value= "2" name="2" SELECTED>★★★★</option>"
</td>
<!-- <td> <input type="text" name="function_id" value={{function_id}}> </td> -->
</tr>
<tr>
<td> <p>Nomber of runs:</p> </td>
<td> <input type="int" name="nb_runs" id="demoA" style="height:50px;" value={{nb_runs}}> </td>
</tr>
<tr>
<td> <p>Angle:</p> </td>
<td> <input type="text" name="angle" id="demoB" style="height:50px;" value={{angle}}> </td>
</tr>
<tr>
<td> <p>Speed:</p> </td>
<td> <input type="text" name="speed" id="demoC" style="height:50px;" value={{speed}}> </td>
</tr>
<tr>
<td> <p>Pause:</p> </td>
<td> <input type="text" name="pause" id="demoD" style="height:50px;" value={{pause}}> </td>
</tr>
<tr>
<td> <input type="submit" name="submit" class="submit" value="Submit"> </td>
<input type="submit" onclick="myFunction()">
<td><p3>{{message}}</p3></td>
<td><p4>Number of successful runs: {{run}}</p4></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
最后是我的js代码：
//////////////////////////////////////////////// STARTED TIME //////////////////////////////////////
// Date object
var today = new Date();
// Current Date
var date = today.getFullYear()+'-'+(today.getMonth()+1)+' '+today.getDate();
// Current Time
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
// Current Date and Time
var dateTime = date+' '+time;
document.getElementById("date").innerHTML = dateTime;
angle = document.getElementById("demoB").value
speed = document.getElementById("demoC").value
pause = document.getElementById("demoD").value
nb_runs = document.getElementById("demoA").value
function myFunction(){
add = (angle/speed + pause) * nb_runs
document.getElementById("add").innerHTML = add;
}
我的问题是<p4>Add time: </p4><p4 id="add"></p4>永远不会显示。我从控制台收到以下错误：Uncaught TypeError: Cannot read property 'value' of null当我尝试提交时（单击按钮）：main.js:178 Uncaught ReferenceError: angle is not defined
我有两个提交按钮，因为这个按钮<input type="submit" name="submit" class="submit" value="Submit">是通过 opcua 发送数据，但这不是我的问题。我的问题是：<input type="submit" onclick="myFunction()">为什么当我点击它时什么都没有发生？
角度是完美定义的，其他值也是如此。我不明白他们怎么不能被认出来。
解决方案
推荐阅读
- orchardcms - 果园核心级联删除
- javascript - 通过数组获取的正确方法
- c# - 如何在 Roslyn 中使用项目方法？
- flask - 无法在烧瓶中使用 request.args
- eclipse - JAX-RS 完全没有响应 (404)
- javascript - 如何使用 TypeScript 中的对象解构为构造函数中的类级别属性赋值？
- maxima - Maxima：类似于 Excel 中的圆形
- android - 一旦我开始做广告，我的 android BLE 设备会在多长时间内做广告？有没有办法增加持续时间？
- regex - 如何在netlify-cms Gatsby starter中的`yaml`文件中按范围限制字符数
- java - 如何使用 Java 从 script.google.com 网页获取信息？