My Javascript code don't work in the customize js code on wordpress

Question

I have to use WordPress to do a website for my work, but I prefer to personalize the graphic and I'm writing the code by hand on WordPress.

I have done a personalized slider on sublime text, and it works. But when I pasted the code in WordPress, it stopped working. I put the html in the text editor. For the css and JavaScript code I'm using "custom css/js": i put the css code in the css space (as I'm used to do) and for the first time I have used js code on WordPress. And it doesn't work

This is the working code! Is not a problem about where the script is positionated, because it works anycase!

var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    
    function currentDiv(n) {
      showDivs(slideIndex = n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
      }
      x[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " w3-opacity-off";
    }

.w3-content{
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden
    }
    
    .mySlides{
        min-height: 100%
    }
    
    #galleryA{
     position: relative;
        width: 100px;
        height: 100px;
        -webkit-clip-path: polygon(0% 2%, 100% 2%, 50% 88%);
        clip-path: polygon(0% 2%, 100% 2%, 50% 89%);
        float: left;
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin-left:-40px;
    }
    
    #galleryB{
     position: relative;
        width: 100px;
        height: 100px;
        -webkit-clip-path: polygon(50% 2%, 0% 87%, 100% 87%);
        clip-path: polygon(50% 2%, 0% 87%, 100% 87%);
        float: left;
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin-left:-40px;
    }
    
    .demo{
     max-height: 100%;
        flex-shrink: 0;
        cursor:pointer
    }
    
    .w3-row-padding{
     padding-left:40px;
    }

This is the HTML code

    <div class="mainContainer">
    <div class="w3-content">
       <img class="mySlides" src="http://via.placeholder.com/350x150">
     <img class="mySlides" src="http://via.placeholder.com/350x150">
     <img class="mySlides" src="http://via.placeholder.com/350x150">
     </div>
     <div class="w3-row-padding w3-section">
         <div id="galleryA" class="w3-col s4">
           <img class="demo w3-opacity w3-hover-opacity-off" src="a.jpg" onclick="currentDiv(1)">
         </div>
         <div id="galleryB" class="w3-col s4">
           <img class="demo w3-opacity w3-hover-opacity-off" src="c.jpg" onclick="currentDiv(2)">
         </div>
         <div id="galleryA" class="w3-col s4">
           <img class="demo w3-opacity w3-hover-opacity-off" src="a.jpg" onclick="currentDiv(3)">
         </div>
      </div>
    </div>

Five quid says this turns out to be a duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Quentin, Dec 07 '17 at 16:12
So let me guess, you have not bothered to do the most basic of steps such as checking to see if you have errors, considering you haven't posted any error messages? What do you want us to do with 'don't work'? Guess? — Ashley Brown, Dec 07 '17 at 16:25

My Javascript code don't work in the customize js code on wordpress

0 Answers0