点击按钮在指定div下显示表单的JS问题排查与样式需求

Let's break down your issues one by one and fix them step by step:

1. Fixing the TypeError: document.getElementById(...) is null #

There are a few critical issues in your code that are causing this error and related problems:

a. Variable Scope & Naming Confusion #

Your reply function tries to access array[i].pk, but array is a local variable from your loop—it doesn't exist in the reply function's scope. This would break your form's action attribute, and combined with a typo in your loop code, it's contributing to the missing element issue.

Also, renaming the reply function parameter to something like replyId will avoid confusion with the function name itself.

b. Typo in Loop Code #

You have a typo when setting the list item's class:

item.clasName = "commentlistelement" // Wrong! Missing an 's'

Change it to:

item.className = "commentlistelement"

While this doesn't directly break the div's ID, it can cause unexpected DOM rendering behavior that might make your div harder to find.

c. Invalid HTML Element Creation #

<textfield> isn't a valid HTML element! Use either an <input type="text"> or <textarea> instead:

// For a single-line input:
var textfield = document.createElement('input');
textfield.type = 'text';

// Or for multi-line input:
var textfield = document.createElement('textarea');

d. Broken Form Action Setup #

Setting the form's action to a function call is incorrect—action expects a URL. Instead, use the onsubmit event to trigger your sendcomment function, and use the passed replyId (instead of trying to access array[i].pk):

Corrected reply Function #

function reply(replyId) {
  var form = document.createElement('form');
  var textfield = document.createElement('input');
  textfield.type = 'text';
  var submit = document.createElement('input');

  // Handle form submission correctly
  form.onsubmit = function(e) {
    e.preventDefault(); // Stop default form reload behavior
    sendcomment(replyId); // Use the passed ID directly
    // Optional: Clear input or remove the form after submission
  };

  textfield.className = "commenttextfield";
  textfield.setAttribute('placeholder', "reply...");
  submit.setAttribute('type', "submit");
  submit.className = "commentformsubmit";

  form.appendChild(textfield);
  form.appendChild(submit);

  // Find the target div and add the form
  var targetDiv = document.getElementById('comment-id-' + replyId);
  if (targetDiv) {
    // Add the form RIGHT AFTER the target div (outside the div)
    targetDiv.parentNode.insertBefore(form, targetDiv.nextSibling);
    // If you want the form inside the div instead, use:
    // targetDiv.appendChild(form);
  } else {
    console.error('Could not find comment div: comment-id-' + replyId);
  }
}

2. Making the Form Inherit the Div's padding-left #

Yes, this is totally feasible! Here are two simple approaches:

a. Reuse the Inline Style Directly #

Since your div's padding-left is set via inline styles, you can grab that value and apply it directly to the form:

// Add this right after creating the form in the reply function
if (targetDiv) {
  form.style.paddingLeft = targetDiv.style.paddingLeft;
  // ... rest of the code to add the form
}

b. Use CSS Variables (Cleaner, Scalable) #

If you want to avoid repeating inline styles, use CSS variables in your loop:

// In your loop where you create the main div:
var paddingValue = 3 * array[i].fields.indent + 'vw';
maindiv.style.setProperty('--comment-padding', paddingValue);
maindiv.setAttribute("style", "padding-left: var(--comment-padding);");

Then add this CSS rule to your stylesheet:

/* Give your form a class for targeting */
.comment-reply-form {
  padding-left: var(--comment-padding);
}

And add the class to your form in the reply function:

form.className = "comment-reply-form";

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