JQuery to Vanilla JavaScript Conversion Is Not Working

user_14126367 0
Viewed 33

I am working on a project which is totally based on vanilla JavaScript and the job of this tool is to check website responsiveness but the problem is that I have JQuery code of that problem and I am trying to convert it to pure JavaScript but it's not working at all so can you please take a look at this problem and give a proper solution for it ?

(function($) {
  
  $(document).ready( function() {

    $('.devices').on('click', 'a', function() {
      var device_selected = $(this).attr('href').replace('#', '');
      
      $('.device').removeClass().addClass('device device-' + device_selected);
      
    })
    
  });

})(jQuery);


/*************** JS CODE (Not Working) ******************//*

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('.devices').addEventListener('click', 'a', function() {
var device_selected = document.querySelector(this).attr('href').replace('#', '');
document.querySelector('.device').classList.remove().classList.add('device device-' + device_selected);
  });
});

*/
.preview {
  overflow: hidden;
}
.preview .device {
  position: relative;
  width: 680px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #999;
}
.preview .device, .preview .device:after,
.preview .device iframe {
  transition: all 0.5s ease;
}
.preview .device iframe {
  transform: scale(0.5);
  border-radius: 1em;
}
.preview .device:after {
  content: " ";
  background-color: #444;
  position: absolute;
}
.preview .device-desktop {
  width: 680px;
  height: 400px;
  padding: 1em 1em 5em;
  border-radius: 1em;
}
.preview .device-desktop:after {
  width: 3em;
  height: 3em;
  bottom: 1em;
  left: 47.5%;
  border-radius: 100em;
}
.preview .device-desktop iframe {
  width: 1360px;
  height: 800px;
}
.preview .device-tablet-p {
  width: 384px;
  height: 512px;
  padding: 1em 1em 3em;
  border-radius: 1em;
}
.preview .device-tablet-p:after {
  width: 1.5em;
  height: 1.5em;
  bottom: 0.75em;
  left: 47%;
  border-radius: 100em;
}
.preview .device-tablet-p iframe {
  width: 768px;
  height: 1024px;
}
.preview .device-tablet-l {
  width: 512px;
  height: 384px;
  padding: 1em 3em 1em 1em;
  border-radius: 1em;
}
.preview .device-tablet-l:after {
  width: 1.5em;
  height: 1.5em;
  left: 93.5%;
  bottom: 47%;
  border-radius: 100em;
}
.preview .device-tablet-l iframe {
  width: 1024px;
  height: 768px;
}
.preview .device-mobile-p iframe,
.preview .device-mobile-l iframe {
  transform: scale(0.75);
}
.preview .device-mobile-p {
  width: 240px;
  height: 420px;
  padding: 1em 1em 3em;
  border-radius: 1em;
}
.preview .device-mobile-p:after {
  width: 2em;
  height: 2em;
  bottom: 0.5em;
  left: 45%;
  border-radius: 100em;
}
.preview .device-mobile-p iframe {
  width: 320px;
  height: 560px;
}
.preview .device-mobile-l {
  width: 420px;
  height: 240px;
  padding: 1em 3em 1em 1em;
  border-radius: 1em;
}
.preview .device-mobile-l:after {
  width: 2em;
  height: 2em;
  left: 91.5%;
  bottom: 45%;
  border-radius: 100em;
}
.preview .device-mobile-l iframe {
  width: 560px;
  height: 320px;
}
.preview iframe {
  margin: 0;
  border: 0;
  transform-origin: 0 0;
}

