xsaq Uncaught TypeError: Can’t learn properties of null (studying ‘clientHeight’)

July 8, 2022

1

I’m making a slideshow utilizing HTML,CSS, and js in native it really works high-quality however in WordPress, it would break, and in console show this error.

HTML:

    <html lang="fr">
        <head>
            <meta charset="utf-8">
            <title>OPPOSITE-SLIDER</title>
            <meta title="description" content material=""/>
<hyperlink href="https://fonts.googleapis.com/css?household=Slabo+27px" rel="stylesheet">
        <hyperlink href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        </head>
    
        <physique>
    
           <div class="wrapper">
               <div class="container">
    
                   <div class="slideshow">
    
                        <div class="slideshow-left">
    
                            <div class="Lslide">
                                <div class="Lslide-content">
                                    <h2>Most likely not</h2>
                                    <p>Be part of our creation</p>
    
                                    <div class="button">
                                        <a href="#">
                                            <p>Extra</p>
                                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="Lslide">
                                <div class="Lslide-content">
                                    <h2>However not at present</h2>
                                    <p>Be part of our creation</p>
    
                                    <div class="button">
                                        <a href="#">
                                            <p>Extra</p>
                                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="Lslide">
                                <div class="Lslide-content">
                                    <h2>Most likely not</h2>
                                    <p>Be part of our creation</p>
    
                                    <div class="button">
                                        <a href="#">
                                            <p>Extra</p>
                                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>    
    
                        </div>
    
                        <div class="slideshow-right">
    
                            <div class="Rslide">
                                <img src="https://mariongrandvincent.github.io/HTML-Private-website/img-codePen/flower-3.jpg" alt="">
                            </div>
    
                            <div class="Rslide">
                                <img src="https://mariongrandvincent.github.io/HTML-Private-website/img-codePen/flower-5.jpg" alt="">
                            </div>     
                            <div class="Rslide">
                                <img src="https://mariongrandvincent.github.io/HTML-Private-website/img-codePen/flower-1.jpg" alt="">
                            </div>                                              
                        </div>    
    
                        
                        <div class="management">
                            <div class="oncontrol control-top">
                                <i class="fa fa-arrow-up" aria-hidden="true"></i>
                            </div>
                            <div class="oncontrol control-bottom">
                                <i class="fa fa-arrow-down" aria-hidden="true"></i>
                            </div>                          
                        </div>
    
                   </div>
    
               </div>
           </div>
    
        </physique>
    </html>

CSS:

