Is there a browser-specific code validator?

Question

I've compiled a JS function using snippets from other chunks of code and some reverse engineering. It works exactly as I want it to in Firefox, but does absolutely nothing in Chrome. I've linted it and validated it, and it's come back fine, say for some formatting.

Is there a tool that allows selective validation by emulating browsers?

The culprit - dropdown iframe changer: http://injurypreventioncentre.ca/stories

The js:

var xmlhttp;

function loadXMLDoc(url, cfunc) {
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = cfunc;
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

function story() {
  "use strict";
  loadXMLDoc("shareyourstory/story.txt", function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
  });
}

function January() {
  "use strict";
  loadXMLDoc("shareyourstory/january.txt", function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
  });
}

Each month is a function.

And the HTML calling it:

<select>
  <option value="Please select month" onclick="story()" selected>Please select month</option>
  <option value="January" onclick="January()">January</option>
</select>

Stackoverflow is for coding questions. Your so called question has no code. So don't be surprised when you get down voted and closed — JK., Feb 09 '15 at 22:00
The `onclick` events on `option` tags don't tend to work in all browsers. You need to instead bind a click handler to the surrounding `select` element. See [this question](http://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome). — James Thorpe, Feb 09 '15 at 22:28
BTW, I've retracted my close vote and downvote - now you've included the code, it's perfectly clear what the problem is :) — James Thorpe, Feb 09 '15 at 22:29

score 0 · Accepted Answer · answered Feb 26 '15 at 19:25

After much tinkering, I have working code.

var loadedobjects = ""
var rootdomain = "http://" + window.location.hostname

function dynamicText(url, containerid) {
  var page_request = false
  if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
  else if (window.ActiveXObject) { // if IE
    try {
      page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } catch (e) {
      try {
        page_request = new ActiveXObject("Microsoft.XMLHTTP")
      } catch (e) {}
    }
  } else
    return false
  page_request.onreadystatechange = function() {
    loadpage(page_request, containerid)
  }
  page_request.open('GET', url, true)
  page_request.send(null)
}

function loadpage(page_request, containerid) {
  if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1))
    document.getElementById(containerid).innerHTML = page_request.responseText
}

function loadobjs() {
  if (!document.getElementById)
    return
  for (i = 0; i < arguments.length; i++) {
    var file = arguments[i]
    var fileref = ""
    if (loadedobjects.indexOf(file) == -1) {
      if (file.indexOf(".js") != -1) {
        fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", file);
      }

    }
    if (fileref != "") {
      document.getElementsByTagName("head").item(0).appendChild(fileref)
      loadedobjects += file + " "
    }
  }
}


function doChange(selectobjID, loadarea) {
  var selectobj = document.getElementById ? document.getElementById(selectobjID) : ""
  if (selectobj != "" && selectobj.options[selectobj.selectedIndex].value != "")
    dynamicText(selectobj.options[selectobj.selectedIndex].value, loadarea)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>

  <select id="DynOptions" size="1" onChange="doChange('DynOptions', 'DynDiv')">
    <option value="">Please select month</option>
    <option value="directory/option1.txt">Option 1</option>
    <option value="option2.txt">Option 2</option>
  </select>

</form>

<div id="DynDiv">Landing page text changes.</div>

Is there a browser-specific code validator?

1 Answers1