HTML/Javascript表单是';不回答
我对JavaScript和HTML网页非常陌生。我目前有一个回归模型,可以预测我所在城市的房价。我如何使用JavaScript让用户输入有关他们房子的信息,并让网站输出预测的价格值 我希望用户能够输入许多值。其中包括地块大小、建成年份、房屋面积,以及房屋是单户住宅还是联排别墅。为了简单起见,假设我的模型是价格=100000+50000地块+2000建筑+4000SqFt+0住宅 我试着填写表格,但当我在最后点击“预测我的房子的价值”按钮时,答案没有出现。相反,整个表单变成了空白,就这样。我想要的是真实的房价 这是我的实际代码:HTML/Javascript表单是';不回答,javascript,html,forms,Javascript,Html,Forms,我对JavaScript和HTML网页非常陌生。我目前有一个回归模型,可以预测我所在城市的房价。我如何使用JavaScript让用户输入有关他们房子的信息,并让网站输出预测的价格值 我希望用户能够输入许多值。其中包括地块大小、建成年份、房屋面积,以及房屋是单户住宅还是联排别墅。为了简单起见,假设我的模型是价格=100000+50000地块+2000建筑+4000SqFt+0住宅 我试着填写表格,但当我在最后点击“预测我的房子的价值”按钮时,答案没有出现。相反,整个表单变成了空白,就这样。我想要的
<!DOCTYPE html>
<html>
<head>
<h1>Home Prices Calculator</h1>
<style type="text/css">
</style>
<script type="text/javascript">
function getPrice() {
var form = document.getElementById("calc");
var out = form.elements["z"];
//get numbers
var sqftVal = parseInt(form.elements["sqft"].value);
var bathsVal = parseInt(form.elements["baths"].value);
var builtVal = parseInt(form.elements["built"].value);
var lotVal = parseInt(form.elements["lot"].value);
for (i=0;i<document.forms[0].zipcode.length;i++) {
if (document.forms[0].zipcode[i].checked) {
var zipVal = document.forms[0].radios[i].value;
}
}
for (i=0;i<document.forms[0].zipcode.length;i++) {
if (document.forms[0].gar[i].checked) {
var garageVal = document.forms[0].gar[i].value;
}
}
for (i=0;i<document.forms[0].zipcode.length;i++) {
if (document.forms[0].housetype[i].checked) {
var houseVal = document.forms[0].housetype[i].value;
}
}
out.value = -6932000 + 221400 * Math.log(sqftVal) + 637.2 * Math.exp(bathsVal) + 2868 * builtVal + 159100 * lotVal
}
</script>
</head>
<body>
<form id = "calc" oninput="updateOutput()">
<fieldset>
<legend>ZIP Code</legend>
<div>
<input type="radio" id="47" name="zipcode" value="47">
<label for="47">12345</label>
</div>
<div>
<input type="radio" id="47" name="zipcode" value="47">
<label for="47">12346</label>
</div>
</fieldset>
<fieldset>
<legend>House Type</legend>
<div>
<input type="radio" id="sf" name="housetype" value="sf">
<label for="sf">Single Family</label>
</div>
<div>
<input type="radio" id="tw" name="housetype" value="tw">
<label for="tw">Townhouse/Condo</label>
</div>
</fieldset>
<fieldset>
<legend>Square Feet</legend>
<input name = "sqft" id="sqft" type = "number" min = "0" max = "8000">
</fieldset>
<fieldset>
<legend>Number of Bathrooms</legend>
<input name = "baths" id="baths" type = "number" step = "0.5" min = "0.5" max = "6.5">
</fieldset>
<fieldset>
<legend>Year Built</legend>
<input name = "built" id="built" type = "number" min = "1988" max = "2020">
</fieldset>
<fieldset>
<legend>Lot Size (in Acres)</legend>
<input name = "lot" id = "lot" type = "number" step = "0.01" min = "0" max = "1.54">
</fieldset>
<fieldset>
<legend>Number of Garages</legend>
<div>
<input type="radio" id="a" name="gar" value="a">
<label for="a">0</label>
</div>
<div>
<input type="radio" id="b" name="gar" value="b">
<label for="b">1</label>
</div>
<div>
<input type="radio" id="c" name="gar" value="c">
<label for="c">2</label>
</div>
<div>
<input type="radio" id="d" name="gar" value="d">
<label for="d">3</label>
</div>
</fieldset>
<button onclick="getPrice()">Predict My Home's Value</button>
</form>
</body>
</html>
房价计算器
函数getPrice(){
var form=document.getElementById(“计算”);
var out=form.elements[“z”];
//得到数字
var sqftVal=parseInt(form.elements[“sqft”].value);
var bathsVal=parseInt(form.elements[“baths”].value);
var builtVal=parseInt(form.elements[“build”].value);
var lotVal=parseInt(form.elements[“lot”].value);
对于(i=0;i因为,按钮type
属性的默认值是submit
,单击它将提交表单,这将刷新页面,如果没有太多要加载的内容,它可能看起来是瞬时的,但这就是为什么/如何重置它
至少有两个选项可以修复此问题:
选项1:
将按钮类型设置为按钮
预测我的房子的价值
选项2:
像这样将事件对象传递给onclick
预测我的房子的价值
使用事件阻止页面刷新。preventDefault()
函数getPrice(事件){
event.preventDefault()
//代码的其余部分
}
你的应用程序会崩溃吗?如果其中没有带有name=“z”
的表单元素,应该会崩溃。你确定吗?你检查过控制台了吗?该元素存在吗,因为我没有看到它?如果这是你的全部代码,那么有两个问题:1.你的第一个for循环检查document.forms[0].zipcode[I].选中了
,但使用了来自文档.forms[0]的值。radios[i]。value
-注意zipcode
已更改为radios
2。没有包含name=“z”的表单元素
要添加值,只需将其添加到表单中的任何位置,就像您对任何其他输入所做的一样,可能就在按钮的正上方?您可以选择。例如:
让我们来看看。