JavaScript：如何将预定义文本替换为用户输入的文本变量？

Got it, let's break down how to swap those predefined hardcoded texts with the user-entered content from your input fields. The key thing to note here: your variables title, xaxis, and yaxis reference the input elements themselves—not the actual text inside them. You'll need to use their .value property to pull the user's input.

Step 1: Grab the Input Values #

First, access the text the user typed into each field. You can either use the .value directly when needed, or store them in separate variables for readability:

// Get the latest user input values
const customTitle = title.value;
const customXAxisLabel = xaxis.value;
const customYAxisLabel = yaxis.value;

Step 2: Replace Predefined Text #

Now wherever your code has hardcoded strings (like "title text"), swap them with these value variables. Here are two common use cases:

Scenario 1: Updating a Chart Configuration

If you're using a chart library (e.g., Chart.js) with a config object, update the relevant properties:

// Original config with hardcoded text
const originalChartConfig = {
  title: {
    text: "title text" // Replace this
  },
  xAxis: {
    title: {
      text: "Default X Axis" // Replace this
    }
  },
  yAxis: {
    title: {
      text: "Default Y Axis" // Replace this
    }
  }
};

// Updated config using user input
const updatedChartConfig = {
  title: {
    text: customTitle
  },
  xAxis: {
    title: {
      text: customXAxisLabel
    }
  },
  yAxis: {
    title: {
      text: customYAxisLabel
    }
  }
};

Scenario 2: Updating Text Directly in the DOM

If you're modifying text elements on the page directly, replace hardcoded strings with the input values:

// Original code with hardcoded text
document.getElementById("chart-title-display").textContent = "title text";
document.querySelector(".x-axis-label").textContent = "Default X Axis";
document.querySelector(".y-axis-label").textContent = "Default Y Axis";

// Updated code using user input
document.getElementById("chart-title-display").textContent = customTitle;
document.querySelector(".x-axis-label").textContent = customXAxisLabel;
document.querySelector(".y-axis-label").textContent = customYAxisLabel;

Pro Tip: Trigger the Update at the Right Time #

Make sure you run this logic after the user has entered their text—for example, attach it to a button click or form submission. Otherwise, you'll grab empty values when the page loads:

// Update text when a button is clicked
document.getElementById("apply-input-btn").addEventListener("click", function() {
  const customTitle = title.value;
  const customXAxisLabel = xaxis.value;
  const customYAxisLabel = yaxis.value;

  // Run your update logic here
  document.getElementById("chart-title-display").textContent = customTitle;
  // ... other text updates
});

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