gpt4 book ai didi

javascript - 通过按钮更改

之间的文本

转载 作者:行者123 更新时间:2023-11-30 16:26:12 24 4
gpt4 key购买 nike

我在使用一组 javascript 函数更改我正在处理的网页上的某些文本时遇到了问题。页面初始显示三个项目(到期金额、当前余额、期初余额)的状态,目的是从之前的余额中扣除到期金额得到当前余额,然后分别显示更新的三个项目(金额到期、当前余额、之前的余额)。

这是 JavaScript 和 HTML:

var amountDue = "Amount Due = $0.00"
var currentBalance = "Current Balance = $950.00"
var beginningBalance = "Beginning Balance = $972.69"

var p = document.getElementById('amount_due');
btn.onclick = function(){
p.textContent = amountDue;
};

var p = document.getElementById('current_balance');
btn.onclick = function(){
p.textContent = currentBalance;
};

var p = document.getElementById('beginning_balance');
btn.onclick = function(){
p.textContent = beginningBalance;
};
<html>
<head>
</head>
<body bgcolor="#FE7C00">
<h1 style=font-family:Arial;text-left;size:14pt;
color:#00FF00;>
Account Details
</h1>
<p id="amount_due">Amount Due = $22.69</p>
<p id="current_balance">Current Balance = $972.69</p>
<p id="beginning_balance">Beginning Balance = $972.69<br></p>
<input type="button" id="btn" value="Pay Amount Due?" />
<br>
<br>
<br>
<table style="width:100%">
<tr>
<td>Crif Dogs</td>
<td>December 5, 2015</td>
<td>$4.56</td>
</tr>
<tr>
<td>Tony's Pizza</td>
<td>December 6, 2015</td>
<td>$10.57</td>
</tr>
<tr>
<td>Xian's Famous Foods</td>
<td>December 7, 2015</td>
<td>$7.56</td>
</tr>
</table>
<script src="java.js"></script>
</body>
</html>
</body>

现在当我点击按钮时什么也没有发生。知道如何让 javascript 将所有 p 内容更改为新信息吗?

最佳答案

您正在覆盖 btn.onclick 函数和 p 变量的值。

重命名“p”变量并在一个 onclick 函数中更改所有内容即可完成工作。

var amountDue = "Amount Due = $0.00"
var currentBalance = "Current Balance = $950.00"
var beginningBalance = "Beginning Balance = $999.69"

var amountDueP = document.getElementById('amount_due');
var currentBalanceP = document.getElementById('current_balance');
var beginningBalanceP = document.getElementById('beginning_balance');
btn.onclick = function() {
amountDueP .textContent = amountDue;
currentBalanceP .textContent = currentBalance;
beginningBalanceP .textContent = beginningBalance;
};
<html>
<head>
</head>
<body bgcolor="#FE7C00">
<h1 style=font-family:Arial;text-left;size:14pt;
color:#00FF00;>
Account Details
</h1>
<p id="amount_due">Amount Due = $22.69</p>
<p id="current_balance">Current Balance = $972.69</p>
<p id="beginning_balance">Beginning Balance = $972.69<br></p>
<input type="button" id="btn" value="Pay Amount Due?" />
<br>
<br>
<br>
<table style="width:100%">
<tr>
<td>Crif Dogs</td>
<td>December 5, 2015</td>
<td>$4.56</td>
</tr>
<tr>
<td>Tony's Pizza</td>
<td>December 6, 2015</td>
<td>$10.57</td>
</tr>
<tr>
<td>Xian's Famous Foods</td>
<td>December 7, 2015</td>
<td>$7.56</td>
</tr>
</table>
<script src="java.js"></script>
</body>
</html>
</body>

关于javascript - 通过按钮更改 <p> 之间的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34112959/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com