如何使用javascript添加背景色和前景色

该程序将单击一种颜色，然后选择是否需要背景或前景，然后单击“更改颜色”按钮。它的工作原理是这样的，但当单击变量

按钮中的值时，值
不会从函数中出来

按钮值中的值未显示，请帮助。控制台说错误是

  Uncaught TypeError: Cannot read property 'addEventListener' of null

HTML:

<input type="checkbox" name="check" value="background">background</input>
<input type="checkbox" name="check" value="foreground">foreground</input>
<input type="button" value="change color" id='run'>

var colors = ['red', 'blue', 'green', 'yellow', 'black'];

for(var i=0; i<5; i++){
    var button = document.createElement('button');
    button.type = 'button';
    button.innerText = colors[i];
    button.value = colors[i];
    button.style.backgroundColor = colors[i];

    button.addEventListener('click', change);
    document.body.append(button);
}

var buttonValue;

function change(g){
    buttonValue = g.target.value; 
}   

document.getElementById('run').addEventListener('click',AlertMe);

function AlertMe() {

  document.getElementsByName('check').forEach( (el) =>{
    
    alert(buttonValue);
    if(el.checked === true){
        if((el.value) == "background")
        {
          document.body.style.backgroundColor = buttonValue;
        }
        else if((el.value) == "foreground")
        {
          document.body.style.color = buttonValue;
        }
        
    } 
    
  });
 
}

背景
前景

JS:

<input type="checkbox" name="check" value="background">background</input>
<input type="checkbox" name="check" value="foreground">foreground</input>
<input type="button" value="change color" id='run'>

var colors = ['red', 'blue', 'green', 'yellow', 'black'];

for(var i=0; i<5; i++){
    var button = document.createElement('button');
    button.type = 'button';
    button.innerText = colors[i];
    button.value = colors[i];
    button.style.backgroundColor = colors[i];

    button.addEventListener('click', change);
    document.body.append(button);
}

var buttonValue;

function change(g){
    buttonValue = g.target.value; 
}   

document.getElementById('run').addEventListener('click',AlertMe);

function AlertMe() {

  document.getElementsByName('check').forEach( (el) =>{
    
    alert(buttonValue);
    if(el.checked === true){
        if((el.value) == "background")
        {
          document.body.style.backgroundColor = buttonValue;
        }
        else if((el.value) == "foreground")
        {
          document.body.style.color = buttonValue;
        }
        
    } 
    
  });
 
}

var colors=[“红色”、“蓝色”、“绿色”、“黄色”、“黑色”]；
对于（var i=0；i{
警报（按钮值）；
如果（el.checked==真）{
如果（（el.值）=“背景”）
{
document.body.style.backgroundColor=按钮值；
}
如果（（标高值）=“前景”）
{
document.body.style.color=按钮值；
}
} 
});
}
只要您将代码放在标题中，此代码就正常工作。
它按预期工作，什么是不起作用的…它看起来像是把HTML代码放在页面标题中的典型错误…谢谢你的回答我不认为这会这么容易我从上到下查看javascript代码很多次这是我的家庭作业非常感谢。