CODEWITHSUNDEEP
javascripthtml
lydal
lydal

Reputation: 950

HTML does not recognize external JS file function

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
}

Upvotes: 2

Views: 205

Answers (5)

Bhavya Singh
Bhavya Singh

Reputation: 311

<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>
        <div id="switch"><!--dont delete this div its here to avoid js to select all elements with class button -->
          <span class="button" id="grey"></span>
          <span class="button" id="white"></span>
          <span class="button" id="blue"></span>
          <span class="button" id="yellow"></span>
        </div>
    </div>
    <script src="app.js"></script>   
</body>
</html>

JS file:

function changecolor(id) {
  document.body.style.background = id;
}
var rootElem = document.querySelector("#switch");
var buttonArr = rootElem.querySelectorAll(".button");
for (let i = 0; i < buttonArr.length; i++){
   buttonArr[i].addEventListener('click', function(){
       changecolor(buttonArr[i].id);
   }
}

Just drop the name or hex of the color in the id of the button and add as many as you want

Warning Dont remove div with id switch and dont alter the class of the buttons used for the switching color

Upvotes: 0

Bhavya Singh
Bhavya Singh

Reputation: 311

<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 :)

Upvotes: 1

agaboy6000
agaboy6000

Reputation: 29

Your tag's greater than mark is in the wrong place. Move it right after and

Upvotes: 0

Usama
Usama

Reputation: 33

Be sure to use a script tag at the end of the body where you are including the JS file. And to consume the functions of the JS file you should use them bellow the include of the file. This is the recommended approach.

Upvotes: 0

Hirasawa Yui
Hirasawa Yui

Reputation: 1296

Move script tag into the head section. Or at least put function declaration before its usage (move script tag to the very top of body).

Upvotes: 0

Related Questions