一段JS代码如何在同一个页面多次调用？

seemoon2006 2016-10-26 11:39:06
我的代码是下面这样写的，可是只有第一个能够计算出数值，第二行输入数据计算不出来，要如何让下面那段JS能够多次调用，两行能够分别计算出其数值？


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/JavaScript">

function yunfei_s(str) {

    var shijifeiyong   =   2000111;

    var percen=document.getElementById("percen").value;

    var tz=document.getElementById("tz").value;

    var zongfeiyong;

    zongfeiyong = shijifeiyong*(percen/100)+tz;

    document.getElementById ('result').innerHTML =  parseFloat(zongfeiyong).toFixed(2);

}

</script>

<script type="text/javascript">

var num = new Number(13.37343543214312);

document.write (num.toFixed(1))

</script>

</head>

<body>

<input id="percen" type="text">

<input id="tz" type="text">

<input type="button" value="ok" onclick="yunfei_s(1)">

<span id="result"></span>



<br />

<input id="percen" type="text">

<input id="tz" type="text">

<input type="button" value="ok" onclick="yunfei_s(2)">

<span id="result"></span>



</body>

</html>
...全文
632 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
当作看不见 2016-10-26
  • 打赏
  • 举报
 回复
id 是唯一的，虽然css 渲染可以对多个id渲染，但是js 获取id ，获取到第一个值的时候就直接返回了，不管后面是否有同名的id ，所以你把id 改为class ，获取class 的集合的成员计算就没有问题
seemoon2006 2016-10-26
  • 打赏
  • 举报
 回复
引用 1 楼 qq_32692441 的回复:
id两个一样？ 这样都可以？ function yunfei_s(id1,id2,str) { var shijifeiyong = 2000111; var percen=document.getElementById(id1).value; var tz=document.getElementById(id2).value; var zongfeiyong; zongfeiyong = shijifeiyong*(percen/100)+tz; document.getElementById ('result').innerHTML = parseFloat(zongfeiyong).toFixed(2); }
兄台这样不行啊，你在帮我看下要怎么来弄？第一个值都算不出来了。
一陀牛屎 2016-10-26
  • 打赏
  • 举报
 回复
id两个一样？ 这样都可以？ function yunfei_s(id1,id2,str) { var shijifeiyong = 2000111; var percen=document.getElementById(id1).value; var tz=document.getElementById(id2).value; var zongfeiyong; zongfeiyong = shijifeiyong*(percen/100)+tz; document.getElementById ('result').innerHTML = parseFloat(zongfeiyong).toFixed(2); }
Braska 2016-10-26
  • 打赏
  • 举报
 回复
引用 11 楼 seemoon2006 的回复:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/JavaScript">
function yunfei_s(str) {
    var shijifeiyong   =   2000111;
    var percen=document.getElementById("percen"+str).value;
    var tz=document.getElementById("tz"+str).value;
    var zongfeiyong;
    zongfeiyong = shijifeiyong*(percen/100)+tz;
    document.getElementById ('result'+str).innerHTML =  parseFloat(zongfeiyong).toFixed(2);
}
</script>
<script type="text/javascript">
var num = new Number(13.37343543214312);
document.write (num.toFixed(1))
</script>
</head>
<body>
<input id="percen1" type="text">
<input id="tz1" type="text">
<input type="button" value="ok" onclick="yunfei_s(1)">
<span id="result1"></span>

<br />
<input id="percen2" type="text">
<input id="tz2" type="text">
<input type="button" value="ok" onclick="yunfei_s(2)">
<span id="result2"></span>

</body>
</html>
哦， 我以为你的问题是第二行不显示数据。 根本原因还是ID重复问题啊，要学会举一反三。
seemoon2006 2016-10-26
  • 打赏
  • 举报
 回复
引用 10 楼 Ragin 的回复:
[quote=引用 9 楼 seemoon2006 的回复:]

<span id="result1"></span>
<span id="result2"></span>
document.getElementById ('result'+str).innerHTML = parseFloat(zongfeiyong).toFixed(2);

改了三个地方，我本地是可以的。要么你没用我这段代码测，要么你给的源码不是原汁原味套过去还会有其他错误。[/quote]

我就是完全复制了你的代码过来的，一个字符都没动过，不过不行哦，你先输入第二行的两个框，按OK按钮，结果显示0.00，这是不正确的，你先输入第一行的话，这一行可以算出正确结果，你在输入第二行（数值和第一行不一样），计算的结果和第一行的结果一样，这也是不正确的。
我附图如下：

Braska 2016-10-26
  • 打赏
  • 举报
 回复
