How can I get my element.style.background to use type="color" as value?-CodePudding

I'm trying to get my divs to change color on mousedown using the value of my type="color". Currently, the divs change color successfully if I specify the value straight up like element.style.background = 'black' but I would like to give the user the option to choose the color via type='color'. Would someone be able to identify what is causing my element.style.background from using the value from type='color'?

html:

<div id="selectColor">
  Select a Color <input onchange="selectColor()" type='color'>
</div>

javascript:

function colorPixel() {
    document.querySelectorAll('.contentDivs').forEach(function(element) {
        element.addEventListener('mousedown', () => {
        element.style.background = selectColor();
        })
    })
    document.querySelectorAll('.horizontalDivs').forEach(function(element) {
        element.addEventListener('mousedown', () => {
        element.style.background = selectColor();
        })
    })
}

function selectColor() {
    let colorSelected = document.getElementById('selectColor').value;
    element.style.background = colorSelected;
}

I can provide the rest of the code if that is helpful. Thanks in advance!

CodePudding user response：

Or return the color input value:

function selectColor() {
   return document.querySelector('#selectColor input').value;
}

    document.querySelectorAll('.contentDivs').forEach(function(element) {
        element.addEventListener('mousedown', () => {
        element.style.background = selectColor();
        })
    })
    document.querySelectorAll('.horizontalDivs').forEach(function(element) {
        element.addEventListener('mousedown', () => {
        element.style.background = selectColor();
        })
    })


function selectColor() {
   return document.querySelector('#selectColor input').value;
}

<div id="selectColor">
  Select a Color <input onchange="selectColor()" type='color'>
</div>


<div class='contentDivs'>
Div 1
</div>

<div class='horizontalDivs'>
Div 2
</div>

CodePudding user response：

The id should be assigned to the input not the div

<div>
  Select a Color <input onchange="selectColor()" id="selectColor" type='color'>
</div>