iOS Safari encountering an error with JavaScript class definitions

After creating a custom JavaScript class, everything seemed to be working fine on Safari and Chrome in Mac OS. However, when I tried running it on my iPad, I encountered an error.

To pinpoint the issue, I started debugging through the Develop menu on Safari. What's puzzling is that I couldn't find any relevant information online about the specific error message I received: "Unexpected use of reserved word 'class'".

Below is a snippet of my JS code:

class LoadingIndicator{ // error stems from here

    constructor(elementID){

        this.tick = 8;

        this.waitStatus = document.getElementById(elementID);

        this.animateLoaderVar = setInterval(
                                    this.animateLoader.bind(this),
                                    10
                                )

    }

    animateLoader (){        

        if(this.tick == 8){

            this.waitStatus.firstElementChild.innerHTML = ".";

        }
        else if(this.tick == 16){

            this.waitStatus.firstElementChild.innerHTML = "..";

        }else if(this.tick == 24){

            this.waitStatus.firstElementChild.innerHTML = "...";

            this.tick = 0;

        }

        this.tick += 1;

    }

    removeLoader(){

        this.waitStatus.outerHTML = "";
        delete this.waitStatus;

        clearInterval(this.animateLoaderVar);

    }

}

Answer №1

It seems that the ES6 class feature is not fully supported on the iOS browser you are using. Can you provide information about the version of iOS running on your iPad?

According to this resource, class declarations in JavaScript run in strict mode: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

If you're still facing issues, consider adding 'use strict'; to your code or check out https://babeljs.io/ for further assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the data in the <col> column

Is it feasible to update the values in a particular column of a table? <table> <col with="auto"> <col with="auto"> <col with="auto" id="update_me"> <?php for(hundreds of lines){ ?> <tr> <td>so ...

The custom classes I have created in Material UI are being overshadowed by the default classes provided by Material UI

I am trying to change the color of a TextField label to black when it is focused. I used classes in InputProps with a variable, but unfortunately, the default styling of material UI is taking precedence in chrome dev tools. Below is the code snippet. Pleas ...

Having trouble installing the 'ws' npm package on MacOS Big Sur?

Every time I try to install the websocket package using "npm install ws", I keep getting this error message: npm ERR! code ENOSELF npm ERR! Refusing to install package with name "ws" under a package npm ERR! also called "ws". Did you name your project the ...

When trying to log the parsed JSON, it unexpectedly returns undefined even though it appears to be in good

Everything was working fine until a couple of days ago. Let's consider this as my PHP script: echo json_encode(array('stat'=>'ok')); I am sending an AJAX request to this script: $.post(base_url+'line/finalize/', {t ...

Changing Json into Ios structure

I have been attempting to parse the JSON data in iOS but I keep encountering errors. Here is the JSON data that I am receiving from the API: data = ( { LogIn = { Emails = "abc@xyz`.com"; Latitude = "37.33233141"; Longitude = "-122.03121860 ...

Is there a way to verify if a view is visible within a UIScrollview in Xamarin.ios?

Here is the code I am working with: CGRect viewRect = tableAnswerSheet.Frame; CGRect mainRect = sv.Frame; if(CGRectIntersectsRect(mainRect, viewRect)) { //view is visible }else{ ...

Algorithm for organizing pagination to ensure consistent page sizes and prevent excessively large or small pages

My goal is to create a pagination algorithm that distributes elements evenly per page, with specified minimum and maximum thresholds. I aim to maximize the number of elements per page while adhering to the minimum rule. I've attempted to develop my o ...

The execution of the /bin/sh command was unsuccessful, resulting in exit code 1 (Operational on mobile devices only,

Recently, I've encountered an issue while trying to install a couple of apps that I've developed onto my device. Every time I try to do so, I receive the following error message: Command /bin/sh failed with exit code 1 Interestingly, this error ...

Using @react-three / react-three-fiber: Implement useLoader() to dynamically load a new file when props are updated

Presently, I have a functional react component that loads a gltf model during initial load. The path is passed through the props and this setup seems to be working well. However, when the props change and trigger a rerender of the component, I noticed tha ...

React Express Error: Unable to access property 'then' of undefined

I'm facing an issue while trying to server-side render my react app for users who have disabled JavaScript and also for better search engine optimization. However, I am encountering the following error: TypeError: Cannot read property 'then' ...

Tips for manipulating observableArray information retrieved through the $.getJSON method

Recently, I've started using knockout.js and I'm really enjoying it so far! While working in MVC4, I encountered a small issue. I had successfully implemented kojs with static data, but now I need to work with data passed from a controller via JS ...

Issue with Attaching Click Event to Dynamic Div Elements

I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...

MongoDB is experiencing an issue where the latest document is not being stored at the

Storing comments for my webpage in MongoDB has been flawless so far. Whenever a new comment is saved, it gets added to the bottom of the collection. This results in the newest comment appearing at the top when loading comments, which is ideal. However, I e ...

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

Tips for optimizing ajax performance and creating a speedy ajax-loaded reply text field, similar to the one on Orkut

Greetings, I am currently working on a website where I would like to implement a reply user feature. How can I create an ajax loaded reply text field that behaves like a popup? Right now, the existing text field takes quite a long time to load when clicki ...

Uncaught ReferenceError: jQuery is undefined" - Navigating the Angular and JavaScript Realm with

There is an Angular project that I am working on, and it utilizes the AvayaClientSDK consisting of three JavaScript files. While trying to import the AvayaClientSDK JS file into my component, an error message stating "jQuery is not defined" appeared. ...

How can I utilize a controller's method within a custom directive in AngularJS?

Within the javascript file, the code has been structured as follows: angular.module("amodule") .directive("bdirective",function(){ return{ scope: { testIsolated: '&test', }, restrict:'EA', repl ...

What is the best way to delete the material-dashboard-react text from the starting route in a material ui admin panel?

When launching my React web application, I am initially directed to localhost:3000/material-dashboard-react, which then redirects to /. However, this redirect is briefly visible before the web app fully loads. Can anyone advise on how to remove this initia ...

Unable to insert form and view upon file upload click

After attempting a file upload within a form, I noticed that upon submission the data is not being inserted into the database as expected. Additionally, when trying to access the table on another page and clicking on a specific file, the redirection does n ...

Modify/Enclose a method within a prototype

I have developed a framework that incorporates function wrapping to create a debugging tool. My current goal is to gather and report information upon the invocation of functions. Here is the initial code snippet I am working with: function wrap(label, cb) ...