0

Hellow everyone,

I can't figure out why the onClick event is not working. I have tried to put the script in the head tag, in a separate js file, tried to use jQuery to perform the action ... nothing has worked.

I would greatly appreciate it if somebody with more experience could please explain what could be the problem with the code below.

Thank you in advance for your time!

<!DOCTYPE html>
<html>
<body>

    <span class="position">Text to be changed when Facbook Icon is clicked</span>
    
    <ul class="social">
        <li><span onclick="alert()"><i class="icon-facebook2"></i></span></li>
        <li><i class="icon-instagram"></i></li>
        <li><i class="icon-github"></i></li>
        <li><i class="icon-linkedin2"></i></li>
    </ul>


<script type="text/javascript">
        function alert(){
            document.getElementsByClassName("position").innerHTML = "Text is now changed";   
        };
    </script>

</body>
</html>
Iulian Prodan
  • 9

3 Answers3

1

document.getElementsByClassName("position").innerHTML can't work, it has to be one element, like this document.getElementsByClassName("position")[0].innerHTML

function alert(){
document.getElementsByClassName("position")[0].innerHTML="it works";
}
<button onclick="alert()">ok</button>
<div class="position"></div>

This code selects first element with class position and puts new text in it's innerHTML

John Doe
  • 96
  • 7
  • Thank you, John Doe! Much appreciated. The suggested code amendment works. – Iulian Prodan Sep 06 '20 at 14:31
  • You are welcome :) PS: If you have more than one element with the same class that you want to use addEventListener on, you have to use for loop `document.getElementsByClassName("position")[i]` Also, as other people suggested, you shouldn't name your function `alert` – John Doe Sep 06 '20 at 14:33
0

First of all don't use alert as a name of a function. There is a native function in JavaScript called alert("Some text"), which make a modal box in your browser and that may cause problems!

Also document.getElementsByClassName() returns Array, not a single element, because class is not a unique attribute as Id do.

You can try this:

<!DOCTYPE html>
<html>
<body>

    <span class="position">Text to be changed when Facbook Icon is clicked</span>
    
    <ul class="social">
        <li><span onclick="showAlert()"><i class="icon-facebook2"></i></span></li>
        <li><i class="icon-instagram"></i></li>
        <li><i class="icon-github"></i></li>
        <li><i class="icon-linkedin2"></i></li>
    </ul>


    <script type="text/javascript">
        function showAlert() {
            document.getElementsByClassName("position")[0].innerHTML = "Text is now changed";   
        };
    </script>

</body>
</html>
RadekDeveloper
  • 108
  • 7
  • Thank you, RadekDeveloper! I wasn't aware that return type is Array but now that you mention, it makes sense. Apart from solving the problem, learnt something new. Much appreciated! – Iulian Prodan Sep 06 '20 at 14:42
0

You cannot name your function alert cause it's a window method https://www.w3schools.com/jsref/met_win_alert.asp You have to select your element in your script using query selector, since you didn't give it an id select it by the class then add event listener and then assign a function.

document.querySelector('.icon-facebook2').addEventListener('click', function() {
   return alert('Your message')
})
Premo89
  • 56
  • 3
  • Thank you, Premo89! I have extracted the troublesome code from the project and when simplifying it have chosen a generic name ( alert() ) for the function. Nonetheless your comment makes me more aware about particular aspects. Much appreciated! – Iulian Prodan Sep 06 '20 at 14:38