physique,html {
    width: 100%;
    peak: 100%;
    padding: 0;
    margin: 0;
    show: block;
    place: relative;
    overflow: hidden;
    font-family: 'Slabo 27px', serif;
    font-size: 16px;
}
        h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
}
ul,li,p {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
.wrapper {
    peak: 100%;
    width: 100%;
    show: block;
    overflow: hidden;
}
.wrapper .container {
    peak: 100%;
    width: 100%;
    show: block;
    overflow: hidden;
}

.slideshow {
    peak: 100%;
    width: 100%;
    show: block;
    overflow: hidden;
}
.slideshow .slideshow-left {
    width: 40%;
    float: left;
    place: relative;
    peak: 100%;
}
.slideshow .slideshow-left .Lslide {
    peak: 100%;
    show: block;
    overflow: hidden;
    place: absolute;
    backside: 0px;
    prime: 0;
    left: 0;
    proper: 0;
}  
.slideshow .Lslide-content {
    place: absolute;
    prime: 50%;
    left: 50%;
    rework: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.slideshow .Lslide-content h2 {
    coloration: #fff;
    font-weight: 600;
    font-size: 60px;
    line-height: 0.8;
}
.slideshow .Lslide-content p {
    coloration: #fff;
    padding: 2.5em 0em;
}
.slideshow .Lslide-content .button {
    background-color: #fff;
    show: inline-block;
    border-radius: 25px;
    place: relative;
}
.slideshow .Lslide-content .button i {
    float: proper;
    place: absolute;
    prime: 50%;
    proper: 2.5em;
    coloration: #000;
    font-size: 9px;
    rework: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all 0.3s;
}
.slideshow .Lslide-content .button:hover i {
    proper: 1.7em;
}
.slideshow .Lslide-content .button p {
    margin: 0;
    padding: 0;
    coloration: #000;
    text-align: left;
    padding: 0.8em 8em 0.8em 1.5em;
    font-size: 12px;
    font-weight: 600;
}
.slideshow .slideshow-right {
    width: 60%;
    float: left;
    place: relative;
    peak: 100%;    
}     
.slideshow .slideshow-right .Rslide {
    peak: 100%;
    show: block;
    overflow: hidden;
    place: absolute;
    backside: 0px;
    prime: 0;
    left: 0;
    proper: 0;
}  
.slideshow .slideshow-right .Rslide img {
    min-width: 100%;
}
.management {
    place: absolute;
    left: 40%;
    prime: 50%;
    rework: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}    
.management i {
    left: 0;
    proper: 0;
    prime: 50%;
    rework: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: heart;
    place: absolute;
    coloration: #aaaaaa;
    transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}    
.management .control-top {
    width: 45px;
    peak: 50px;
    background-color: #fff;
    z-index: 5;
    place: relative;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
}
.management .control-top:hover i {
    coloration: #333333;
}
.management .control-bottom {
    width: 45px;
    peak: 50px;
    background-color: #fff;
    z-index: 5;
    place: relative;
    border-radius: 4px 0px 0px 4px;
    left: -45px;
    cursor: pointer;
}  
.management .control-bottom:hover i {
    coloration: #333333;
}

JS:

var Lslide      = doc.querySelectorAll('.Lslide'),
    Rslide      = doc.querySelectorAll('.Rslide'),
    management     = doc.querySelectorAll('.oncontrol'),
    slideHeight = doc.querySelector('.wrapper').clientHeight,
    coloration = ['#fdc97c', '#e5d3d0', '#71b3d6'],
    index = 0;


operate init() {
    slideHeight = doc.querySelector('.wrapper').clientHeight;
    for (i = 0; i < Lslide.size; i++) {
        Lslide[i].model.backgroundColor = coloration[i];
        Lslide[i].model.prime = -slideHeight * i + "px";
        Rslide[i].model.prime = slideHeight * i + "px";
    }  
}
init()
window.addEventListener('resize', operate(){
    init()
});

operate moveToTop() {

    index++;
    for (el = 0; el < Lslide.size; el++) {
        Lslide[el].model.prime = parseInt(Lslide[el].model.prime) + slideHeight + "px";
        Rslide[el].model.prime = parseInt(Rslide[el].model.prime) - slideHeight + "px";
    }

    if (index > Lslide.length-1) {
        index = 0;
        for (el = 0; el < Lslide.size; el++) {
            Lslide[el].model.prime = -slideHeight * el + "px";
            Rslide[el].model.prime = slideHeight * el + "px";
        }
    }
}

operate moveToBottom() {
    index--;
    for (el = 0; el < Lslide.size; el++) {
        Lslide[el].model.prime = parseInt(Lslide[el].model.prime) - slideHeight + "px";
        Rslide[el].model.prime = parseInt(Rslide[el].model.prime) + slideHeight + "px";
        
    }
    if (index < 0) {
        index = Rslide.length-1;
        for (el = 0; el < Lslide.size; el++) {
            Lslide[el].model.prime = parseInt(Lslide[el].model.prime) + slideHeight * Lslide.size + "px";
            Rslide[el].model.prime = parseInt(Rslide[el].model.prime) - slideHeight * Rslide.size + "px";
        }
    }
}

operate transition() {
    for (t = 0; t < Lslide.size; t++) {
        Lslide[t].model.transition = "all 0.8s";
        Rslide[t].model.transition = "all 0.8s";
    }
}
  

for (t = 0; t < management.size; t++) {
    management[t].addEventListener("click on", operate() {

        if (this.classList.incorporates('control-top')) {
            moveToTop()
        } 
        if (this.classList.incorporates('control-bottom')) {
            moveToBottom()
        }

        transition()
   
    });
}

var wheeling;
operate mousemouve(e) {

    clearTimeout(wheeling);
    e.preventDefault();
    var e = window.occasion || e; 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.element)));
    
    wheeling = setTimeout(operate() {
        wheeling = undefined;
        if (delta === 1) {
            moveToTop()
        }
        if (delta === -1) {
            moveToBottom()
        }
    }, 100);

    transition()
}

doc.addEventListener("mousewheel", mousemouve);
doc.addEventListener("DOMMouseScroll", mousemouve);

Previous articleIntel NUC X15 Laptops Detailed: Alder Lake Meets Arc Graphics

Next article20 Finest New Web sites, July 2022

xsaq Uncaught TypeError: Can’t learn properties of null (studying ‘clientHeight’)

Enhance the Safety of API Keys [Checklist included]

Permutation of first N parts with absolute adjoining distinction in growing order

CLI 學習筆記

LEAVE A REPLY Cancel reply

Most Popular

20 Finest New Web sites, July 2022

Intel NUC X15 Laptops Detailed: Alder Lake Meets Arc Graphics

TrickBot Gang Shifted its Concentrate on “Systematically” Concentrating on Ukraine

11 Greatest Mechanics Device Set Evaluations in 2022

Recent Comments

ABOUT US

POPULAR POSTS

20 Finest New Web sites, July 2022

Intel NUC X15 Laptops Detailed: Alder Lake Meets Arc Graphics

TrickBot Gang Shifted its Concentrate on “Systematically” Concentrating on Ukraine

POPULAR CATEGORY