My HTML button doesn't want to trigger a js function with any method

Question

I am making a chrome extension to skin the youtube site, but my confirm button on my extension popup doesn't trigger js functions with any method

popup.HTML

<!DOCTYPE html>
<html>
  <head>
    <body>
      <link href="popup.css" rel="stylesheet" />
      </style>
<!--Color labels and inputs-->
        <form action="/action_page.php">
          <label for="Red" name="redLabel">Red (Between 0 and 255):</label>
          <input type="number" id="redInput" name="Red" min="0" max="255" value = "0">
        </form>
        <form action="/action_page.php">
          <label for="Green" name="greenLabel">Green (Between 0 and 255):</label>
          <input type="number" id="greenInput" name="Green" min="0" max="255" value = "0">
        </form>
        <form action="/action_page.php">
          <label for="Blue" name="blueLabel">Blue (Between 0 and 255):</label>
          <input type="number" id="blueInput" name="Blue" min="0" max="255" value = "0">
        </form>
<!--Submit button-->
        <script src="popup.js"></script>

        <button type="button" name="submitColors" id="submitColors">Submit Colors</button>

        <script>
          function submitColors() { 
            var button = document.getElementById("submitColors");
            button.onclick = function() {
              getColors();
            };
          }
        </script>
      </body>
  </head>
</html>

popup.js

var root  = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var background = rootStyles.getPropertyValue('--yt-spec-base-background');
var themeColors = {
  Red : "",
  Green : "",
  Blue : ""
};

//Converts the hex-formatted css vars to RGBA to use with themeColors
function hexToRgba(hex) {
  // Remove the # if it's there
  hex = hex.replace(/^#/, "");

  // Convert the hex to a number
  var r = parseInt(hex.substring(0, 2), 16);
  var g = parseInt(hex.substring(2, 4), 16);
  var b = parseInt(hex.substring(4, 6), 16);

  // Create an array of the RGB values
  var rgba = [r, g, b];

  // If there is an alpha channel, add it to the array
  if (hex.length === 8) {
    var a = parseInt(hex.substring(6, 8), 16);
    rgba.push(a / 255);
  } else {
    rgba.push(1);
  }

  // Return the array of rgba values
  return rgba;
}

function getElementValue(Name){
  return document.getElementsByName(Name).value;
}

//Sets css function on website to RGB value from user input
function getColors(){
  alert("getColors run");

  //Assigns new color to themeColors RGB values
  themeColors.Red = getElementValue("Red");
  themeColors.Green = getElementValue("Green");
  themeColors.Blue = getElementValue("Blue");
}

function useColors(){
  alert("useColors run");
  //Assigns hex-value 
  var currentAsRGBA = hexToRgba('--yt-spec-base-background');
  console.log(currentAsRGBA);
  var current_R = currentAsRGBA[0];
  var current_G = currentAsRGBA[1];
  var current_B = currentAsRGBA[2];
  
  root.style.setProperty('--yt-spec-base-background', (((current_R + themeColors.Red) / 2),((current_G + themeColors.Green) / 2), ((current_B + themeColors.Blue) / 2)));
}

I've tried this current method, along with event listeners. The current method spits out a CSP violation, and I've tried to fix that with no luck. Event listeners don't seem to be triggering at all, so I tried the other method. I had them formatted like this: document.getElementsByName("submitColors").addEventListener("click", getColors()); I am basically just learning both HTML and JS, so my formatting and tactics might be completely wrong for all I know. Any help would be appreciated!

You are not calling your submitColors() method from the popup.html anywhere. That method registers your button click listener, but since you don't call it, it never gets registered. You could basically just get rid of the function wrapper and directly run `var button = ...` in the script tag without `function submitColors() {` - that should probably fix it already. — xtj7, Jun 07 '23 at 15:48

score 0 · Answer 1 · answered Jun 07 '23 at 15:50

You should try this: In popup.html

<button type="button" name="submitColors" id="submitColors" onclick="your_Function_Name()" >Submit Colors</button>

Remember you're writing html so, you have to add parenthesis after the function name.

I suggest you to try to use different name for function e.g. submitColors(), id="submitColors" etc.

My HTML button doesn't want to trigger a js function with any method

1 Answers1