尽管在脚本中定义了功能，但为什么在检查时却未定义函数跳过和onclick？

Question

I am making a userscript to add two <a> elements to a page and modify other three. From these three, I need to remove the href and some other data-* unneeded attributes. Then, I'd like to add a title and define onclick (call a function). After that, I need to add the two <a> elements.

However, the function that should be called onclick is skipped and console is throwing sendFeedback is not defined when clicking the two new <a> s. Calling the function inside the script doesn't throw that error. Also, while I have an el.onclick = "sendFeedback(arg)" , there's no onclick, after inspecting the element. The new ones, though, have, because they were created inside the script.

Here's the part of the script that is incorrect:

const classes = ["success", "danger", "warning"];
const feedback_types = ["tp-", "fp-", "naa-"];
const descriptions = ["description 1", "description 2", "description 3"];

function sendFeedback(verdict) {

  // Below is for testing purposes, the function has another content
  console.info("Reached end of function; verdict is " + verdict);
};

for (var i = 0; i < 3; i++) {
  console.log("Start of for loop with i = " + i); // (Just for testing, too)
  var el = document.getElementsByClassName("feedback-button on-post text-" + classes[i]); // The two first classes are common, and there are three more classes: text-success, text-danger and text-warning
  $(el).removeAttr("href data-method data-remote data-post-id");
  $(el).attr("title", descriptions[i]);
  // $(el).attr("onclick", "sendFeedback(feedback_types[i])"); // onclick is not defined when inspecting
  el.onclick = "sendFeedback(feedback_types[i])"; // onclick is not defined when inspecting, too!
  if (i == 0) {
    $(el).before('<a title="some title here" class="feedback-button on-post text-success" onclick="sendFeedback(\'tpu-\')">✓😮</a>'); // add the first anchor element
  } else if (i == 1) {
    $(el).after('<a title="some title here" class="feedback-button on-post text-danger" onclick="sendFeedback(\'fpu-\')">✗😮</a>'); // add the second anchor element

  }
}

// Add "cursor: pointer" to all feedback buttons
$(".feedback-button").css("cursor", "pointer");

As mentioned, while onclick is defined, the three old <a> s have not onclick and in the two new ones, when clicking, there is an error 'sendFeedback' is not defined .

Adding sendFeedback(feedback_types[1]) at the end of the script however, makes console output:

Start of for loop with i = 0
Start of for loop with i = 1
Start of for loop with i = 2
Reached end of function; verdict is fp-

How to make onclick be defined in the <a> s and avoid {function} is not defined ?

Answer 1

Instead of

el.onclick = "sendFeedback(feedback_types[i])"; 

I would recommend the jQuery way (as you're already using jQuery)

$(el).click(function () {
    sendFeedback(feedback_types[i])
})

This should fix your problem.

See alsof https://api.jquery.com/click/