用户输入数字时的 Javascript 计算器

2023-12-21

我是 Javascript 新手,但我正在尝试在我的网站上实现一些功能,用户可以在其中输入数量,并且小计会在输入时动态更新。 例如:如果每件物品的价格为 10 美元,并且用户在文本字段中键入 5,我希望它在文本框旁边显示 50 美元。非常简单的乘法,但我不知道如何用 Javascript 来做。我认为 onKeyPress 不知何故?谢谢!


假设以下 HTML:

<input type="text" id="numberField"/>
<span id="result"></span>

JavaScript:

window.onload = function() {
   var base = 10;
   var numberField = document.getElementById('numberField');
   numberField.onkeyup = numberField.onpaste = function() {
      if(this.value.length == 0) {
         document.getElementById('result').innerHTML = '';
         return;
      }
      var number = parseInt(this.value);
      if(isNaN(number)) return;
      document.getElementById('result').innerHTML = number * base;
   };
   numberField.onkeyup(); //could just as easily have been onpaste();
};

这是一个工作示例 http://jsfiddle.net/Dem6Q/.

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

用户输入数字时的 Javascript 计算器 的相关文章

随机推荐

  • 无法找到组合@Published - Xcode11 Beta 5(11M382q)

    我正在尝试使用以下内容运行一个简单的项目 Published var currentPlacemark CLPlacemark nil XCode 11 Beta 5 11M382q iOS13 17A5556d 出现以下错误 dyld S
  • azure辅助角色中的异步/等待导致角色回收

    我正在我的 WorkerRole RoleEntryPoint 中使用任务 异步和等待 我有一些无法解释的回收 现在我发现 如果等待调用中的某些内容运行时间过长 则角色会回收 要重现它 只需在 Run 方法中执行 await Task De
  • Jquery UI 可调整大小 - 调整放置在 iframe 上的 div 的大小

    如果你查看这个 jsbin http jsbin com efosed 5 edit http jsbin com efosed 5 edit然后你按 Run with JS 就会出现一个可以用 jquery ui 调整大小的 div 一切
  • Azure Functions 部署时无法运行

    我是新来的 如果帖子不完整 抱歉 我正在尝试在 azure 上部署一个与 blob 交互的 python 脚本 该脚本在本地运行良好 我可以与我的存储帐户交互 上传和下载 blob 但是当我在 azure 上部署我的函数时 它不会运行 日志
  • bash 使用序列号批量重命名文件夹和子文件夹中的文件

    我需要一个 bash 脚本来执行以下操作 对于文件夹及其子文件夹中存在的特定类型的每个文件 它都会在前面添加一个序列号 4 位数字 后跟一个分隔符 例如我有 Queen 1986 A Kind of Magic 01 One vision
  • 流程图 - 动态更改 y 轴

    我是飞行新手 但很快就设置了我的时间图 这是我基于时间的情节 plot placeholder d xaxis mode time minTickSize 1 month min new Date 2008 05 20 getTime ma
  • 为什么我需要将“get”包装在 J“lapply”调用中的虚拟函数中?

    我希望通过类或常见模式匹配等标准来处理列grep 我的第一次尝试没有成功 require data table test table lt data table a 1 10 ab 1 10 b 101 110 this does not
  • 在 Netbeans 内运行时停止 Tomcat

    我使用 NetBeans 运行 Apache Tomcat 6 当我的代码出现故障 例如 NullPointerException 时 tomcat 会失败并且不会运行任何其他请求 我的问题是我无法让 tomcat 停止 我必须重新启动整个
  • 查找 Java 应用程序中的连接泄漏

    我有一个应用程序在一段时间后开始出现内部服务器错误 我询问的一些人告诉我 这可能是因为我的应用程序中的连接泄漏 我开始搜索并发现这个查询来模拟连接泄漏 select LAST CALL ET SQL TEXT username machin
  • 堆积条形图未正确更新 d3js

    In this https plnkr co edit X7JYRLCKgBnasP86FRgQ p preview堆积条形图我添加了一个平分线和一个自定义x invert函数 以便您可以读取每个月的值 问题是 当我添加此自定义函数时 团队
  • OpenXML SDK 2.0 与 Aspose 在 .NET 中生成服务器端 Word 2007 文档

    我将在 Net 中启动一个服务器端办公自动化项目 以下是计划的主要活动 创建一个word文档 使用现有的包含封面 页眉 页脚 目录的 Word 文档模板 保存存档 嵌入文件并调整大小 HTML 图像 Word Excel TOC 生成和格式
  • 我无法从数据库 PostgreSQL 生成 Hibernate 映射文件和 POJO?

    已经在数据库 PostgreSQL 中创建了表和关系 但是当我想生成 Hibernate 映射文件和 POJO 时 它们没有生成 我应用了所有适当的步骤hibernate cfg xml一代和hibernate reveng xml 我认为
  • 如何在没有数据库的情况下配置 Ruby on Rails?

    对于当前不需要数据库的小型网站项目来说 使用 Ruby on Rails 会很方便 我知道我可以在 MySQL 中创建一个空数据库并从那里开始 但是有人知道在没有数据库的情况下运行 Rails 的更好方法吗 Thanks For Rails
  • 对于矩阵向量乘法,行优先排序是否更有效?

    If M是一个 n x m 矩阵并且v and u是向量 那么就索引而言 矩阵向量乘法看起来像u i sum M i j v j 1 lt j lt m Since v是一个向量 对于面向数值计算的语言 其元素可能存储在连续的内存位置中 如
  • python 在pdf文件中搜索

    这是pdf结构的一部分 5 0 obj lt lt Length 56 gt gt stream BT F1 12 Tf 100 700 Td 15 TL JavaScript example Tj ET endstream endobj
  • matplotlib中如何限制y轴高度?

    如何限制matplotlib图中y轴的高度 我正在尝试显示 x 轴 并降低该一维图的图形高度 我尝试过设置刻度 图形大小 tight layout 边距等 但没有成功 另外 无论我选择什么限制 更改 ylimit 都会跨越整个图形高度 im
  • Maven 故障安全插件不运行并行测试

    我有一个 Maven POM 文件 当我提供并行执行选项时 我在日志中没有看到任何并行执行的迹象 XML 调试让我抓狂 有什么想法这里出了什么问题吗
  • 查找两条曲线之间的重叠面积

    我一直在努力寻找解决方案来找到两条曲线之间的重叠区域 我处理的不是具有已知参数的概率密度函数 而是通过平滑经验数据点获得的曲线 我发现的唯一提示是计算不重叠的区域 如这段代码 来自here https www researchgate ne
  • 使用 python 求解 7000x7000 线性系统时的最佳性能方法

    我需要一种有效的方法来反转 python 中的 7000x7000 空气动力学影响系数 密集 矩阵 在使用 FORTRAN 例程之前 我已经开始使用 LAPACK 中的 LU 分解例程来处理问题 我已经看到它在其他相关应用程序中的使用非常有
  • 用户输入数字时的 Javascript 计算器

    我是 Javascript 新手 但我正在尝试在我的网站上实现一些功能 用户可以在其中输入数量 并且小计会在输入时动态更新 例如 如果每件物品的价格为 10 美元 并且用户在文本字段中键入 5 我希望它在文本框旁边显示 50 美元 非常简单