Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills.

  var getJSON = function (url) {
  "use strict";
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        resolve(xhr.response);
      } else {
        reject(status);
      }
    };
    xhr.send();
  });
};

function updateCount() {
  "use strict";
  getJSON('http://192.99.124.166:8080/count').then(function(data) {
    console.log('update');
    stats.innerText = data.result; //display the result in an HTML element
 });
}

updateCount();

setInterval(updateCount, 10000);

If you check out this code on Chrome, Opera or Microsoft Edge, you'll see server and player stats automatically updating every 10 seconds as intended. However, when viewed on IE 11 or Firefox, the div that should display results remains empty.

I'm not a JavaScript expert, and though I received help from someone via IRC to improve the code using JS Lint and implementing "use strict," the issue persists on IE 11 and Firefox.

If anyone could provide insight into why this might be happening, I'd greatly appreciate it. I've tried inspecting the code on IE 11 and Firefox but nothing seems to trigger or show up. Oddly enough, even though the browser console displays the "update" message, the div doesn't display anything!

Answer №1

IE does not support promises, but fear not as there are numerous A+ compliant polyfills that can be used as alternatives.

Mozilla does not support innerText. Instead, consider using textContent or innerHTML for markup purposes.

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

Selenium mistakenly launching an incorrect Firefox-derived browser

Recently, I switched to using the Waterfox browser, a faster 64-bit version of Firefox that shares user data with Firefox. However, I encountered an issue while trying to use Selenium, as invoking Firefox actually opened the Waterfox browser: from seleniu ...

What is the process by which a JavaScript Date object is converted to a string when you log it to the

Whenever I create objects in JavaScript and output them to the console, I typically see a JavaScript object displayed. For instance: var myObj = { bla: "foo" } console.log(myObj); This code will display: { bla: "foo" } However, whe ...

What is the reason for Python Flask to consume both instances of a file when using .decode()?

In my program, I am fetching a CSV file from an HTML form and decoding it using utf-8. However, I need to have two instances of this file for different purposes. The issue arises when I use .decode('utf-8'), as both instances end up being consume ...

Embedding JSON data in a GSP page

My goal is to transfer JSON data to a GSP page and present it in a table format. The expected JSON structure: { "data": [ [ "Tiger Nixon", "System Architect", "Edinburgh" ] ]} I attempted to achieve this with the following co ...

Arranging numbers in JavaScript lists

empList = [ { "Account": "AAA - 0029", "Available": "$100" }, { "Account": "BBB- 0146", "Available": "200" }, { "Account": "AAA - 1812", "Available": "300"}, { "Account": "CCC- 2019", "Available": "400"}, { "Account" ...

Experience the simplistic magic of the Vue.js/Vuefire/Firebase app world, though it struggles with reading values

Transitioning to Vue.js from SQL programming has been a bit of a challenge, but I'm getting there. Currently, I am using vuefire according to the specifications and even manually inserting the correct key from my Firebase database with one record and ...

Leveraging the useEffect hook to make multiple API calls in ReactJS

I have a useEffect function in my react component where I am calling the API videoGridState. The issue I am facing is that the API is being called twice; once when the page initially reloads and again when the count changes. I want it to be called only onc ...

Choosing a subset of data within a JavaScript object with the help of jQuery/jHashtable

Here is an object that I am working with: var data = { "info" : [{ "title": "Desemberkonsert", "description": "MangerFHS 09/10" }], "playlist" : [ { "title": "In This Place", "description": "Excalibur", "href": "desemberkonsert_in-this-place", "url": "flv ...

What is the best way to access the properties of individual objects within an array of objects in a MongoDB MapReduce JavaScript query?

Need help referencing each property of an object within an array of objects using MongoDB MapReduce JavaScript query? Data example: { "_id": ObjectId("544ae3de7a6025f0470041a7"), "name": "Bundle 4", "product_groups": [ { "name": "camera g ...

choosing a date from the UICalendar

Recently, I've started exploring Angular and I'm trying to incorporate a calendar feature using ui-calendar. So far, I've managed to display a basic calendar with some events on it. Now, my goal is to allow users to click on a specific day ...

Search Result Causing Navbar to Break in Bootstrap Framework

While working on implementing the search functionality with AJAX and PHP, I encountered an issue where displaying the search results breaks the navbar layout. https://i.sstatic.net/FctpA.png this is the navigation bar code <nav class="navbar ...

How can we verify that console.log has been called with a specific subset of expected values using Jest?

I am currently experimenting with a function that adds logging and timing functionality to any function passed to it. However, I am facing a challenge when trying to test the timing aspect of it. Here are my functions: //utils.js export const util_sum = ( ...

Please elaborate on the appropriate application of angularjs Directives in this specific scenario

From my experience with Angular, I've learned that directives are used for manipulating the DOM while controllers are more about controlling functionality. I've been struggling to convert a small wizard into generic directives, aiming for reusab ...

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

What is the reasoning behind the return type of void for Window.open()?

There is a difference in functionality between javascript and GWT in this scenario: var newWindow = window.open(...) In GWT (specifically version 1.5, not sure about later versions), the equivalent code does not work: Window window = Window.open("", "", ...

Utilization of z-index with float: left within an image gallery in CSS

Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code: .item { width: 200px; margin: 10px; float: left; } To add some functionality, I have implemented ...

Mastering the Art of Tallying Select Choices in Protractor

Experiencing an issue with counting options in the select attribute during my test. Here is the code snippet: it('should verify the number of options', function()) { expect(element(by.id('sorting_options')).all(by.tagName('optio ...

Backend JS error found in Joomla 3.0 Component

Currently, I am working on developing a custom Joomla 3.0 component. To begin, I started by downloading the com_hello component sample from the official Joomla documentation. However, I've encountered an issue when trying to check the checkbox in the ...

Modifying webpage code

I am looking to develop a system where I can edit various elements such as the navbar, paragraphs, and images directly from a web page. I understand that this can be achieved with JavaScript, but I am facing the issue of my customizations reverting to defa ...

Storing multiple HTML elements in a variable with React allows for easy manipulation and

Looking to optimize some repeated code in a React component that renders HTML elements. Trying to save the repetitive html parts in a variable and then return them, but running into issues. const renderAddress = event => { if (event.venue.address.a ...