一段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>
...全文
658 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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还是不行，能不能告诉我具体怎么改吗？
js-时事通讯-设计完美HTML时事通讯的9个技巧.docx
js-时事通讯-设计完美HTML时事通讯的9个技巧.docx
AnyBackup-SQLServer应用容灾最佳实践.docx
AnyBackup-SQLServer应用容灾最佳实践.docx
发展大数据-扩大影响力.docx
发展大数据-扩大影响力.docx
我国智慧城市发展现状及未来趋势探索.docx
我国智慧城市发展现状及未来趋势探索.docx
Maven配置阿里云镜像仓库操作指南
资源下载链接为： https://pan.quark.cn/s/9e7ef05254f8 以下几种表述供你参考： 为 Maven 设置阿里云镜像仓库。 配置 Maven 使用阿里云镜像仓库。 将 Maven 配置为使用阿里云镜像仓库。 Maven 配置阿里云镜像仓库教程。 Maven 如何配置阿里云镜像仓库。 Maven 配置阿里云镜像仓库指南。 Maven 配置阿里云镜像仓库的方法。 Maven 配置阿里云镜像仓库的步骤。 Maven 配置阿里云镜像仓库的流程。 Maven 配置阿里云镜像仓库的操作。 Maven 配置阿里云镜像仓库的详细步骤。 Maven 配置阿里云镜像仓库的具体方法。 Maven 配置阿里云镜像仓库的完整流程。 Maven 配置阿里云镜像仓库的详细教程。 Maven 配置阿里云镜像仓库的完整指南。
JavaScript

87,997

社区成员

224,708

社区内容

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

加载中

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

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

+ 用AI写文章