I can't run a JS function on my html page. Why won't it work?

Web Development
1

I’m trying to set up a website that has javascript functionality. I’ve linked the html and JS files using the correctly. However, my function doesn’t seem to work.

Here’s my code:

html:

<main>

    <section class="projheader">
        <h1>Projects</h1>
        <p>This page is to demonstrate what I've learned on my coding journey. Each section will have it's own description on 
        what it does.
        </p>
    </section>

      
    <section class="projcontainer">
        <h2>Logo Maker</h2>
        <p>This application will help you choose a logo and colour scheme for your new business.</p>
        <!-- This outer div below is to allow the logo test box to be controlled by flex without affecting the other elements in the
         "projcontainer section"  -->
       <div class="logo-container">
            <div id="proj1div">
                <h3>LOGO TEST</h3>
            </div>
            
       </div>
       
       <div class="click-container">
        <button class="logo-button">Click</button>
       </div>
        
    </section>

</main>



<footer>
 <address>
        <h2>London, UK</h2>
    </address>
</footer>

<!--  This code links the Javascript file to the page. --> 
<script src="./Scripts/JS_logoMaker.js" ></script> 


</body>
</html>

JS code:

let element = document.getElementById('proj1div');

function turnLogoRed(){
element.style.backgroundColor = 'red';
element.style.color = 'white';
element.innerHTML = 'Red Logo';
}

//Then apply 'onclick' property to the variable we want to target by assigning the function to it.

element.onclick = turnLogoRed;
2

You need to provide more details about a) what exactly you want to happen AND b) what is happening (or not happening) instead.

In its current form, when a user clicks the “LOGO TEST” text, your turnLogoRed function is executed. Click on the text (and not the button) to confirm this yourself.

Note that in your js, the onclick is tied to the div with the proj1fdiv id.
The onclick is not attached to the button.

Perhaps, you wanted to attach the onclick to the button and then have the turnLogoRed function target and change the appearance of the div.

3

Hey mtrtmk,

The purpose of this code is to turn the div red with the words ‘Logo Test’ in it. I’m assuming that the coding will turn the div red when the div is clicked. I have purposefully made the background-colour blue so I know I’m targeting the correct element.

When I click the div (the box with the words ‘Logo Test’) it doesn’t turn red. Nor does it turn red when I click the words ‘Logo Test’.

Eventually I want the button below the div (‘Click’ button) to trigger this function and make the ‘Logo Test’ div change but for now I just want to get it working on the ‘Logo Test’ div directly.

4

I managed to solve this by using a querySelector rather than a getElementById.

JS code:

let element = document.querySelector("div.logoTest");

function turnLogoRed(){

element.style.backgroundColor = 'red';

element.style.color = 'white';

element.innerHTML = 'Red Logo';

}

//Then apply 'onclick' property to the variable we want to target by assigning the function to it.

element.onclick = turnLogoRed;

HTML code:

<section class="projcontainer">
        <h2>Logo Maker</h2>
        <p>This application will help you choose a logo and colour scheme for your new business.</p>
        <!-- This outer div is to allow the logo test box to be controlled by flex without affecting the other elements in the
         "projcontainer section"  -->

       <div class="logo-container">
            <div class="logoTest">
                 <h3>LOGO TEST</h3>
            </div>

I’m not sure why the getElementByID selector wouldn’t work, but it’s working now so all good.