如何创建元素并为其on-click事件设参？自定义表单选择题开发问询

Hey there! I see you're building a custom form page with multiple-choice questions, and you're stuck on how to create elements and attach onclick events with parameters. Let's work through this step by step.

First, Let's Refine Your Existing Code #

Looking at your current snippet, here's a cleaned-up, more readable version to keep your multiple-choice structure organized:

// Push a new question object into the Q array to track all components
Q.push({
  text: document.createElement("h3"),
  divQ: document.createElement("div"),
  divO: document.createElement("div"),
  chooserButton: document.createElement("button"),
  optionNum: 0
});

// Set the question heading text with template literals for clarity
Q[qNum - 1].text.innerHTML = `question ${qNum} - ${kind}`;

// Append the heading to your target question container
document.getElementById(`question${qNum - 1}`).appendChild(Q[qNum - 1].text);

This makes it easier to track each question's elements and state as you build out the form.

Now, Attaching Onclick Events with Parameters #

When creating elements dynamically and needing to pass parameters to their click handlers, there are 4 reliable, easy-to-use methods:

1. Arrow Functions (Modern & Straightforward) #

Arrow functions let you wrap your handler and pass parameters directly, while keeping your code clean:

// Create a new option button
const optionBtn = document.createElement("button");
optionBtn.textContent = "Select Option";

// Define your parameters (e.g., question ID, option value)
const questionId = qNum - 1;
const optionValue = "Option 1";

// Attach onclick with parameters
optionBtn.onclick = () => {
  handleOptionSelect(questionId, optionValue);
};

// Your handler function to process the click
function handleOptionSelect(qId, optVal) {
  console.log(`Selected option "${optVal}" for question ${qId}`);
  // Add your logic here (e.g., save selection, update form state)
}

// Append the button to the question's options container
Q[qNum - 1].divO.appendChild(optionBtn);

2. bind() Method (For Reusable Handlers) #

Use bind() to pre-set parameters for your handler function—this is useful if you want to reuse the same handler across multiple elements:

const addOptionBtn = document.createElement("button");
addOptionBtn.textContent = "Add New Option";

// Bind parameters (first argument is `this`; set to null if you don't need it)
addOptionBtn.onclick = addNewOption.bind(null, Q[qNum - 1]);

function addNewOption(questionObj) {
  questionObj.optionNum++;
  const newOption = document.createElement("div");
  newOption.textContent = `Option ${questionObj.optionNum}`;
  questionObj.divO.appendChild(newOption);
}

3. Custom Data Attributes (Store Params Directly on Elements) #

If you prefer to keep parameters attached to the element itself, use data-* attributes and read them in the handler:

const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete Question";

// Set custom data attributes
deleteBtn.dataset.questionIndex = qNum - 1;

// Attach onclick that reads the data attributes
deleteBtn.onclick = function() {
  const questionIndex = this.dataset.questionIndex;
  deleteQuestion(questionIndex);
};

function deleteQuestion(index) {
  Q.splice(index, 1);
  document.getElementById(`question${index}`).remove();
}

4. addEventListener (For Multiple Listeners) #

Instead of using the onclick property, use addEventListener—this is ideal if you might need multiple click listeners on the same element:

const saveBtn = document.createElement("button");
saveBtn.textContent = "Save Question";

const currentQuestion = Q[qNum - 1];

// Add click listener with parameters
saveBtn.addEventListener("click", () => {
  saveQuestion(currentQuestion);
});

function saveQuestion(questionObj) {
  const questionData = {
    text: questionObj.text.textContent,
    optionCount: questionObj.optionNum
  };
  console.log("Saved question data:", questionData);
}

Quick Pro Tip #

As your form grows, consider wrapping each question's logic in a class or factory function. This will keep your code modular, making it easier to add, update, or remove questions without messy array index tracking.

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