Events in HTML string

by sachid

HTML

<div id="result">

</div>

JavaScript

var optionList = [{
  name: "XML",
  id: "xmlVAL",
  extension: ".xml"
}, {
  name: "JSON",
  id: "jsonVAL",
  extension: ".json"
}, {
  name: "CSV",
  id: "csvVAL",
  extension: ".csv"
}];
var typeOptions = (function(arr) {
  var str = "";
  arr.map(function(type) {
    var op = "<option value=" + type.id + " data-ext=" + type.extension + " >" + type.name + "</option>";
    str += op;
  });
  return str;
})(optionList);

var getType = ".xml";

function getTypeFunc() {
  return getType;
}

var message = ' Type: <select id="load-file-type">' + typeOptions + ' </select> <br>  File: <input id="load-file" type="file" style="display:inline" accept=' + getTypeFunc() + ' >'

document.getElementById("result").innerHTML = message;

document.getElementById("result").addEventListener("change", function(event) {
  var target = event.target;
  if (target.tagName.toLowerCase() !== "select") {
    return;
  };
  console.log(target.options[target.selectedIndex].dataset.ext);
  getType=target.options[target.selectedIndex].dataset.ext;
});