hi guys,

i'm trying to write an character converter using php and ajax. i'm getting a really anoing error(uncaught TypeError).

can someone help me with this.?:?: , i've added screenshot of the error. and this is the xml i'm trying to read generated with php

<?php

$key = $_GET['key'];

header('Content-type:text/ xml').PHP_EOL;

$xml_output  = "<?xml version=\"1.0\"encoding=\"UTF-8\"?>".PHP_EOL;
$xml_output .= "<Root>".PHP_EOL;
$xml_output .= "\r\t<converted-values>".PHP_EOL;
$xml_output .= "\r\t\t<decimal>".ord($key)."</decimal>".PHP_EOL;
$xml_output .= "\r\t\t<hexadecimal>0x".dechex(ord($key))."</hexadecimal>".PHP_EOL;
$xml_output .= "\r\t\t<octal>0".decoct(ord($key))."</octal>".PHP_EOL;
$xml_output .= "\r\t\t<hyper>&amp;0x".dechex(ord($key)).";</hyper>".PHP_EOL;
$xml_output .= "\r\t\t<binary>".decbin(ord($key))."B</binary>".PHP_EOL;

$xml_output .= "\r\t</converted-values>".PHP_EOL;
$xml_output .="</Root>".PHP_EOL;

echo $xml_output;
?>

thanx in advance

Dani AI

Generated

Good start, — the uncaught TypeError happens because one or more DOM lookups end up undefined and the code immediately dereferences them. correctly pointed at the symptom; the underlying causes are usually malformed XML coming back from the server (or extra bytes/text before the XML prolog) or the browser failing to parse the response as XML.

Server-side checklist to fix the XML output:

  • Make the XML prolog exact: <?xml version="1.0" encoding="UTF-8"?> (note the space).
  • Send a correct header: header('Content-Type: text/xml; charset=UTF-8');.
  • Ensure the PHP file is saved without a UTF-8 BOM and there is no whitespace, HTML, or PHP warnings printed before the prolog (those bytes will break XML parsing).
  • Verify the raw output by opening the convert.php URL (view source) or using curl — if you see HTML or error messages, fix those first.

Client-side safeguards and debugging tips:

  • Prefer req.responseXML when available and fall back to DOMParser on req.responseText.
  • Check for parser errors and always guard lookups before reading text. Use encodeURIComponent when building the request URL instead of escape. Example safe extractor:
var dom = req.responseXML || new DOMParser().parseFromString(req.responseText,'application/xml');

if (dom.getElementsByTagName('parsererror').length) {
  console.error('XML parse error', req.responseText);
  return;
}

function textFor(tag) {
  var el = dom.getElementsByTagName(tag)[0];
  return el && (el.textContent || (el.firstChild && el.firstChild.nodeValue)) || '';
}

decimal.value = textFor('decimal');

Quick checklist: correct prolog/header, remove BOM/extra output, inspect raw response, use encodeURIComponent, prefer responseXML+fallback, and guard element access. These steps reveal whether invalid XML (the usual culprit) is causing the TypeError.

Recommended Answers

All 4 Replies

Please post your JS code.

thanx for answering here is my js code

var req; 

  
  function convertToXML()
  { 
    var key = document.getElementById("key"); 
    var keypressed = document.getElementById("keypressed"); 
    keypressed.value = key.value; 
     
    var url = "http://127.0.0.1/PHP/convert.php?key="+escape(key.value);
    if (window.XMLHttpRequest){ 
      req = new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject){ 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    req.open("Get",url,true); 
    req.onreadystatechange = callback; 
    req.send(null);
  } 

  function nonMSPopulate()
  {
    var resp = req.responseText;
    var parser = new DOMParser();
    var dom = parser.parseFromString(resp,"text/xml");
                     
    decVal = dom.getElementsByTagName("decimal");
    var decimal = document.getElementById('decimal');
    decimal.value=decVal[0].childNodes[0].nodeValue;
   
    hexVal = dom.getElementsByTagName("hexadecimal");
    var hexadecimal = document.getElementById('hexadecimal');    
    hexadecimal.value=hexVal[0].childNodes[0].nodeValue;
     
    octVal = dom.getElementsByTagName("octal");
    var octal = document.getElementById('octal');    
    octal.value=octVal[0].childNodes[0].nodeValue;
           
    hyperVal = dom.getElementsByTagName("hyper");
    var hyper = document.getElementById('hyper');    
    hyper.value=hyperVal[0].childNodes[0].nodeValue;
        
    binaryVal = dom.getElementsByTagName("binary");
    var bin = document.getElementById('bin');    
    bin.value=binaryVal[0].childNodes[0].nodeValue;
  }

  function msPopulate()
  {
    var resp = req.responseText;
    var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.loadXML(resp);
                  
    dec = xmlDoc.getElementsByTagName('decimal');
    var decimal = document.getElementById('decimal');
    decimal.value = dec[0].firstChild.data;
    
    hexi = xmlDoc.getElementsByTagName('hexadecimal');
    var hexadecimal = document.getElementById('hexadecimal');
    hexadecimal.value=hexi[0].firstChild.data;
                  
    oct = xmlDoc.getElementsByTagName('octal');
    var octal = document.getElementById('octal');
    octal.value=oct[0].firstChild.data;
                  
    bin = xmlDoc.getElementsByTagName('binary');
    var binary = document.getElementById('bin');
    binary.value=bin[0].firstChild.data;    
        
    hypertextml = xmlDoc.getElementsByTagName('hyper');
    var hyper = document.getElementById('hyper');
    hyper.value=hypertextml[0].firstChild.data;     
  }
  
  function callback()
  { 
    if (req.readyState==4){ 
      if (req.status == 200){ 
     
        if (window.XMLHttpRequest){
            nonMSPopulate(); 
              } 
            else if (window.ActiveXObject){ 
                msPopulate();
            }
        } 
      }
      clear();
  }  

  function clear()
  { 
    var key = document.getElementById("key"); 
    key.value=""; 
  }
  
  function focusIn()
  { 
    document.getElementById("key").focus();
  }

The error said that your object does not have childNodes to be called. In your code line 30, 34, 38, 42, and 46, they all try to call this childNodes. You didn't check for existent of the children, so it throws an error when there is no child node at all. Try to see how it returns from your parsing using alert() function?

// the first portion of what may be the problem
decVal = dom.getElementsByTagName("decimal");
var decimal = document.getElementById('decimal');
decimal.value=decVal[0].childNodes[0].nodeValue;

thanx taiwin

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.