.devices {
  list-style: none;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #eee;
  margin: 0 0 2rem;
  padding: 0;
}
.devices > li {
  display: inline-block;
  line-height: 2em;
  margin: 0 1em 0 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  
  <section class="preview">
  
    <ul class="devices">
      <li><a href="#desktop">Desktop</a></li>
      <li><a href="#tablet-p">Tablet</a></li>
      <li><a href="#tablet-l">Tablet Landscape</a></li>
      <li><a href="#mobile-p">Mobile</a></li>
      <li><a href="#mobile-l">Mobile Landscape</a></li>
    </ul>
    
    <div class="device device-desktop">
      <iframe src="https://www.lipsum.com/"></iframe>
    </div>
    
  </section>

</body>
</html>

jquery javascript
2 Answers
document.addEventListener("DOMContentLoaded", function () {

            const devices = document.querySelector(".devices");
            const device = document.querySelector(".device");

            devices.addEventListener("click", function (e) {
                let element = e.target;
                if (element.nodeName === "A") {
                    let device_selected = element.getAttribute('href').replace('#', '');
                    // device.className = ''; // or device.removeAttribute('class');
                    device.className = 'device device-' + device_selected;
                }
            })
        });

Parts of the code in your vanilla is actually jQuery, like .attr.

Anyway, in your code, the event listener is on the entire .devices ul, and then only if an <a> tag is what was actually clicked, we act. So that's what's being replicated here.

try clicking on, say, the bullets on the left. the function still runs but the if condition fails.

user_49351620

You can achieve with help of forEach() method and map() method so check below snippet.

Helpful Links:

Add Class in JavaScript
https://www.w3schools.com/jsref/prop_element_classlist.asp

forEach() Method
https://www.w3schools.com/jsref/jsref_foreach.asp

map() Method
https://www.w3schools.com/jsref/jsref_map.asp

document.queryselectorall() Method
https://www.w3schools.com/jsref/met_document_queryselectorall.asp

document.addEventListener("DOMContentLoaded", function () {
    const device = document.querySelector(".device");
    [...document.querySelectorAll('.devices a')].forEach((elem)=>{
        elem.addEventListener('click', function (event) {
            event.preventDefault(); // preventing
            [...document.querySelectorAll('.devices a')].map((r)=> r.classList.remove('active')); //remove active class
            this.classList.add('active'); // add active class
            let device_selected = this.getAttribute('href').replace('#', '');
            device.className = 'device device-' + device_selected;
        })
    });
});
.preview {
  overflow: hidden;
}
.preview .device {
  position: relative;
  width: 680px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #999;
}
.preview .device, .preview .device:after,
.preview .device iframe {
  transition: all 0.5s ease;
}
.preview .device iframe {
  transform: scale(0.5);
  border-radius: 1em;
}
.preview .device:after {
  content: " ";
  background-color: #444;
  position: absolute;
}
.preview .device-desktop {
  width: 680px;
  height: 400px;
  padding: 1em 1em 5em;
  border-radius: 1em;
}
.preview .device-desktop:after {
  width: 3em;
  height: 3em;
  bottom: 1em;
  left: 47.5%;
  border-radius: 100em;
}
.preview .device-desktop iframe {
  width: 1360px;
  height: 800px;
}
.preview .device-tablet-p {
  width: 384px;
  height: 512px;
  padding: 1em 1em 3em;
  border-radius: 1em;
}
.preview .device-tablet-p:after {
  width: 1.5em;
  height: 1.5em;
  bottom: 0.75em;
  left: 47%;
  border-radius: 100em;
}
.preview .device-tablet-p iframe {
  width: 768px;
  height: 1024px;
}
.preview .device-tablet-l {
  width: 512px;
  height: 384px;
  padding: 1em 3em 1em 1em;
  border-radius: 1em;
}
.preview .device-tablet-l:after {
  width: 1.5em;
  height: 1.5em;
  left: 93.5%;
  bottom: 47%;
  border-radius: 100em;
}
.preview .device-tablet-l iframe {
  width: 1024px;
  height: 768px;
}
.preview .device-mobile-p iframe,
.preview .device-mobile-l iframe {
  transform: scale(0.75);
}
.preview .device-mobile-p {
  width: 240px;
  height: 420px;
  padding: 1em 1em 3em;
  border-radius: 1em;
}
.preview .device-mobile-p:after {
  width: 2em;
  height: 2em;
  bottom: 0.5em;
  left: 45%;
  border-radius: 100em;
}
.preview .device-mobile-p iframe {
  width: 320px;
  height: 560px;
}
.preview .device-mobile-l {
  width: 420px;
  height: 240px;
  padding: 1em 3em 1em 1em;
  border-radius: 1em;
}
.preview .device-mobile-l:after {
  width: 2em;
  height: 2em;
  left: 91.5%;
  bottom: 45%;
  border-radius: 100em;
}
.preview .device-mobile-l iframe {
  width: 560px;
  height: 320px;
}
.preview iframe {
  margin: 0;
  border: 0;
  transform-origin: 0 0;
}
.devices {
  list-style: none;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #eee;
  margin: 0 0 2rem;
  padding: 0;
}
.devices > li {
  display: inline-block;
  line-height: 2em;
  margin: 0 1em 0 0;
}
.devices > li a{
    color: #444;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.devices > li a.active{
    padding: 5px 0;
    color: #183ec5;
    border-bottom: 3px solid #183ec5;
}
<section class="preview">
    <ul class="devices">
        <li><a href="#desktop" class="active">Desktop</a></li>
        <li><a href="#tablet-p">Tablet</a></li>
        <li><a href="#tablet-l">Tablet Landscape</a></li>
        <li><a href="#mobile-p">Mobile</a></li>
        <li><a href="#mobile-l">Mobile Landscape</a></li>
    </ul>
    <div class="device device-desktop">
        <iframe src="https://www.lipsum.com/"></iframe>
    </div>
</section>

user_70529270
Related