Dorian :
I want to create a simple JS function where I click on a button, and the background changes into the color of that button. I have used an external JS file but even though I have used the function, it shows this error :'changecolor' is defined but never used. here's the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = document.getElementById(id).innerHTML
}
Bhavya Singh :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = id;
}
now tell me if it works or not :)