引用 9 楼 seemoon2006 的回复:
<span id="result1"></span> <span id="result2"></span> document.getElementById ('result'+str).innerHTML = parseFloat(zongfeiyong).toFixed(2); 改了三个地方，我本地是可以的。要么你没用我这段代码测，要么你给的源码不是原汁原味套过去还会有其他错误。
seemoon2006 2016-10-26
  • 打赏
  • 举报
 回复
引用 8 楼 Ragin 的回复:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/JavaScript">
function yunfei_s(str) {
    var shijifeiyong   =   2000111;
    var percen=document.getElementById("percen").value;
    var tz=document.getElementById("tz").value;
    var zongfeiyong;
    zongfeiyong = shijifeiyong*(percen/100)+tz;
    document.getElementById ('result'+str).innerHTML =  parseFloat(zongfeiyong).toFixed(2);
}
</script>
<script type="text/javascript">
var num = new Number(13.37343543214312);
document.write (num.toFixed(1))
</script>
</head>
<body>
<input id="percen" type="text">
<input id="tz" type="text">
<input type="button" value="ok" onclick="yunfei_s(1)">
<span id="result1"></span>

<br />
<input id="percen" type="text">
<input id="tz" type="text">
<input type="button" value="ok" onclick="yunfei_s(2)">
<span id="result2"></span>

</body>
</html>
id重命名啊，不能重复的。
你这个不行，也是不能用，不过还是谢谢你了哈
seemoon2006 2016-10-26
  • 打赏
  • 举报
 回复
引用 6 楼 qq_32692441 的回复:
怎么不行？你把id改不一样 就行了
不行，楼上的兄台已经帮我解决了，感谢@qq_29594393这位兄台哦
Braska 2016-10-26
  • 打赏
  • 举报
 回复 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/JavaScript">
function yunfei_s(str) {
    var shijifeiyong   =   2000111;
    var percen=document.getElementById("percen").value;
    var tz=document.getElementById("tz").value;
    var zongfeiyong;
    zongfeiyong = shijifeiyong*(percen/100)+tz;
    document.getElementById ('result'+str).innerHTML =  parseFloat(zongfeiyong).toFixed(2);
}
</script>
<script type="text/javascript">
var num = new Number(13.37343543214312);
document.write (num.toFixed(1))
</script>
</head>
<body>
<input id="percen" type="text">
<input id="tz" type="text">
<input type="button" value="ok" onclick="yunfei_s(1)">
<span id="result1"></span>

<br />
<input id="percen" type="text">
<input id="tz" type="text">
<input type="button" value="ok" onclick="yunfei_s(2)">
<span id="result2"></span>

</body>
</html>
id重命名啊，不能重复的。
一陀牛屎 2016-10-26
  • 打赏
  • 举报
 回复
怎么不行？你把id改不一样 就行了
当作看不见 2016-10-26
  • 打赏
  • 举报
 回复 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>

<script type="text/javascript">
var num = new Number(13.37343543214312);
document.write (num.toFixed(1))
</script>
</head>
<body>
<input class="percen" type="text">
<input class="tz" type="text">
<input type="button" value="ok" onclick="yunfei_s(0)">
<span class="result"></span>
 
<br />
<input class="percen" type="text">
<input class="tz" type="text">
<input type="button" value="ok" onclick="yunfei_s(1)">
<span class="result"></span>
 
</body>
<script type="text/JavaScript">

var tzlist=document.getElementsByClassName('tz');
var percenlist=document.getElementsByClassName('percen');
var resultlist=document.getElementsByClassName('result');
function yunfei_s(n) {
    var shijifeiyong   =   2000111;
    var percen= percenlist[n].value;
    var tz=tzlist[n].value;
    var zongfeiyong;
    zongfeiyong = shijifeiyong*(percen/100)+tz;
    resultlist[n].innerHTML= parseFloat(zongfeiyong).toFixed(2);
}
</script>

</html>
seemoon2006 2016-10-26
  • 打赏
  • 举报
 回复
