如何跨页面复用文本减少每月更新耗时？求助金额跨页同步实现

Hey David, no worries—this is a super common task, and I’ll walk you through a couple of straightforward JavaScript solutions that are perfect for beginners. Let’s break them down step by step:

Method 1: Pass the Amount via URL Parameter (Simplest Approach) #

This method sends the amount directly in the URL of the target page, which is easy to implement and works for most basic use cases.

Step 1: Add Click Logic to Your Button Page #

First, we’ll add a click event to your image button that grabs the amount and appends it to the target URL:

<!-- Your image button with an ID to target it in JS -->
<img src="your-button-image.jpg" alt="£1,000,000 Button" id="amountButton" />

<script>
// Wait for the page to fully load before running code
document.addEventListener('DOMContentLoaded', function() {
  // Get the button element
  const amountButton = document.getElementById('amountButton');
  // Define the amount (if this is dynamic, you can pull it from a data attribute instead—see tip below!)
  const targetAmount = '£1,000,000';

  // Add click event listener
  amountButton.addEventListener('click', function() {
    // Encode the amount to handle special characters (like £ or commas) safely
    const encodedAmount = encodeURIComponent(targetAmount);
    // Redirect to the target page with the amount as a URL parameter
    window.location.href = `target-page.html?selectedAmount=${encodedAmount}`;
  });
});
</script>

Step 2: Retrieve and Display the Amount on the Target Page #

On the page you’re linking to, we’ll grab the parameter from the URL and show it:

<!-- Element where you want to display the amount -->
<p>Selected Amount: <span id="displayAmount"></span></p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the URL parameters
  const urlParams = new URLSearchParams(window.location.search);
  // Fetch the encoded amount and decode it
  const decodedAmount = decodeURIComponent(urlParams.get('selectedAmount'));
  
  // Display the amount on the page
  const displayElement = document.getElementById('displayAmount');
  if (displayElement && decodedAmount) {
    displayElement.textContent = decodedAmount;
  }
});
</script>

Method 2: Use localStorage (For Cleaner URLs) #

If you don’t want the amount visible in the URL, localStorage lets you store the value temporarily in the user’s browser, then retrieve it on the target page.

Step 1: Store the Amount on Button Click #

Update your button page to save the amount when clicked:

<img src="your-button-image.jpg" alt="£1,000,000 Button" id="amountButton" />

<script>
document.addEventListener('DOMContentLoaded', function() {
  const amountButton = document.getElementById('amountButton');
  const targetAmount = '£1,000,000';

  amountButton.addEventListener('click', function() {
    // Save the amount to localStorage
    localStorage.setItem('selectedAmount', targetAmount);
    // Redirect to the target page
    window.location.href = 'target-page.html';
  });
});
</script>

Step 2: Fetch and Display the Amount on the Target Page #

On the target page, pull the value from localStorage and show it (plus optional cleanup):

<p>Selected Amount: <span id="displayAmount"></span></p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the amount from localStorage
  const savedAmount = localStorage.getItem('selectedAmount');
  const displayElement = document.getElementById('displayAmount');

  if (displayElement && savedAmount) {
    displayElement.textContent = savedAmount;
    // Optional: Remove the value from localStorage after use so it doesn't persist
    localStorage.removeItem('selectedAmount');
  }
});
</script>

Pro Tip for Dynamic Amounts #

If your button’s amount isn’t hardcoded (e.g., it changes based on user input), add a data-amount attribute to your image button:

<img src="your-button-image.jpg" alt="Amount Button" id="amountButton" data-amount="£1,000,000" />

Then in your JS, replace the hardcoded targetAmount with:

const targetAmount = amountButton.dataset.amount;

That’s it! Both methods are beginner-friendly and should work perfectly for your use case.

内容的提问来源于stack exchange，提问作者DavidW