Embed for Understanding Regular Function & Converting To Arrow Function Article index.js file - Js example 7

index.js

'use strict';

function changeBackground(color) {
    let container = document.getElementById('container');
    container.style.backgroundColor = color;
}

let redBtn = document.getElementById('redBtn');
redBtn.onclick = function () {
    changeBackground('red');
}

let blueBtn = document.getElementById('blueBtn');
blueBtn.onclick = function () {
    changeBackground('blue');
}

let yellowBtn = document.getElementById('yellowBtn');
yellowBtn.onclick = function () {
    changeBackground('yellow');
}


/* In case you prefer to use addEVentListener 
   method:

let redBtn = document.getElementById('redBtn');
redBtn.addEventListener('click', function() {
    changeBackground('red');
});

let blueBtn = document.getElementById('blueBtn');
blueBtn.addEventListener('click', function() {
    changeBackground('blue');
});

let yellowBtn = document.getElementById('yellowBtn');
yellowBtn.addEventListener('click', function() {
    changeBackground('yellow');
});
*/

/*
Output:
click on each button and body element's 
background color will change to red, blue
and yellow respectively.
*/