Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

JavaScript return user input

on

The js below allows users to click / choose a color from an array. How can I capture the first color selected and have it returned to me? Can I do it within js, rather than having to write php?

function chooseColor() {
    var el = document.querySelectorAll('.input label')
    var pushed = []
    for (var i = 0; i < el.length; i++) {
        pushed.push(el[i])
    }
    pushed.forEach(forEachItem)
}

function forEachItem(item,index,array){
    var colors = ['red','green','blue','yellow','cyan']
    var output = document.getElementById('output')
    item.style.background = colors[index]
    item.onclick = function(){
        output.style.background = colors[index]
        for (var i = 0; i < array.length; i++) {
            array[i].className = ""
        }
    array[index].className = "active"
    }
}   

window.onload = chooseColor

The Html:

<html><head>
        <meta charset="utf-8">
<!--        <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
        <title>ArtCore</title>
        <link rel="stylesheet" href="css/landingpage.css">
        <script src="./javascript/yellow.js" type="text/javascript"></script>
    </head>
    <body>

            <h1>CHOOSE YOUR COLOR</h1>

            <div class="circles">
              <a href="html/yellow.html"><img src="img/yellow.png" alt="yellow"></a>
                <a href="html/red.html"><img src="img/red.png" alt="red"></a>
                <a href="html/blue.html"><img src="img/blue.png" alt="blue"></a>
            </div>

    <div class="artist">
    <a href="html/artiststatement.html"> ARTIST STATEMENT </a>
    </div>

    </body></html>

Comments

Post a Comment