Question

在更改html文件之前，正在更改id totalNumber的innerHTML。我该如何解决这个问题？

function startPayment() {
  let accounts = document.getElementById('#accountNumber').value;
  let total = document.getElementById('#total').innerHTML;
  if (accounts >= 20) {
    document.location.href = "payment.html";
    document.getElementById('#totalNumber').innerHTML = total;
  } else {
    alert("Minimum Accounts Not Met");
  }
}

这是新加载文件的HTML

<div class="paymentForm">
  <h1 class="payment">Payment</h1>
  <h2 class="totalFinal">Total: $ <span id="#totalNumber" class="totalNumber">0</span></h2>
  <input id="#nameOnCard" class="cardInput" placeholder="Name on Card"></input>
  <input id="#cardNumber" class="cardInput" placeholder="Card Number"></input>
  <input id="#cardExpiration" class="cardInput" placeholder="Card Expiration (MM/YY)"></input>
  <input id="#CVN" class="cardInput" placeholder="Card Verification Number"></input>
  <div id="#backBtn" class="backBtn">Back</div>
  <div id="#submitBtn" class="submitBtn">Submit</div>
</div>

Answer 1

主要答案（有更新）

如果我正确理解您的问题，您可以在# Contents from the '/media/user/README_1.md' markdown file: Read more [here](./README_2.md) # It works! Read more [here](file:///media/user/README_2.md) # Doesn't work Read more [here](/media/user/README_2.md) # Doesn't work之类的容器页面上运行此功能，然后交换整个不同的页面order.html（因为您的payment.html脚本）。

如果是这种情况，那么您正试图将数据从一个页面传递到另一个页面，而您正在运行的JS肯定会在新页面加载之前消失。我建议使用您传递的参数更新URL，然后在页面上使用新脚本进行解析以修改HTML文档。

window.location.href

然后当你加载window.location.href=payment.html?total=20时，你需要一个JS块来解析最后一页上生成的数据的URL。

为了记录，肯定还有其他解决方案，您可以探索从一个页面保存数据并在其他地方访问它，但这是一个简单的尝试，看看它是否有助于解决您的问题。 / p>

旁注

您提供的代码存在的问题是您在HTML中定义了ID的方式。如果您使用jQuery（即payment.html）选择带有JS的ID是正确的，但使用#totalNumber并在HTML中定义它们的方式ID只需要字符串本身而不是哈希标记指示符

换句话说：

getElementById

我看到的另一个问题（可能有意省略）是您的JS代码引用了您提供的HTML代码段中未包含的HTML元素。

如果您需要任何其他说明，请告诉我们！

Answer 2

你的html属性中有#（这不是W3C有效）和js函数参数。你必须删除它们，如：

<div class="paymentForm">
  <h1 class="payment">Payment</h1>
  <h2 class="totalFinal">Total: $ <span id="#totalNumber" class="totalNumber">0</span></h2>
  <input id="nameOnCard" class="cardInput" placeholder="Name on Card"></input>
  <input id="cardNumber" class="cardInput" placeholder="Card Number"><C/input>
  <input id="cardExpiration" class="cardInput" placeholder="Card Expiration (MM/YY)"></input>
  <input id="CVN" class="cardInput" placeholder="Card Verification Number"></input>
  <div id="backBtn" class="backBtn">Back</div>
  <div id="submitBtn" class="submitBtn">Submit</div>
</div>

用这个javascript：

function startPayment() {
  var accounts = parseInt(document.getElementById('accountNumber').value);
  var total = document.getElementById('total').innerHTML;
  if (accounts >= 20) {
    document.location.href = "payment.html";
    document.getElementById('totalNumber').innerHTML = total;
  } else {
    alert("Minimum Accounts Not Met");
  }
}

注意：为了比较accounts和20您必须使用parseInt功能，我将其添加到我的更正中

Answer 3

我在你的脚本中遇到问题在url中添加param：

function startPayment() {
  var accounts = parseInt(document.getElementById('accountNumber').value);
  var total = document.getElementById('total').innerHTML;
  if (accounts >= 20) {
    document.location.href = "payment.html?total=" + total;

  } else {
    alert("Minimum Accounts Not Met");
  }

}

然后在文档加载上加载新的html页面后执行此操作

var url = new URL(document.URL);
var total = url.searchParams.get("total");
document.getElementById('#totalNumber').innerHTML = total;

JavaScript无法从新的HTML文档中查找元素

3 个答案: