I have a script.js file I am using to programmiticly build up an html file. I have a simple input color element and a button with an event listener. When I click the button I pass a function addElement that adds a div and sets the background color to whatever color the user picked. For some reason, I can't get the div to accept the color. Nothing crashes and the paragraph that I have in the div can accept the color the input color sets. So its an issue with div. Any ideas?

function addElement (color) {
    console.log(typeof color)
    const newDiv = document.createElement("div"+ String(divCounter));
    newDiv.id = "div"+ String(divCounter)
    console.log(color)
    newDiv.style.backgroundColor = color
    newDiv.addEventListener("click",function() { deleteElement(newDiv.id)})


    

    const text = document.createElement("P");
    text.style.backgroundColor = "green"
    console.log(text.style.backgroundColor)

    var newContent;
    if(textBox0.value == "" || textBox1.value ==""){
      newContent = document.createTextNode("Error: Missing One or More Operands");
    }else{
      newContent = document.createTextNode(textBox0.value + " " + arthList.value + " " + textBox1.value +" = " + eval(textBox0.value + arthList.value + textBox1.value));
    }

    
    text.appendChild(newContent);
    newDiv.appendChild(text);

    calculationDivs.insertBefore(newDiv,calculationDivs.firstChild)
    divCounter++;
    
  }
/*
* Button
*/
const button = document.createElement("INPUT")
button.setAttribute("style","height:35px; width:100px;")
button.setAttribute("type","button")
button.setAttribute("value","Compute")
button.addEventListener("click",function(){addElement(colorChoice.value)})
titleDiv.appendChild(button)
/*
* Color Choice
*/
const colorChoice = document.createElement('INPUT')
colorChoice.setAttribute("type","color")
titleDiv.appendChild(colorChoice)