javascript - html 文件中的表单数据未链接到 .js 文件
问题描述
目标:
- 使用 html 创建前端以读取存储在 firebase 数据库中的数据
- 在用户提供的日期范围内显示数据
到目前为止,我已经创建了一个带有表单的 html 文件来收集用户输入(开始和结束日期)。该文件正在使用 tomcat 服务器托管。
如何将我的 .js 链接到我的 .html 文件并检索用户输入?
当我运行此代码时,我看到了 for 并且我能够输入数据。似乎提交按钮未链接。
索引.html
<html>
<head>
</head>
<body>
<form id="userForm">
<h1> Baby Detection In Car </h1>
Please enter information below.<br/><br/>
Start Time (mm/dd/yyyy): <input type="text" name="start" id="start"><br>
End Time (mm/dd/yyyy): <input type="text" name="end" id="end"><br>
<button type="submit">Submit</button>
</form>
<script src=index.js></script>
</body>
</html>
index.js 文件
//Event listener for user input to form
document.getElementById('userForm').addEventListener('Submit',submitForm);
function submitForm(e){
e.preventDefault();
//Get values
var start = getInputVal('start');
var end = getInputVal('end');
}
//Function to get user input
function getInputVal(id){
return document.getElementById(id).value;
}
解决方案
经过进一步检查,.js 文件链接正确。一旦按下提交,就没有调用向用户显示数据。
推荐阅读
- url - 从 MS Word 的目录中清除 URL 链接
- java - 截屏并将图像显示到图库中
- haskell - 如何用“反射”包替换 ImplicitParams?
- reactjs - 错误无法读取未定义的属性“匹配”
- linux - 对主要命令输出的所有 PID 执行命令?
- vue.js - 如何使用 Vue Draggable 添加确认弹出模式?
- tableau-api - 无法在 Tableau Desktop 的数据源中获取数据,引发以下错误
- python - Python如何在读取文本文件时跳过空行
- azure - 无法使用 powershell 发布 azure webjob
- python - 从组外收集值列表