“将” jQuery“转换为普通JavaScript”

Question

I was trying to make somehow similar page loader to the one in THIS codepan. What bothers me and was trying to solve on my own, was the use of what I guess are jQuery commands of some sort, the dollar signs ($). I was trying to write the code in plain JavaScript but the code won't work (as I guess I messed up something) Below are the JavaScript w/ jQuery and plain Javascript (that I made):

Original code, with JavaScript and fragments of jQuery

 $(document).ready(function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 9) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-fighter-jet"</i>', '<i class="fa fa-gamepad"></i>', '<i class="fa fa-headphones"></i>', '<i class="fa fa-cubes"></i>', '<i class="fa fa-paw"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-ticket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; $(".loader .image").html(""+ images[counter] +""); } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { $('.loader span').html(num+'%'); if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; animation: 3s rotate infinite; -webkit-animation: 3s rotate infinite; -moz-animation: 3s rotate infinite; -ms-animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span></span> </div> 

My code with plain JavaScript (not even close to complete I guess)

 document.addEventListener("DOMContentLoaded", function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 4) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-cubes"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; document.getElementsByClassName("loader", "image").innerHTML = ("" + images[counter] + ""); } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { document.getElementsByClassName("spaner").innerHTML= (num + '%'); if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; animation: 3s rotate infinite; -webkit-animation: 3s rotate infinite; -moz-animation: 3s rotate infinite; -ms-animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span class="spaner"></span> </div> 

Any help would be much appreciated.

Answer 1

There are few issues in your code.

To use multiple selector, you can try querySelector() :

document.querySelector(".loader .image").innerHTML = ("" + images[counter] + "");

getElementsByClassName() returns collection, you have to use proper index:

document.getElementsByClassName("spaner")[0].innerHTML= (num + '%');

Try the following:

 document.addEventListener("DOMContentLoaded", function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 4) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-fighter-jet"</i>', '<i class="fa fa-gamepad"></i>', '<i class="fa fa-headphones"></i>', '<i class="fa fa-cubes"></i>', '<i class="fa fa-paw"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-ticket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; document.querySelector(".loader .image").innerHTML = ("" + images[counter] + ""); } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { document.getElementsByClassName("spaner")[0].innerHTML= (num + '%'); if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span class="spaner"></span> </div> 

Answer 2

Unlike jQuery, that has the same API working on a single element as well as a jQuery collection of elements, the DOM API requires you to explicitly iterate over NodeList / HTMLCollection objects.

Aside from that, instead of collecting all elements that have class loader and add to that list all elements that have class image you want to use querySelectorAll .

 document.addEventListener("DOMContentLoaded", function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 4) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-cubes"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; [...document.querySelectorAll(".loader .image")].forEach((loader) => { loader.innerHTML = images[counter]; }) } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { [...document.getElementsByClassName("spaner")].forEach((spaner) => { spaner.innerHTML = num + '%'; }) if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span class="spaner"></span> </div>