button onclick with tampermonkey

Question

I'm new to all of this and I have decided to make a little script and I'm also using tampermonkey but when I add the buttons using tampermonkey the onclick seems to not work and I was wondering if anyone knew why this is happening?

// ==UserScript==
// @name         BUTTONS AND NICKNAMES
// @version      0.1
// @description  none right now
// @author       none right now
// @description Adds button, with nickname
// ==/UserScript==

// INTRO STYLE CODES INNERHTML
var IntroGuide = '';

IntroGuide += "<button class=\"btn btn-green\" style=\"width: 45%;\" id=\"names1\" onclick=\"name1();\">NAME [1]</button>";
IntroGuide += "&nbsp;";
IntroGuide += "<button class=\"btn btn-green\" style=\"width: 45%;\" id=\"names2\" onclick=\"name2();\">NAME [2]</button>";
IntroGuide += "<br><br>";
IntroGuide += "<button class=\"btn btn-green\" style=\"width: 45%;\" id=\"names3\" onclick=\"name3();\">NAME [3]</button>";

document.getElementsByClassName('hud-intro-guide')[0].innerHTML = IntroGuide;

// NINKNAMES
function name1() {
document.getElementsByClassName('hud-intro-name')[0].value = 'NAME 1 HERE';
}

function name2() {
  document.getElementsByClassName('hud-intro-name')[0].value = 'NAME 2 HERE';
}

function name3() {
  document.getElementsByClassName('hud-intro-name')[0].value = 'NAME 3 HERE';
}

Answer 1

check code here

var IntroGuide = '';
IntroGuide += "<button class=\"hud-intro-name btn btn-green\" style=\"width: 45%;\" id=\"names1\" onclick=\"name1();\">NAME [1]</button>";
IntroGuide += "&nbsp;";
IntroGuide += "<button class=\"hud-intro-name btn btn-green\" style=\"width: 45%;\" id=\"names2\" onclick=\"name2();\">NAME [2]</button>";
IntroGuide += "<br><br>";
IntroGuide += "<button class=\"hud-intro-name btn btn-green\" style=\"width: 45%;\" id=\"names3\" onclick=\"name3();\">NAME [3]</button>";

document.getElementsByClassName('hud-intro-guide')[0].innerHTML = IntroGuide;

// NINKNAMES
window.name1=function() {`enter code here`
document.getElementsByClassName('hud-intro-name')[0].innerHTML = 'NAME 1 HERE';
}

window.name2=function() {
  document.getElementsByClassName('hud-intro-name')[1].innerHTML = 'NAME 2 HERE';
}

window.name3=function() {
  document.getElementsByClassName('hud-intro-name')[2].innerHTML = 'NAME 3 HERE';
}