Stack Exchange
DOM Selector and addEventListener click not registering
Plan is to preview the colour chooser in the UIpreviewColor span element.
Probably a obvious answer, but i wanted to understand it in stead of restarting. Thanks for any input!


// ORIGINAL CODE:

const UIbackground = document.querySelector(".background");
const UIpreviewColor = document.querySelectorAll(".input-group-addon");
const redInput = document.querySelector("#red").value;
const blueInput = document.querySelector("#blue").value;
const greenInput = document.querySelector("#green").value;
const button = document.querySelector('.btn');

console.log(UIpreviewColor)
button.addEventListener("click", onclick);


// Trying to iterate thru all elements with input-group addon, and change the background color.
for (let i = 0; i < UIpreviewColor.length; i++) {
    console.log("Changing color...")
    UIpreviewColor[i].style.backgroundColor = `rgb(${redInput}, ${blueInput}, ${greenInput})`;
}


function onClick() {
    console.log("Button clicked");
    UIpreviewColor.style.backroundColor = `rgb(${redInput}, ${blueInput}, ${greenInput})`
};

// ENDED UP WITH THIS, WORKS AS EXPECTED. added .value to colorinputs.

function onClick() {
for (let i = 0; i < UIpreviewColor.length; i++) {
    UIpreviewColor[i].style.backgroundColor = `rgb(${redInput.value}, ${blueInput.value}, ${greenInput.value})`;
}    console.log("rgb(" + redInput.value + ", " + blueInput.value + ", " + greenInput.value + ")");
};
<body class="background" style="background-color: grey;">
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="card card-body text-center">
                <h1 class="heading display-5 pb3">Color Changer!</h1>

                <form id="color-form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon col-md-2 mx-auto" id="previewColor">Red</span>
                            <input type="number" class="form-control" id="red" value="1">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon col-md-2 mx-auto" id="previewColor">Blue</span>
                            <input type="number" class="form-control" id="blue" value="1">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon col-md-2 mx-auto" id="previewColor">Green</span>
                            <input type="number" class="form-control" id="green" value="1">
                        </div>
                    </div>
                </form>
            </div>
            <div class="card">
                <a href="#" class="btn btn-primary" style="float: right;" id="button"> Select color</a>
            </div>
        </div>
    </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>




can you please expand on the question so that it's clear what your problem is?

You are trying to do the right thing, however there is a typo in your code:
button.addEventListener("click", onclick);
Your onclick function in the line above should actually be 'onClick' as the function is defined as:
function onClick() {
    console.log("Button clicked");
    UIpreviewColor.style.backroundColor = `rgb(${redInput}, ${blueInput}, ${greenInput})`
};

So if you correct your code to
button.addEventListener("click", onClick);
the click handler on button will register correctly and you will start seeing calls being make to 'onClick' function.

Eeexactly.. i had a strong feeling it would be something like that.. Thanks for the response! just to inform, i changed the code above and now it works as expected.

When you attach eventListener the name of the function should be onClick, because:

JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. The while keyword, for example, must be typed “while”, not “While” or “WHILE”.

Source: https://www.oreilly.com/library/view/javascript-the-definitive/0596000480/ch02s02.html

Working example with minor fixes to your code: https://codepen.io/emendelski/pen/BajwgeV
