如何去掉 JavaScript 代码文本框中的 NaN?

2023-11-29

我正在尝试制作一个三角形缺腿计算器。首先你放一条腿,即斜边,然后你就会得到缺失的腿。但是,如果您先填写第二个框,它会显示 NaN。我知道它没那么重要,但是有没有办法摆脱它,让它显示“0”,直到两个盒子都填满为止?这是代码:

<html>
<head>
<script type="text/javascript">
function missingleg(a,c){
return Math.sqrt(c*c - a*a);
}
</script>
</head>
<body>
<input type="button" value="Missing Leg";" />
Leg:<input type="text" id="leg" size="2";" />
Hypotenuse:<input type="text" id="hypo" size="2"onChange="document.getElementById('lostleg').value=missingleg(parseInt(document.getElementById('leg').value),parseInt(document.getElementById('hypo').value)); " />
Missing Leg:<input type="text" placeholder="0" id="lostleg" size="2" />
</body>
</html>

这里同样的事情...

<html>
<head>
<script type="text/javascript">
function hypotenuse(a,b){
return Math.sqrt(a*a + b*b);
}
</script>
</head>
<body>
<input type="button" value="Hypoteneuse";" />
A:<input type="text" id="leg1" size="2";" />
B:<input type="text" id="leg2" size="2" onChange="document.getElementById('result').value=hypotenuse(parseInt(document.getElementById('leg1').value),parseInt(document.getElementById('leg2').value));" />
Hypotenuse:<input type="text" placeholder="0" id="result" size="2" />
</body>
</html>   

尝试修改你的missingleg函数为此:

function missingleg(a,c) {
    if ( isNaN(a) || isNaN(c) ) {
        return 0;
    }
    return Math.sqrt(c*c - a*a);
}

关于风格问题的注释

纯粹出于风格目的,我会尝试在标记中放置尽可能少的代码。将代码保留在标记之外将使以后需要时更容易进行调试。引入一个新功能,updateMissingLeg(),然后让你的 HTML 像这样调用它:

<input type="text" id="hypo" size="2" onChange="updateMissingLeg()" />

作为奖励,您可以移动您的isNaN()检查该函数以保持missingleg()更简单:

function missingleg(a,c){
    return Math.sqrt(c*c - a*a);
}

function updateMissingLeg() {
    var a = parseInt(document.getElementById('leg').value);
    var c = parseInt(document.getElementById('hypo').value);
    if ( isNaN(a) || isNaN(c) ) {
        document.getElementById('lostleg').value = '';
        return;
    }
    var lostleg = missingleg(a, c);
    document.getElementById('lostleg').value = lostleg;
}

作为进一步的好处,您可以调用相同的updateMissingLeg()两个文本框控件的功能。

UPDATE 2

根据要求,以下是全部内容:

<html>
    <head>
        <script type="text/javascript">
            function missingleg(a,c){
                return Math.sqrt(c*c - a*a);
            }

            function updateMissingLeg() {
                var a = parseInt(document.getElementById('leg').value);
                var c = parseInt(document.getElementById('hypo').value);
                if ( isNaN(a) || isNaN(c) ) {
                    document.getElementById('lostleg').value = '';
                    return;
                }
                var lostleg = missingleg(a, c);
                document.getElementById('lostleg').value = lostleg;
            }
        </script>
    </head>
    <body>
        Leg: <input type="text" id="leg" size="2" 
                    onChange="updateMissingLeg()" />
        Hypotenuse: <input type="text" id="hypo" size="2"
                    onChange="updateMissingLeg()" />
        Missing Leg: <input type="text" placeholder="0" id="lostleg" size="2" />
    </body>
</html>

