How can I dynamically change the CSS color of a roller-banner div based on user input?
I have a codepen setup where I want to capture the class of the clicked element (e.g. colour3), and then apply that as an ID or class to the roller-banner div.
Codepen Link: https://codepen.io/scottYg55/pen/WNNgxWZ
$(".changecolours > div").on('click', function() {
var colourChange = this.value;
$('.roller-banner').attr('class', colourChange);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changecolours">
<div class="colour1">A</div>
<div class="colour2">B</div>
<div class="colour3">C</div>
<div class="colour4">D</div>
</div>
<div class="roller-banner">
<img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/roller-banner-nodetails.png" class="static">
<div class="halft-colour"></div>
<div class="halfb-colour"></div>
<div class="dlogo">
<img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/select-dropbox.png" />
</div>
<div class="instertxt">
<div id="yourtextlive"></div>
</div>
<div class="dpimg">
<img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/banner-insert-img.png" />
</div>
<div class="dplink">
dropbox.com
</div>
</div>
</div>