Use arrow functions for anonymous functions where possible (part #8)

files/en-us/web/api/touch/pagey/index.md

@@ -39,7 +39,7 @@ are accessed via the event's {{domxref("TouchEvent.changedTouches")}} list.
 // Register a touchmove listeners for the 'source' element
 const src = document.getElementById("source");
 
-src.addEventListener('touchmove', function(e) {
+src.addEventListener('touchmove', (e) => {
   // Iterate through the touch points that have moved and log each
   // of the pageX/Y coordinates. The unit of each coordinate is CSS pixels.
   for (let i = 0; i < e.changedTouches.length; i++) {

files/en-us/web/api/touch/screenx/index.md

@@ -30,7 +30,7 @@ In following simple code snippet, we assume the user initiates multiple touch co
 // Register a touchstart listeners for the 'source' element
 const src = document.getElementById("source");
 
-src.addEventListener('touchstart', function(e) {
+src.addEventListener('touchstart', (e) => {
   // Iterate through the touch points and log each screenX/Y coordinate.
   // The unit of each coordinate is CSS pixels.
   for (let i = 0; i < e.touches.length; i++) {

files/en-us/web/api/touch/target/index.md

@@ -29,7 +29,7 @@ In following simple code snippet, we assume the user initiates one or more touch
 // Register a touchmove listener for the 'source' element
 const src = document.getElementById("source");
 
-src.addEventListener('touchstart', function(e) {
+src.addEventListener('touchstart', (e) => {
   // Iterate through the touch points that were activated
   // for this element.
   for (let i = 0; i < e.targetTouches.length; i++) {

files/en-us/web/api/touch_events/using_touch_events/index.md

@@ -79,7 +79,7 @@ Access the attributes of a touch point.
 
 ```js
 // Create touchstart handler
-someElement.addEventListener('touchstart', function(ev) {
+someElement.addEventListener('touchstart', (ev) => {
   // Iterate through the touch points that were activated
   // for this element and process each event 'target'
   for (let i = 0; i < ev.targetTouches.length; i++) {

files/en-us/web/api/touchevent/altkey/index.md

@@ -30,7 +30,7 @@ This example illustrates how to access the {{domxref("TouchEvent")}} key modifie
 In following code snippet, the {{domxref("Element/touchstart_event", "touchstart")}} event handler logs the state of the event's modifier keys.
 
 ```js
-someElement.addEventListener('touchstart', function(e) {
+someElement.addEventListener('touchstart', (e) => {
    // Log the state of this event's modifier keys
    console.log(`altKey = ${e.altKey}`);
    console.log(`ctrlKey = ${e.ctrlKey}`);

files/en-us/web/api/touchevent/changedtouches/index.md

@@ -33,7 +33,7 @@ This example illustrates the {{domxref("TouchEvent")}} object's {{domxref("Touch
 In following code snippet, the {{domxref("Element/touchmove_event", "touchmove")}} event handler iterates through the `changedTouches` list and prints the identifier of each touch point that changed since the last event.
 
 ```js
-someElement.addEventListener('touchmove', function(e) {
+someElement.addEventListener('touchmove', (e) => {
    // Iterate through the list of touch points that changed
    // since the last event and print each touch point's identifier.
    for (let i = 0; i < e.changedTouches.length; i++) {

files/en-us/web/api/touchevent/touches/index.md

@@ -42,7 +42,7 @@ that were activated and then invokes different handlers depending on the number
 points.
 
 ```js
-someElement.addEventListener('touchstart', function(e) {
+someElement.addEventListener('touchstart', (e) => {
    // Invoke the appropriate handler depending on the
    // number of touch points.
    switch (e.touches.length) {

files/en-us/web/api/touchlist/item/index.md

@@ -45,7 +45,7 @@ This code example illustrates the use of the {{domxref("TouchList")}} interface'
 ```js
 const target = document.getElementById("target");
 
-target.addEventListener('touchstart', function(ev) {
+target.addEventListener('touchstart', (ev) => {
 
   // If this touchstart event started on element target,
   // set touch to the first item in the targetTouches list;

files/en-us/web/api/touchlist/length/index.md

@@ -31,7 +31,7 @@ This code example illustrates the use of the {{domxref("TouchList")}} interface'
 ```js
 const target = document.getElementById("target");
 
-target.addEventListener('touchstart', function(ev) {
+target.addEventListener('touchstart', (ev) => {
 
   // If this touchstart event started on element target,
   // set touch to the first item in the targetTouches list;

files/en-us/web/api/userproximityevent/index.md

@@ -25,7 +25,7 @@ The **`UserProximityEvent`** indicates whether a nearby physical object is prese
 ## Examples
 
 ```js
-window.addEventListener('userproximity', function(event) {
+window.addEventListener('userproximity', (event) => {
   if (event.near) {
     // let's power off the screen
     navigator.mozPower.screenEnabled = false;

files/en-us/web/api/vibration_api/index.md

@@ -66,7 +66,7 @@ function stopVibrate() {
 // Start persistent vibration at given duration and interval
 // Assumes a number value is given
 function startPersistentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
+    vibrateInterval = setInterval(() => {
         startVibrate(duration);
     }, interval);
 }

files/en-us/web/api/videotrack/label/index.md

@@ -42,12 +42,12 @@ only allow certain track kinds through.
 
 ```js
 function getTrackList(el) {
-  let trackList = [];
+  cons trackList = [];
   const wantedKinds = [
     "main", "alternative", "commentary"
   ];
 
-  el.videoTracks.forEach(function(track) {
+  el.videoTracks.forEach((track) => {
     if (wantedKinds.includes(track.kind)) {
       trackList.push({
         id: track.id,

files/en-us/web/api/visualviewport/resize_event/index.md

@@ -33,15 +33,15 @@ A generic {{domxref("Event")}}.
 You can use the `resize` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-visualViewport.addEventListener('resize', function() {
+visualViewport.addEventListener('resize', () => {
   // …
 });
 ```
 
 Or use the `onresize` event handler property:
 
 ```js
-visualViewport.onresize = function() {
+visualViewport.onresize = () => {
   // …
 };
 ```

files/en-us/web/api/visualviewport/scroll_event/index.md

@@ -33,15 +33,15 @@ A generic {{domxref("Event")}}.
 You can use the `scroll` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-visualViewport.addEventListener('scroll', function() {
+visualViewport.addEventListener('scroll', () => {
   // …
 });
 ```
 
 Or use the `onscroll` event handler property:
 
 ```js
-visualViewport.onscroll = function() {
+visualViewport.onscroll = () => {
   // …
 };
 ```

files/en-us/web/api/vrdisplay/cancelanimationframe/index.md

@@ -46,15 +46,15 @@ drawScene();
 if(navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
     if(displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
+      btn.addEventListener('click', () => {
         if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
             console.log('Presenting to WebVR display');
 
             // Set the canvas size to the size of the vrDisplay viewport

files/en-us/web/api/vrdisplay/depthfar/index.md

@@ -32,7 +32,7 @@ It initial value is `10000.0`.
 ```js
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   vrDisplay.depthNear = 1.0;
   vrDisplay.depthFar = 7500.0;

files/en-us/web/api/vrdisplay/depthnear/index.md

@@ -31,7 +31,7 @@ A double, representing the z-depth in meters; its initial value is `0.01`.
 ```js
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   vrDisplay.depthNear = 1.0;
   vrDisplay.depthFar = 7500.0;

files/en-us/web/api/vrdisplay/exitpresent/index.md

@@ -40,15 +40,15 @@ A promise that resolves once the presentation has ended. If the `VRDisplay` is n
 if(navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
     if(displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
+      btn.addEventListener('click', () => {
         if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
             console.log('Presenting to WebVR display');
 
             // Set the canvas size to the size of the vrDisplay viewport

files/en-us/web/api/vrdisplay/getframedata/index.md

@@ -43,12 +43,12 @@ A boolean value — a value of `true` is returned if the {{domxref("VRFrameData"
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });

files/en-us/web/api/vrdisplay/getpose/index.md

@@ -41,12 +41,12 @@ A {{domxref("VRPose")}} object.
 Once we have a reference to a {{domxref("VRDisplay")}} object, we can retrieve the {{domxref("VRPose")}} representing the current pose of the display.
 
 ```js
-if(navigator.getVRDisplays) {
+if (navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
 

files/en-us/web/api/vrdisplay/index.md

@@ -70,12 +70,12 @@ An array of all connected VR Devices can be returned by invoking the {{domxref("
 ## Examples
 
 ```js
-if(navigator.getVRDisplays) {
+if (navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       // Now we have our VRDisplay object and can do what we want with it
     }

files/en-us/web/api/vrdisplay/isconnected/index.md

@@ -27,16 +27,16 @@ A boolean value; `true` means the display is connected; `false` means it isn't.
 ## Examples
 
 ```js
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   // If a display is available, use it to present the scene
-  if(displays.length > 0) {
+  if (displays.length > 0) {
     vrDisplay = displays[0];
 
     // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-    btn.addEventListener('click', function() {
+    btn.addEventListener('click', () => {
       // Only request presentation if the display is still connected.
-      if(vrDisplay.isConnected) {
-        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      if (vrDisplay.isConnected) {
+        vrDisplay.requestPresent([{ source: canvas }]).then(() => {
           // start rendering the app, etc.
         });
       } else {

files/en-us/web/api/vrdisplay/ispresenting/index.md

@@ -33,9 +33,9 @@ function onVRExitPresent () {
   // we weren't presenting.)
   if (!vrDisplay.isPresenting)
     return;
-  vrDisplay.exitPresent().then(function () {
+  vrDisplay.exitPresent().then(() => {
     // Nothing to do because we're handling things in onVRPresentChange.
-  }, function (err) {
+  }, (err) => {
     let errMsg = "exitPresent failed.";
     if (err && err.message) {
       errMsg += `<br/>${err.message}`;

files/en-us/web/api/vrdisplay/requestanimationframe/index.md

@@ -44,12 +44,12 @@ A long representing the handle of the `requestAnimationFrame()` call. This can t
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });

files/en-us/web/api/vrdisplay/requestpresent/index.md

@@ -43,18 +43,18 @@ A promise that resolves once the presentation has begun. there are a number of r
 ## Examples
 
 ```js
-if(navigator.getVRDisplays) {
+if (navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
-        if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      btn.addEventListener('click', () => {
+        if (btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
             console.log('Presenting to WebVR display');
 
             // Set the canvas size to the size of the vrDisplay viewport

files/en-us/web/api/vrdisplay/resetpose/index.md

@@ -43,7 +43,7 @@ None ({{jsxref("undefined")}}).
 ```js
 // Assuming vrDisplay already contains a VRDisplay object,
 // and we have a <button> referenced inside btn
-btn.addEventListener('click', function() {
+btn.addEventListener('click', () => {
   vrDisplay.resetPose();
   console.log('Current pose set as origin/center');
 });

files/en-us/web/api/vrdisplay/submitframe/index.md

@@ -42,12 +42,12 @@ None ({{jsxref("undefined")}}).
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });

files/en-us/web/api/vrdisplaycapabilities/index.md

@@ -38,7 +38,7 @@ This interface is accessible through the {{domxref("VRDisplay.capabilities")}} p
 
 ```js
 function reportDisplays() {
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     for (let i = 0; i < displays.length; i++) {
       const cap = displays[i].capabilities;
       // cap is a VRDisplayCapabilities object

files/en-us/web/api/vrdisplayevent/display/index.md

@@ -27,7 +27,7 @@ A {{domxref("VRDisplay")}} object.
 ## Examples
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
     console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
   })
 ```

files/en-us/web/api/vrdisplayevent/index.md

@@ -36,7 +36,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 ## Examples
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
   console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
 })
 ```

files/en-us/web/api/vrdisplayevent/reason/index.md

@@ -33,7 +33,7 @@ A string representing the reason why the event was fired. The available reasons
 ## Examples
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
     console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
   })
 ```