个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在制作一个小计算器(练习函数等)，但无论我填写什么，它总是返回值 0。
我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainContainer">
<form>
<input type="number" id="value1">
<select id="operator"><option value="add">add</option><option value="minus">minus</option><option value="div">Divide</option><option value="mul">multiple</option></select>
<input type="number" id="value2">
<button id="calculate">Calculate</button>
</form>
</div>
</body>
</html>
我的 JavaScript:
function prepCalculate() {
let v1 = document.querySelector("#value1");
let v2 = document.querySelector("#value2");
if (isNaN(v1) || isNaN(v2)) {
window.alert('one of the inputs does not equal a nummeric value!');
return;
} else {
calculate();
}
}
prepCalculate();
function calculate() {
let v1 = document.querySelector("#value1");
let v2 = document.querySelector("#value2");
let operator = document.querySelector("#operator");
let cal;
if (operator == 'add') {
cal = v1 + v2;
} else if (operator == 'minus') {
cal = v1 - v2;
} else if (operator == 'div') {
cal = v1 / v2;
} else {
cal = v1 * v2;
}
alert(cal);
return cal;
}
我的 console.log() 也没有显示任何错误...所以我的问题:我做错了什么？
最佳答案
有几个问题:
您尝试使用元素本身，而不是它们的值。使用.value访问值，例如:
let v1 = document.querySelector("#value1").value;
// ---------------------------------------^^^^^^
let v2 = document.querySelector("#value2").value;
// ---------------------------------------^^^^^^
let operator = document.querySelector("#operator").value;
// -----------------------------------------------^^^^^^
您有<button id="calculate">Calculate</button>在 form元素。默认type的button元素是"submit" ，因此单击该按钮将提交表单。您需要type="button"以避免这种情况。
您尚未将按钮连接到 calculate函数或prepCalculate功能。了解如何设置事件处理程序(例如 addEventListener )。
value的input始终是一个字符串。大多数操作都会将这些字符串强制转换为数字，但是 +不会(因为 + 与字符串是连接)。您需要转换 value s 到数字。请参阅this answer有很多选择可以做到这一点。
旁注:虽然您可以使用 querySelector("#id")按照你的方式，通过其 id 获取元素的惯用方式(也是最快的，但通常并不重要)值为 document.getElementById(id) (否#)。
关于javascript - 无论填写的值如何，我的计算器都会返回值 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52254952/
25
4
0
在 JConsole 的 MBeans 选项卡中查看我的应用程序的 MBean 时，有“属性”和“操作”的子菜单。如果将这些树结构展开到最大程度，然后单击其中一个操作，则右侧面板会显示三个部分:操作调
我有一个包含稀疏数据的人性化工作表: PART | FRUIT --------------- Alpha | | Apples | Pears Beta |
我有一个包含每小时数据的数据框: area date hour output H1 2018-07-01 07:00:00 150 H1
假设我有这样的 html 表: 16 3 2 13 5 10
我已经将一些原始数据导入到 R 中，如下所示: 表 1: ID Year Value 01 1999 25 01 2000 12 01 2002
我已经将一些原始数据导入到 R 中，如下所示: 表 1: ID Year Value 01 1999 25 01 2000 12 01 2002
我在以下问题中遇到了同样的问题: Forward Fill New Row to Account for Missing Dates 不同之处在于，我需要计算两个不同日期之间的小时数差异，例如 201
我想填写 pandas 数据框中缺失的值。最佳情况下，我希望分钟列的范围为每小时 0-60。不幸的是，数据生成过程没有记录任何 sub_count = 0 的行。有办法做到这一点吗？我的数据涵盖日期
基本对象问题我似乎无法全神贯注。我确定我想多了。填写 addFullName 函数的代码。该函数应该: Take one input parameter, a person object. Add a
是否可以在没有用户交互的情况下调用 html 表单提交？我知道可以通过 HttpClient 发出发布请求，但这并不能解决我的问题。 我需要以编程方式在网页上填写一些表单输入字段，然后“单击”提交按钮
Python 的新手，似乎无法找到我正在寻找的确切答案我相信有更简单的方法来填写此信息 我有 df1 和 df2 df1: FirstName LastName PhNo uniqueid df
您好，我有一个需要填写的 PDF 表单。该应用程序向用户(表单)提出问题，提交时应将答案填写到 PDF 空白处以供打印。 我熟悉 JS 和 Node(有一段时间没用过)。不使用 PHP。 我会在我常去
假设我有一个如下所示的数据框: ID DATE VALUE 1 31-01-2006 5 1 28-02-2006 5 1 31
我想做的是，在填写四个字符时指向下一个选项卡。每个字段应有 4 个字符，完成后应移至下一个输入框。 $(".inputs").keyup(function () { if (this
我有 3 个 div，每个都有几个输入字段和下一步按钮。我想编写一个 jQuery 片段，当单击下一个按钮时，它会检查以确保与按钮位于同一 div 内的所有输入字段都不为空。 我已经尝试了以下但没有成
我正在做一个刽子手项目。我已经让大部分代码正常工作了。 我无法工作的部分是“ secret 单词”有多个相同的字母。例如“hello”有 2 个“l”。 这是代码部分的代码，如果猜测正确，它将“---
拥有抽象对象的集合:Set foes; 我想要一个这样的方法: List getFoesByType(TypeEnum type); 我已经尝试过: List result = new ArrayLi
我正在尝试使用 scrapy 填写 POST 表单，以尝试预订火车票。 我以为 FormRequest 类可以做这件事，但我无法处理 javascript 表单。 Scrapy 爬虫什么都不返回。 我
我使用以下代码生成带有渐变的图像。我逐个元素访问数组。有更好的方法吗？谢谢。 import cv2 import numpy as np x = np.ndarray((256,256,3), dty
我有一个数据对应于数据库列表和差异行，以及它们的使用日期。 DB Dates USAGE ABC 03-06-2018 IN USE
我是一名优秀的程序员,十分优秀！