引用 3 楼 qq_29594393 的回复:
id 是唯一的，虽然css 渲染可以对多个id渲染，但是js 获取id ，获取到第一个值的时候就直接返回了，不管后面是否有同名的id ，所以你把id 改为class ，获取class 的集合的成员计算就没有问题
我把id换成class还是不行，能不能告诉我具体怎么改吗？
0行代码写服务服务-服务发布-调用
通过该课程的学习，掌握0行代码写服务框架的服务发布，参数验证，代码生成功能，具备初步的使用能力 该项目本身设计的内容非常多，后期会逐步开放讲解框架后期内容参考：https://mp.csdn.net/editor/html/112142371与Springboot+mybatis和Springboot+jdbctemplate对比：https://editor.csdn.net/md/?articleId=106091083框架主要功能：生成自定义sql模板文件1.一键生成数据库所有列表增、删、改、查接口通过代码生成器，一键生成增、删、改、查代码，分为有代码和无代码两种方式。有代码方式可以在需要业务封装时直接调用生成的代码进行业务组装。有代码方式和无代码方式都可以直接调用访问。2.可指定单表生成接口可以指定生成那张表的数据接口，以免对已有接口造成影响。3.一键生成接口测试postman调用文件生成postman调用接口，直接导入即可测试，不需要单独也写接口文档，也不需要使用swangger在代码中单独增加注释。字段长度类型，大小一目了然。4.可生成controller、service、dao、model、自定义sql、postman测试文件可以根据实际需要进行单独配置5.接口任意参数可自动配置多维度验证比如一个参数phone,在不需要编程的情况下，可以配置验证是否为空、长度、是否是电话号码6.数据接口可以任意组合形成新的接口比如、查询学校是一个接口、查询城市是一个接口，通常情况下在前端是需要两次请求，现在可以通过一次请求自动合并两个接口的数据结果，一次性返回。而这样的组合可以是无限个组合。7.所有接口参数均可自动封装比如查询省份接口，里面有10个参数，前端传入几个参数，便可自动封装几个参数。8.所有查询接口自带分页列表查询，有码方式和无码方式，均自带分页。9.通过简单sql的编辑即可完成服务发布只要会写sql便可生成服务，不需要任何多余操作10.接口可以进行限流配置，可以根据ip、token、ak进行限流操作多维度自定义限流，可设置次数、时限、限流方式11.所有接口可以进行签名认证所有接口通过接口sign签名认证12.所有接口可以进行登录认证限制，也可单独配置不需要登录认证可以指定接口单独授权不需要登录验证，比如验证码接口13.所有接口均可设置需要验证码验证所有的接口都可以通过参数配置设置短信验证码和图片验证码14.所有查询接口均可单独设置缓存所有接口皆可设置单独缓存，缓存周期15.所有接口均可监控访问次数同一接口访问次数记录，很容易监控服务访问，可以做更细致的服务优化16.所有接口均可记录访问日志，包括请求来源请求参数、获得结果入参出参所有访问皆有详细记录17.项目中的代码可以进行自动统计代码量一键统计代码量，包括前后端代码行数和体积18.可以自动进行数据统计，可配置单表数据量统计、也可以配置定时任务数据统计自动表数据统计，方便做BI可视化报表，不需要开发直接配置即可19.可进行跨域设置跨域通过配置文件配置20.可进行IP禁用对于恶意访问ip进行封禁21.可进行访问次数限制所有接口可以进行访问次数限制22.可进行访问来源设备、应用检查验证验证请求来源所用设备和请求发起的应用
多个HTML页面共同调用一段html代码
方法一、使用script方法： 制作一个共用头部文件head.js或一个共用底部文件foot.js。如主页文件是mac.htm，调用头部或底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:<script src=’head.js’>和<script src=’foot.js’>调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度...
uniapp开发手机app，一个页面调用多次同一个下拉框子组件，保证同时间下拉框只打开一个（兄弟组件间的通讯））
1、业务需求：封装一个下拉框的组件，下拉框弹出时，下拉框下面有半透明遮罩，下拉框上面正常显示，效果如图： 2、问题：当一个页面同时引用多次该组件时，下拉框和遮罩会同时存在彼此叠加 3、解决： 其实这个过程就是一个兄弟组件之间的通信问题，当有下拉框打开时，通知另外的下拉框都保持关闭状态。 父页面引用组件代码： <template> <!-- 筛选框 --> <view class="searchBox"> <view class="inline shopNum
JavaScript中防止函数多次调用：防抖和节流
防抖 你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。 这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。 PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情...
请求网页时，怎么给我返回了一段 JavaScript 代码
今天给大家带来的是一个论坛网站，牛仔俱乐部-努比亚社区， 网址为：https://bbs.nubia.cn/ 如果你想要获取这个网站的源代码的话，必须要先获取一个 cookie，其字段名为：acw_sc__v2，你是不是不相信？爬取网站还需要获取 cookie 值才可以？说实话，我刚开始爬的时候我也不相信，直到我运行请求代码，一看，给我返回这个： 这是什么啊，一段 JavaScript 代码，...
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章