addEventListener('click', function) not triggering

Question

I'm sure there is a simple solution to this, but I cannot seem to figure it out. The 'click' does not want to trigger on the Follow button. Also, trying to do this without using jQuery.

var followBtn = document.getElementById("followBtn");
followBtn.addEventListener('click', followed);
function followed(event) {
    var followPars = document.getElementsByClassName("sm-par followed");
    event.preventDefault();
    for(var i=0; i<followPars.length; i+=1) {
        followPars[i].style.display = "inline-block";
        followPars[i].style.marginTop = "0px";
        followPars[i].innerHTML = "Sed vel sem felis.";
    };
};

<div id="main-container">
    <div class="bg-img">
        <img src="images/cover-banner.png" alt="Profile Banner Image"/>
    </div>
    <div class="icon-button">
        <div class="icon">
            <img src="images/profile-image.png" alt="Profile Logo Image"/>
        </div>
        <div class="button">
            <a id="followBtn" class="btn" aria-label="Follow Us Button">Follow</a>
        </div>
    </div>
    <div id="main-content">
        <h1>Lorem Ipsum</h1>
        <p>Sed ultrices sem elit. Integer gravida sapien in maximus auctor. Proin quis urna mauris. Pellentesque maximus at tellus eu ultrices. In vitae massa tincidunt, elementum nunc nec, pellentesque lectus. Aliquam placerat nisi risus, sit amet aliquet dui accumsan eu. Maecenas id urna aliquet, pellentesque ex at, gravida purus.</p>
        <p class="sm-par">Curabitur ac augue fringilla felis varius convallis.</p>
        <p class="sm-par followed"></p>
    </div>
</div>

This is working fine for me, did you include the script correctly? — Sean, Jun 29 '20 at 00:36
Are there any errors in the console? Where are you including the script? — ibrahim mahrir, Jun 29 '20 at 00:37
the code works. please add the `script` before the body tag ends — naveen, Jun 29 '20 at 00:38
You may be having [**this problem**](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) (the script is loaded before the element gets created) — ibrahim mahrir, Jun 29 '20 at 00:38
Are you sure it's not working? Everything seems ok. Can you add a console log at the end of the function and see if that shows up when you click the button? — ibrahim mahrir, Jun 29 '20 at 01:02
@ibrahimmahrir I tried that and i still get no console output. Glad you can get it to work. :( — intaglioman, Jun 29 '20 at 01:07
This is a long shot but this might be a cache problem. Can you clear the cache? If you are using chrome, just do a hard reload using **CTRL + F5** — ibrahim mahrir, Jun 29 '20 at 01:16

score 0 · Answer 1 · answered Jun 29 '20 at 12:53

0

I found the solution after the code snippet was added to the code (thanks to Ibrahim Mahrir) and it has nothing to do with the javascript.

The style on the button needed to include a z-index: 1; to sit on top of the container layer to be clickable.

answered Jun 29 '20 at 12:53

intaglioman

167
1
2
8

addEventListener('click', function) not triggering

1 Answers1