JQuery to Vanilla JavaScript Conversion Is Not Working-CodePudding

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 >
  
    <ul >
      <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 >
      <iframe src="https://www.lipsum.com/"></iframe>
    </div>
    
  </section>

</body>
</html>

CodePudding user response：

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.

CodePudding user response：

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 >
    <ul >
        <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 >
        <iframe src="https://www.lipsum.com/"></iframe>
    </div>
</section>