Transform this jQuery code into pure Javascript

Question

Transform this jQuery code into pure Javascript

Navigation

#1 by (5 votes)

-4

$(window).scroll(function(){
    var posicao = $(window).scrollTop();
    var cor = Math.round(posicao / 1000);
    $('.social li a').css('border-color', pegarCor(cor));
   });
   pegarCor = function(cor){
     switch(cor){
       case 1:
         return "#ff0ff0";
         break;
       case 2:
         return "#00aabc";
         break;
       case 3:
         return "#00ee54";
         break;
       case 4:
         return "#334454";
         break;
       case 5:
         return "#ff00ff";
         break;
       default:
         return "#00aa12";
         break;
     }
   }

<!-- codigo jquery -->

$(window).scroll(function(){
    var posicao = $(window).scrollTop();
    var cor = Math.round(posicao / 1000);
    $('.social li a').css('border-color', pegarCor(cor));
   });
   pegarCor = function(cor){
     switch(cor){
       case 1:
         return "#ff0ff0";
         break;
       case 2:
         return "#00aabc";
         break;
       case 3:
         return "#00ee54";
         break;
       case 4:
         return "#334454";
         break;
       case 5:
         return "#ff00ff";
         break;
       default:
         return "#00aa12";
         break;
     }
   }


<!-- codigo javascript -->
window.onscroll = function(){
    var position = window.scrollTop;
    var color = Math.round(position / 1000);

    document.querySelectorAll(".social li a").style.borderColor = selectColor(color);
}

selectColor = function(color){
    switch(color){
        case 1:
          cor = "#ff0ff0";
          break;
        case 2:
            cor = "#00aabc";
          break;
        case 3:
            cor = "#00ee54";
          break;
        case 4:
            cor = "#334454";
          break;
        case 5:
          cor = "#ff00ff";
          break;
        default:
          cor = "#00aa12";
          break;
    }

javascript

asked by anonymous 21.08.2018 / 03:12

1 answer

About Object Oriented in PHP Not all arguments were converted during string formatting. What does that mean?

score 5 · Answer 1

Your error is that there is no direct equivalent of .css(...) in pure javascript. You need some kind of loop on top of document.querySelectorAll(".social li a") return. You can not change the style of everyone right there. Assign the list of elements to a variable, loop and assign styles (or, better yet, a class) to each:

var links = document.querySelectorAll(".social li a");
for(var i=0; i<links.length; i++) {
    links[i].classList.add('classe');

    // ou:
    // links[i].style.borderColor = selectColor(color);
}

How would I know that?

It seems like you were missing your browser console, which must have issued hundreds of error messages during the roll. Or at least you were missing out on the question (which explains in part the negatives you received).

Always test your code with the console open (if you do not know how, see What is console.log? ). It will give a useful error message, telling you what line of your code is in the problem, and what error it gave. In this case, your console should have reported something like Unable to access the borderColor property of undefined . This is because the element list does not have style property.