When triggering an event in an array element (with querySelectAll) trigger only one element of another array (also with querySelectAll)

Asked

Viewed 209 times

2

In the code that follows below, I would like to pass and remove the mouse (mouseover and mouseout) about a li, the change was made only in the item corresponding to that li, in the case, the tags a and i within the li, in the same way as with code CSS (background and color tag i altered with Hover). The problem I have now is that when I trigger the event, instead of just changing the element within the li where the mouse is on at the moment, all the elements are affected at once.

To get better follow the codepen link with the full code: http://codepen.io/RaoniSousa/pen/wJqdNP

I’d appreciate it if you could help.

function abc() {

    var myLi = document.querySelectorAll('li'),
        icons = document.querySelectorAll('li i'),        

    //MOUSEOVER
    function changeI() {
        'use strict';
        if (icons.length) {
            for (var i = 0; i < icons.length; i++) {
                icons[i].style.fontSize = '2em';
            }
        }
    }
    //MOUSEOUT
    function backI() {
        'use strict';
        if (icons.length) {
            for (var i = 0; i < icons.length; i++) {
                icons[i].style.fontSize = '1em';
            }
        }
    }
    if (myLi.length) {
        for (var i = 0; i < myLi.length; i++) {
            myLi[i].addEventListener("mouseover", changeI);
            myLi[i].addEventListener("mouseout", backI);
        }
    }
}
abc();
javascript html css array

2 answers

1

I think you’re complicating it. First of all, it can be done only with CSS, like this:

* {
    font-family: sans-serif;
    margin: 0 auto;
    box-shadow: border-box;
    position: relative;
}

body {
    left: 0;
    right: 0;
    margin: 0;
    background: #898989;
}

#container {
    width: 1030px;
}

a {
    text-decoration: none!important;
    outline: 0!important;
    border: 0!important
}

a:hover {
    text-decoration: none;
    outline: 0!important;
    border: 0!important
}

li {
    list-style: none;
    position: relative;
}

img {
    left: 0;
    width: 100%;
    height: auto
}

footer {
    width: 100%;
    height: 13em;
    background-color: #a8a8a8;
    text-align: center;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0e0e0
}

#footFlex {
    width: 80%;
    display: flex;
}

#footFlex > div:not(p){
    margin-top: 6%!important
}

#footFlex ul {
    display: flex;
    margin-right: 40px;
    width: 100%;
    height: 5em;
}

#footFlex li {
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 10px;
    margin: 2px;
    cursor: pointer;
    transition: all .5s;
    height: 2.5em;
}

#footFlex li:hover {
    background-color: #fff;
    height: 5em;
}

#footFlex li:hover a{
    color: #722872;
    font-size: 2em;
    line-height: 2em;
}

#footFlex li i:hover{
    background-color: transparent;
}

#footFlex li a{
  line-height: 1em;
    transition: all .5s;
    color: #fff
}

#footFlex div:first-child p:nth-child(2){
    width: 65%;
    left: 17.5%
}

#footFlex div p:nth-child(1){
    font-size: 1.3em
}

#footFlex div:first-child p:nth-child(2) a{
    color: #722872;
    font-weight: 400;
}

#footFlex div:first-child p:nth-child(2) a:hover {
    border-bottom: 2px solid #722872!important
}

#footFlex div:first-child p:first-child, #footFlex div:nth-child(2) p:first-child {
    margin-bottom: 1em
}

footer + div {
    height: 5.6em;
    background-color: #722872;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 5.6em;
    text-align: center
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="FreeCodeCamp.css">
</head>

<body id="about" data-spy="scroll" data-target=".navbar" data-offset="50">
 
    <footer>
    <div id="footFlex">
       <div>           
           <p>ABOUT THIS PAGE</p>
           <p>Made with <i class="fa fa-fw fa-music"></i> and <i class="fa fa-fw fa-coffee"></i> by <a href="">Justin Sane.</a></p>
       </div>
       <div>
           <p>AROUND THE WEB</p>
           <ul>
              <li><a rel="nofollow" class="button social" href="https://www.linkedin.com/in/hallaathrad"><i class="fa fa-fw fa-linkedin"></i></a></li>
              <li><a rel="nofollow" class="button social" href="https://github.com/hallaathrad"><i class="fa fa-fw fa-github"></i></a></li>
              <li><a rel="nofollow" class="button social" href="https://twitter.com/hallaathrad"><i class="fa fa-fw fa-twitter"></i></a></li>
              <li><a rel="nofollow" class="button social" href="https://www.flickr.com/photos/hallaathrad/" title="My Flickr"><i class="fa fa-fw fa-flickr"></i></a></li>
           </ul>
       </div>
    </div>
    </footer>
    <div>qlip © 2017. All Rights Reversed</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="Javascript.js"></script>
</body>

</html>

And if you want to use Javascript you can directly pass the elements and the size to avoid later having to iterate everything:

function changeI(el, size) {
    'use strict';
  return function(){
    el.style.fontSize = size;
  }
}

if (liBArray.length) {
    for (var i = 0; i < liB.length; i++) {
        liBArray[i].addEventListener("mouseover", changeI(iconsArray[i], '2em'));
        liBArray[i].addEventListener("mouseout", changeI(iconsArray[i], '1em'));
    }
}

  • I was preparing the answer using the transform scale kk

  • @Andersoncarloswoss and would be a good answer. Also puts!

  • 1

    Before I did with css, but the js thing was more for study anyway, I’m new in the area and I was curious. Thanks for the tips.

  • I understood your solution, very good, but when I run my test with it does not work and on the console appears: Uncaught Typeerror: Cannot read Property 'style' of Undefined at Htmllielement.<Anonymous>, which is related to the expression: el.style.fontsize = size; What’s the problem there? Thank you, man.

  • 1

    @Raonibatistadus takes a look inside the for and makes a console.loga ambosliBArray[i]eiconsArray[i]`. It gives me the idea that there is no icon for every lib..

  • Oh yes, now it worked, I just changed the dials. &#xA;&#xA; var liB = document.querySelectorAll('#footFlex li'), &#xA; liBArray = Array.prototype.slice.call(liB), &#xA; icons = document.querySelectorAll('#footFlex li i'), &#xA; iconsArray = Array.prototype.slice.call(icons);&#xA;&#xA;Obrigado, man.

Show 1 more comment

1


Your main mistake is that you are passing the array with all the elements when changing their style, you want to change the element itself, the this.

var cresce = function() {
  this.style.fontSize = "2em";
}

var diminui = function() {
  this.style.fontSize = "1em"
}

// essa variável terá um array dentro
var lis = document.querySelectorAll('li');

// aí é só passar por ela e incluir os eventos
for (var el, ix = 0; ix < lis.length; ix++) {
    el = lis[ix];
    console.log(el);
    el.addEventListener('mouseover', cresce);
    el.addEventListener('mouseout', diminui);
}

Sergio’s solution has the advantages of being a single function and using the return function of javascript, which is pretty cool but hard to understand when you’re learning to code. I hope that this solution will be clearer, even though it is less efficient.

  • 1

    Good to see also your solution, to see that there are several ways to solve a problem, had not thought of 'this', it worked, thanks.

Browser other questions tagged javascript html css array

You are not signed in. Login or sign up in order to post.