可以在这里找到一个可以使用它的jsfiddle。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何去掉 JavaScript 代码文本框中的 NaN? 的相关文章

  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 将 /username 指向 /[user]/[tab].js 而不是 nextjs 中的 [user]/index.js

    我正在尝试创建一个用户个人资料页面 该页面根据当前的情况生成内容tab用户在 该选项卡是根据 URL 中传递的内容决定的 例如 username tab1 唯一的问题是用户可以访问的有效选项卡之一实际上具有空白值 username 获取默认
  • sparql 期望“where”、“using”之一

    我正在尝试在 Fuseki 服务器的 Web 界面中执行一个简单的插入查询 我已将端点设置为 update 而不是默认的 sparql 我有以下查询https www w3 org Submission SPARQL Update PREF
  • 无循环或条件地显示从 1 到 100 的数字 [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 Locked 这个问题及其答案是locked因为这个问题是题外话 但却具有历史意义 目前不接受新的答案或互动 有没有一种方法可以打印从 1 到 100 的数字而不使用任何循环或条件
  • 为什么“getcontext().prec = 2”实际上没有设置它,以便 Decimal() 的使用达到两位小数?

    我正在编写一个处理货币值的程序 因此我希望它使用小数输出到小数点后两位 不幸的是 这不起作用 并且输出的数字更长 我在网上查了一下 但到目前为止 似乎没有针对这个特定问题的任何答案 以防程序的其余部分发生某些情况 我仅在基本数字上使用它运行
  • 如何完全抑制 Git Clone 输出?

    我正在写一个 shell 脚本 其中我正在做 log var tmp git prod test pack log out Time clone usr bin time f e git clone quiet ssh id xxxxxxx
  • 如何使 ASP.NET MVC 控制器方法异步

    我正在向各种 MVC 控制器发起多个 ajax 调用 以加载页面的不同部分 然而 当它到达控制器时 似乎一次只有一个运行 我猜这是因为默认情况下 ASP Net MVC 控制器是同步的 我还测试了在两个浏览器选项卡上加载页面 第二个选项卡始
  • CredStore执行查询错误

    我在对应用程序后端进行 API 调用时遇到问题 每个连接现在都会提示 CredStore performQuery Error copying matching creds Error 25300 query atyp http class
  • facebook $facebook->getSignedRequest();错误

    我正在尝试将此脚本添加到我在 facebook 上的 iframe 应用程序中 但它似乎不起作用 signed request facebook gt getSignedRequest like status signed request
  • 在play框架中填充html下拉列表[重复]

    这个问题在这里已经有答案了 可能的重复 在 Play Framework 2 0 模板中使用选项帮助器 正常的html代码
  • 纯Python逆误差函数

    有没有纯Python逆误差函数的实现 我知道 SciPy 有scipy special erfinv 但这依赖于一些 C 扩展 我想要一个纯 python 实现 我尝试使用自己编写维基百科 and Wolfram引用 但当 arg gt 0
  • Windows Phone 8 中的弹出窗口

    我想显示一个弹出窗口 其中媒体元素作为一个控件 当用户单击按钮时 我必须显示此弹出窗口 当用户单击设备的后退按钮时 应关闭弹出窗口 请帮助我如何在 Windows Phone 8 应用程序中执行此操作 带 MediaElement 的弹出窗
  • Wordpress 中的 Google 地图 API Javascript

    希望大家能够回答这个问题 我认为这应该相对容易 但我似乎无法掌握它 如何在 WordPress 帖子 页面中加载 Google Maps API Javascript WordPress Codex 似乎建议在主题标题中引用您的 javas
  • 计算十六进制字符串的二进制补码校验和

    我有一个字符串 0AAE0000463130004144430000 我需要计算组成该字符串的十六进制字节的二进制补码校验和 上面示例字符串的公式为 对值求和 0A AE 00 00 46 31 30 00 41 44 43 00 00 2
  • multiprocessing.Queue 作为池工作程序的参数中止工作程序的执行

    我实际上发现很难相信我遇到了我遇到的问题 这似乎是 python 多处理模块中的一个大错误 无论如何 我遇到的问题是每当我通过将 multiprocessing Queue 作为参数传递给 multiprocessing Pool 工作线程
  • Python get 获取矩阵中具有 na 值的邻居的平均值

    我有非常大的矩阵 所以不想通过遍历每一行和每一列来求和 a 1 2 3 3 4 5 5 6 7 def neighbors i j a return a i j 1 a i j 1 len a 0 a i 1 j a i 1 len a j
  • 处理 Rails 3 中的 has_one 嵌套资源

    我有一个用户模型和一个关于模型 关于模型是一个页面 用户可以在其中获得有关他们的更多信息 由于其性质 将其放在单独的模型上而不是在用户模型中更合适 我希望能够将其路由到 username about 之类的内容 并让所有动词在该路径上工作
  • 如何检测 Angular 中的路由变化?

    我正在寻找检测我的路线变化AppComponent 此后 我将检查全局用户令牌以查看用户是否已登录 以便在用户未登录时可以重定向用户 在 Angular 2 中你可以subscribe Rx 事件 到 Router 实例 所以你可以做类似的
  • 在 matplotlib 中显示所有数据集的固定宽度条形

    我有以下数据集 我需要绘制 1 2 或所有数据集的条形图 当我绘制单个数据项的图表时 例如 xdata 0 and ydata 1000 xlabels first 条形图会缩放以占据整个绘图区域 如何将条形图宽度限制为 0 45 ydat
  • 使用 vb.net 在 SQL 中保存日期

    我使用以下代码保存文本框中的日期并使用日期选择器选择日期 If String IsNullOrEmpty DobTxt Text Then SQLCmd Parameters Add DOB SqlDbType Date Value DBN
  • 如何去掉 JavaScript 代码文本框中的 NaN?

    我正在尝试制作一个三角形缺腿计算器 首先你放一条腿 即斜边 然后你就会得到缺失的腿 但是 如果您先填写第二个框 它会显示 NaN 我知道它没那么重要 但是有没有办法摆脱它 让它显示 0 直到两个盒子都填满为止 这是代码