How to parse XML for Chrome browser using javascript

How to use JS to parse xml on chrome browser and output to html form field? My script works on MS ie. The XML is shown as printed source file "http_myxml.xml". html output from JS to "document.display"

<?xml version = "1.0" ?>
<record>
<c_date>2022-11-21 07:22:10</cx_date>
<ev1_sup>1.22</ev1_sup>
</record>

var xml_data_URL="http_myxml.xml";
var Polling;
var Ptr411Name="c_date";
var Ptr52901Name="ev1_sup";

var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = true;
 
function GetData()
{
  if(xml.readyState==4)  // Is the load completed?
  {
    xml.load(xml_data_URL);
    Polling = true; 
  }
  setTimeout("GetData()",16000);
}
 
function DisplayData()
{
  var xmlElements;
  var svgElement;
  // Check for XML file update 
  if(!Polling) return;
       
  if(xml.readyState==4)  // Is the load completed?
  {
    Polling = false;
  
    var err = xml.parseError; 
    if (err.errorCode == 0)
    { 
    
    // update form fields   
xmlElements = xml.getElementsByTagName(Ptr411Name);
document.display.c_date.value=xmlElements.item(0).text;

xmlElements = xml.getElementsByTagName(Ptr52901Name);
document.display.ev1_sup.value=xmlElements.item(0).text;

if(xmlElements.item(0).text == 0)    
      window.status = "x";
    }
    else
    {
      alert("advice: xml data load timed out: "+err.reason);
    }
  }
  setTimeout("DisplayData()",8000);
}

<html>
<form action="" name="display" method="post"><input class="o" size="26" readonly name="c_date"><input class="o" size="26" readonly name="ev1_sup"></form>
</html>

This code works for ie, browser displays the xmlelement data c_date and ev1_sup in corresponding html form fields. How to make this work for Chrome?

Solution

Example 1

In this example I load the XML document:

<?xml version="1.0" encoding="UTF-8"?>
<fields>
  <field type="text" name="title"/>
  <field type="text" name="description"/>
</fields>

For loading the XML document I use the fetch API. For the example I replace the real URL with a data URL to show that it works here on ST.

var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPGZpZWxkcz4KPGZpZWxkIHR5cGU9InRleHQiIG5hbWU9InRpdGxlIi8+CjxmaWVsZCB0eXBlPSJ0ZXh0IiBuYW1lPSJkZXNjcmlwdGlvbiIvPgo8L2ZpZWxkcz4=';

document.addEventListener('DOMContentLoaded', e => {
  fetch(xml_data_URL).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, "application/xml");
    [...xmlDoc.documentElement.children].forEach(node => {
      let type = node.getAttribute('type');
      let name = node.getAttribute('name');
      document.forms.form01.innerHTML += `<label>${name}: <input type="${type}"
        name="${name}"></label>`;
    });
  });
});

<form name="form01"></form>

Example 2

Based on the XML document:

<?xml version="1.0" encoding="UTF-8"?>
<record>
<c_date>2022-11-21 07:22:10</c_date>
<ev1_sup>1.22</ev1_sup>
</record>

The next example is looping the child elements of the XML document. For each element it selects the form element with the same name and inserts the textContent.

var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHJlY29yZD4KPGNfZGF0ZT4yMDIyLTExLTIxIDA3OjIyOjEwPC9jX2RhdGU+CjxldjFfc3VwPjEuMjI8L2V2MV9zdXA+CjwvcmVjb3JkPg==';

document.addEventListener('DOMContentLoaded', e => {
  fetch(xml_data_URL).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, "application/xml");
    
    [...xmlDoc.documentElement.children].forEach(node => {
      document.forms.display[node.nodeName].value = node.textContent;
    });
  });
});

<form action="" name="display" method="post">
  <input type="text" class="o" size="26" readonly name="c_date">
  <input type="text" class="o" size="26" readonly name="ev1_sup">
</form>