Question

我无法使用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内容更改为新信息吗？

Answer 1

您正在覆盖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>

Answer 2

修改了js.Here是片段

var amountDue = "Amount Due = $0.00"
var currentBalance = "Current Balance = $950.00"
var beginningBalance = "Beginning Balance = $999.69"
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
  var p1 = document.getElementById('amount_due');
  var p2 = document.getElementById('current_balance');
  var p3 = document.getElementById('beginning_balance');
  p1.innerHTML=amountDue;
  p2.innerHTML=currentBalance;
  p3.innerHTML=beginningBalance
  },false);

修改

将innerHTML替换为textContent

var amountDue = "Amount Due = $0.00" var currentBalance = "Current Balance = $950.00" var beginningBalance = "Beginning Balance = $999.69" var btn = document.getElementById('btn'); btn.addEventListener('click',function(){ var p1 = document.getElementById('amount_due'); var p2 = document.getElementById('current_balance'); var p3 = document.getElementById('beginning_balance'); p1.textContent =amountDue; p2.textContent =currentBalance; p3.textContent =beginningBalance },false);

DEMO

希望这会有用

通过按下按钮在<p>之间更改文本

2 个答案: