CODEWITHSUNDEEP
javascripthtml
Hongwen Huang
Hongwen Huang

Reputation: 23

javascript how to pass a window object to a function

My function, Slider, takes a window object, but it does not contain the body. And my code only works in mobile screen view. In my function, while debugging below code,

console.log(windows.document);

if (!mySlider) {console.log(windows.document.body);}

The first console log shows that the body contains information; however, the second one shows that the body is null. I am guessing this is relate

<!DOCTYPE html>
<html>

<head>
  <script>
    "use strict";
    /*
     *   Created by Waltor on 20181018.
     */
    var Slider = (function(windows) {
      var mySlider;
      var point = {
        start: 0,
        end: 0
      };

      function Slider(targetId, widthOfDisplayBlock, ImageSize, imageSrcArrays) {
        mySlider = document.getElementById(targetId);
        console.log(windows.document);
        if (!mySlider) {
          console.log(windows.document.body);
          console.log("mySlider >> " + mySlider);
          return;
        }
        createContainer(widthOfDisplayBlock, imageSrcArrays, ImageSize);
        createPhoneEvents(ontouchmove_, ontouchstart_);
      }

      function createContainer(widthOfDisplayBlock, imageSrcArrays, ImageSize) {
        var result = mySlider;
        var ImageSizeNumber = ImageSize.match(/\d/g).join("");
        var div = document.createElement("div");
        var dash = document.createElement("div");
        var dashWidth;
        var preSpace;

        result.style.overflow = "hidden";
        result.style.width = widthOfDisplayBlock;
        dashWidth = ((result.offsetWidth) - (ImageSizeNumber * 2)) / 2;

        ImageSize = ImageSize ? ImageSize : "100px";
        div.style = "width:" + ((imageSrcArrays.length + 1) * (ImageSizeNumber * 1 + dashWidth)) + "px;";
        dash.style = "float:left;position:relative;width:" + (ImageSizeNumber / 2) + "px;height:10px;top:" + (ImageSizeNumber / 2) + "px;";
        div.appendChild(dash);
        preSpace = dash.cloneNode(true);
        preSpace.style.width = dashWidth + "px";
        preSpace.style.background = "#ccc";
        div.appendChild(preSpace);

        for (var i = 0; i < imageSrcArrays.length; i++) {
          var img = document.createElement("img");
          img.src = imageSrcArrays[i];
          img.style = "float:left;width:" + ImageSize + ";height:" + ImageSize + ";";
          div.appendChild(img);
          div.appendChild(preSpace.cloneNode(true));
        }
        div.appendChild(dash.cloneNode(true));

        result.appendChild(div);
        return result;
      }

      function createPhoneEvents(ontouchmove, ontouchstart) {
        var result = mySlider;

        result.ontouchmove = ontouchmove;
        result.ontouchstart = ontouchstart;
        result.ontouchend = touchend;
      }

      function touchend() {
        point.start = 0;
        point.end = 0;
        console.log('clear!');
      }

      var count = 0;

      function ontouchmove_(event) {
        return touchmove(event, caculation);

        function caculation(start, end) {
          if (start && end) return end - start;
          return 0;
        }

        function touchmove(event, caculation) {
          console.log(count + " > " + event.touches[0].clientX);
          count++;
          var move = 0;
          var result = mySlider;
          var limit = {
            left: result.offsetLeft,
            right: result.offsetLeft + result.offsetWidth
          };

          point.end = event.touches[0].clientX;
          if (point && (point.end > limit.left) && (point.end < limit.right)) move = caculation(point.start, point.end);
          mySlider.scrollLeft -= move * 2;
          point.start = point.end;

          document.getElementById("test").innerHTML =
            "point.start >> " + point.start +
            "<br/>point.end >> " + point.end +
            "<br/>move >> " + move;
        }
      }

      function ontouchstart_(event) {

      }

      return Slider;
    })(window);

    var src = [
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
      "http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg"
    ];

    function loading() {
      console.log(this);
      Slider("targetId", "60vw", "150px", src);
    }
  </script>
  <script>
    window.addEventListener('load', loading);
    window.addEventListener('load', Slider("targetId", "60vw", "150px", src));
  </script>
</head>

<body>
  <hr/>
  <div id="targetId" style="margin:0 auto;"></div>
  <hr/>
  <div id="test" style="font-szie:30px;"></div>
</body>

</html>

ed to how javascript loads information. Can anyone help me understand what is going on in my code and how to pass the window object?

Upvotes: 2

Views: 1456

Answers (1)

ns_helloworld
ns_helloworld

Reputation: 125

First of all, the window object is global. Any function in your code has access to it as long as you are running this code in a browser.

Next, your error is where you call your code: You have

 <script>
   window.addEventListener('load', loading);
   window.addEventListener('load', Slider("targetId", "60vw", "150px", src));
 </script>

When it should be:

 <script>
   window.addEventListener('load', loading);
   window.addEventListener('load', function() {
       Slider("targetId", "60vw", "150px", src);
   })
 </script>

This is because your 'function' Slider is really a constructor via closure. At the top you have var Slider = (function () { ... })(window) so Slider is called automatically on its own. After it gets called it actaully returnns a function that you have defined inside of the closure called Slider. This function returns null or undefined. So when you add the event listener, instead of givinng it a funnction to call when the window finishes loading, you are giving it a value.

Upvotes: 2

Related Questions