GitHub Issues实现按钮填充评论框并自动提交的问题与解决方案

Hey there! Nice job getting the text box filled—let's sort out that submit button issue you're hitting.

Why Your Initial Code Didn't Work #

Your line document.getElementsByClassName('bg-gray-light ml-1').click() failed for two key reasons:

• getElementsByClassName returns an HTMLCollection (a list of elements), not a single element. You need to target the first item in that list with [0].
• The element with class bg-gray-light ml-1 is just a wrapper div, not the actual submit button itself. The button lives as a child element inside that wrapper.

The Working Solution #

Here's the adjusted code that will properly trigger the comment submission:

clickToRespond = () => { 
  // Fill the comment textbox (this part was already working great!)
  document.getElementById('new_comment_field').value = 'This is a test';
  
  // Target the actual submit button inside the wrapper and click it
  document.getElementsByClassName('bg-gray-light ml-1')[0].childNodes[1].click();
}

Quick Breakdown of the Fix #

• document.getElementsByClassName('bg-gray-light ml-1')[0]: Grabs the first matching wrapper element around the submit button.
• .childNodes[1]: Accesses the second child node of that wrapper, which is the actual <button> element that handles the submission.
• .click(): Triggers the click event on the button, just like a user clicking it manually.

A More Robust Alternative (Optional) #

To avoid relying on child node indexes (which could break if GitHub updates their DOM structure), you can use querySelector to target the button directly. This is more future-proof:

clickToRespond = () => { 
  document.getElementById('new_comment_field').value = 'This is a test';
  // Target the submit button using its specific attributes
  document.querySelector('.bg-gray-light.ml-1 button[type="submit"]').click();
}

This looks for a <button> with type="submit" inside the wrapper, which is less likely to change than the position of child nodes.

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