changing text color of h1 tag with linear-gradient

Linear gradients only work on background, so the color rule won't work. But the issue is you have a semi-colon in your code which isn't needed:

document.querySelectorAll('.hud-intro h1')[0].style.background = 'linear-gradient(to right, #7f00ff, #e100ff)'

<div id="hud-intro" class="hud-intro">
  <h1>NAME HERE<small>.io</small></h1>
</div>

From MDN:

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.

You should insert a span inside your tag h1 like:

//Add
document.querySelector('button#a').addEventListener('click', function()
{
  document.getElementById('change').classList.add('gradient');
});

//Remove
document.querySelector('button#r').addEventListener('click', function()
{
  document.getElementById('change').classList.remove('gradient');
});

.gradient
{
  background-image: linear-gradient(90deg, dodgerblue, red, yellow);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

<h1>
  <span id="change" class="gradient">Your text</span>
</h1>

<button id="a">Add</button>
<button id="r">Remove</button>

If you want the gradient in the text itself, not the background, you need to use SVG.

<svg width="500" height="100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #7f00ff; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #e100ff; stop-opacity: 1" />
    </linearGradient>
  </defs>
  
  <text fill="url(#grad)" font-size="45" font-family="Verdana" x="0" y="40">
    ENTER NAME.io
  </text>
</svg>

You can try using mix-blend-mode like layers in Photoshop to get what you want:

https://codepen.io/mlarabi/pen/ExWGaXX

div {
  /* This is so the absolute positioning below is based on this div */
  position: relative;
}

/* we create a layer just below the H1 title that contains the gradient */
h1::before {
  content: "";
  display: block;
  position: absolute;
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: linear-gradient(#7f00ff, #e100ff);
  
  pointer-events: none;  
  mix-blend-mode: screen;
}

/* The layer above the gradient will work as a mask. */
/* The white background will cover the gradient that we don't want to display */
/* while the black text will become invisible because of the multiply value of the mix-blend-mode */
h1 {
  color: black;
  background: white;
  mix-blend-mode: multiply;
}

you Can use Thing Like that

let elem = document.getElementById('MyID')
elem.style.background = "-webkit-linear-gradient(yellow, red)"
elem.style.webkitBackgroundClip = "text"
elem.style.webkitTextFillColor = "transparent"

body{
background : black;
text-align : center
}

<h1 id="MyID">Hello,World<h1>

Use semicolon after ending your statement and linear gradient works with background style.

  document.querySelectorAll('.hud-intro h1')[0].style.background = 'linear-gradient(to right, #7f00ff, #e100ff)';