title: function that reads JSON to send to other function to make an input type
body: <p>I have a function that reads JSON but I want to send it to my other function to make an input type but I don't know how.</p>
  <pre class="lang-js prettyprint-override"><code>var oXHR = new XMLHttpRequest();
  oXHR.onreadystatechange = reportStatus;
  oXHR.open(&quot;GET&quot;, &quot;file:///:\Users\khaldoun10\Desktop\NewHTMLPROJECT\html dynamic project\json.txt&quot;, true);
  oXHR.send();
  
  function reportStatus() {
    if (oXHR.readyState == 4) {
      document.getElementById('showData').innerHTML = this.responseText;
    }
  }
  
  objs.forEach(function(objs) {
    for (var k in objs) {
      if (objs[k] instanceof Object) {
        const formItem = objs[k];
        var elmn = document.createElement(objs[k].type);
        elmn.textContent = formItem.Text;
  
        Object.assign(elmn.style, {
          position: 'absolute',
          color: formItem.color,
          width: formItem.width,
          height: formItem.height,
          top: formItem.top,
          left: formItem.left,
          fontFamily: formItem.Font.fontName,
          fontSize: formItem.Font.font,
        });
  
        document.getElementById('ColorArea').appendChild(elmn);
      } else {
        console.log('Else');
      };
    }
  });
  </code></pre>
  <p>json object:</p>
  <pre><code>var objs = [{
    &quot;Object1&quot;: {
      &quot;ID&quot;: 1,
      &quot;type&quot;: &quot;input&quot;,
      &quot;color&quot;: &quot;red&quot;,
      &quot;Text&quot;: &quot;DARKDRAGON&quot;,
      &quot;width&quot;: &quot;150px&quot;,
      &quot;height&quot;: &quot;40px&quot;,
      &quot;top&quot;: &quot;15px&quot;,
      &quot;left&quot;: &quot;5px&quot;,
      &quot;Font&quot;: {
        &quot;fontName&quot;: &quot;tahoma&quot;,
        &quot;font&quot;: &quot;17px&quot;
      }
    },
    &quot;Object2&quot;: {
      &quot;ID&quot;: 2,
      &quot;type&quot;: &quot;textarea&quot;,
      &quot;color&quot;: &quot;cyan&quot;,
      &quot;Text&quot;: &quot;SPEEDYTIGER&quot;,
      &quot;width&quot;: &quot;150px&quot;,
      &quot;height&quot;: &quot;40px&quot;,
      &quot;top&quot;: &quot;70px&quot;,
      &quot;left&quot;: &quot;5px&quot;,
      &quot;Font&quot;: {
        &quot;fontName&quot;: &quot;tahoma&quot;,
        &quot;font&quot;: &quot;17px&quot;
      }
    },
    &quot;Object3&quot;: {
      &quot;ID&quot;: 3,
      &quot;type&quot;: &quot;input&quot;,
      &quot;color&quot;: &quot;blue&quot;,
      &quot;Text&quot;: &quot;AMyesteriousAdults&quot;,
      &quot;width&quot;: &quot;200px&quot;,
      &quot;height&quot;: &quot;40px&quot;,
      &quot;top&quot;: &quot;130px&quot;,
      &quot;left&quot;: &quot;5px&quot;,
      &quot;Font&quot;: {
        &quot;fontName&quot;: &quot;tahoma&quot;,
        &quot;font&quot;: &quot;17px&quot;
      }
    },
    &quot;Object4&quot;: {
      &quot;ID&quot;: 4,
      &quot;type&quot;: &quot;button&quot;,
      &quot;color&quot;: &quot;darkorange&quot;,
      &quot;Text&quot;: &quot;AMyesteriousDarkSpeed&quot;,
      &quot;width&quot;: &quot;200px&quot;,
      &quot;height&quot;: &quot;40px&quot;,
      &quot;top&quot;: &quot;190px&quot;,
      &quot;left&quot;: &quot;5px&quot;,
      &quot;Font&quot;: {
        &quot;fontName&quot;: &quot;tahoma&quot;,
        &quot;font&quot;: &quot;17px&quot;
      }
    }
  }]
  </code></pre>