Are we doing this right?

Hey guys,

My friend and i created an HTML page and we embedded an iframe within. We created some fields which will take in an image and texts as values using the upload image and input fields respectively. we are trying to get values of multiple input fields. We declared an array which takes it all in and we want to get those values from the innerHTML and send them to the parent HTML. We used the onmesaage() and postmessage() functions, we are not sure whether we're correct in what we wrote codewise so we would like a hand. We are new to those two methods:

<script>
      // THE ARRAY SHOULD BE OUTSIDE THE FUNCTION SO IT DOESN'T GET RE-INITIATED. THE ARRAY KEEPS TRACK OF THE FIELDS AND WE CAN GET THEIR VALUES WHEN THE USER IS DONE
      window.addEventListener("message", handleMessage, false);

      function handleMessage(event) {
        if(event.origin !== "http://www.icy-tech.com"){
          return;

          event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!", event.origin);
        }
      }
      window.onmessage = (event) => {
        if(event.data) {
            let receivedData = event.data;
            displayz.innerHTML = receivedData;
            displayclass.innerHTML = receivedData;
            document.getElementById("schLogo").innerHTML = receivedData;
        }
      };
      // creating a function to receive data from the innerHTML

      function button_clicked() {
          window.parent.postMessage(JSON.stringify(displayz.arr), "/");
          window.parent.postMessage(JSON.stringify(displayclass.classarr), "/");
          window.parent.postMessage(document.getElementById("schLogo").src, "/");
          sessionChanged();
          classChanged();
      }

     var arr = [];
      var displayz = document.getElementById("showTermsFields");
      //declaring variable for class
      function sessionChanged() {
        //REMOVE THE INITIAL FIELDS IN THE HTML
        for (i = 0; i < arr.length; i++) {
          let id = arr[i];
          document.getElementById(id).remove();
        }

        //SET THE ARRAY INTO AN EMPTY ARRAY
        arr = [];

        //FOR THE NUMBER OF TERMS ADD NEW FIELDS
        var terms = document.getElementById("terms_session").options
          .selectedIndex;
        for (i = 0; i < terms; i++) {
          //CREATE THE ELEMENT
          var input = document.createElement("INPUT");
          //SET THE ID ATTRIBUTE OF THE ELEMENT
          let id = i.toString() + "term";
          input.setAttribute("id", id);
          input.placeholder = "Enter Term";

          //input.style.margin="0.2em";
          input.style.backgroundColor = "#e6e6e6";
          input.style.width = "50%";
          input.style.borderRadius = "0.6em";
          input.style.borderWidth = ".06em";
          input.style.display = "block";
          input.style.padding = "0.4em";
          input.style.margin = "0.6em";
          input.style.marginLeft = "auto";
          input.style.marginRight = "auto";
          input.style.textAlign = "center";
          input.style.width = "28em";
          //ADD THE FIELD TO THE BODY
          displayz.appendChild(input);
          // ADD THE ID TO THE ARRAY
          arr.push(id);
          input.onchange = function () {
            termfunction(id);
          };
          console.log(arr);
        }
      }
      function termfunction(id) {
        let d = document.getElementById(id.toString());
        var termdata = d.value;
        console.log(termdata);
      }

      // var dataarr = [];
      var classarr = [];
      var displayclass = document.getElementById("showClassesFields");
      function classChanged() {
        for (n = 0; n < classarr.length; n++) {
          let id = classarr[n];
          document.getElementById(id).remove();
        }
        //SET THE ARRAY INTO AN EMPTY ARRAY
        classarr = [];

        //FOR THE NUMBER OF TERMS ADD NEW FIELDS
        var term = document.getElementById("number_class").options
          .selectedIndex;
        for (n = 0; n < term; n++) {
          //CREATE THE ELEMENT
          var input = document.createElement("INPUT");
          //SET THE ID ATTRIBUTE OF THE ELEMENT
          //  datad = id
          let id = n.toString() + "class";
          input.setAttribute("id", id);
          input.placeholder = "Enter Class";

          input.style.backgroundColor = "#d9d9d9";
          input.style.borderRadius = "0.6em";
          input.style.borderWidth = ".06em";
          //input.style.borderLeft = 'none';
          input.style.outline = "none";
          input.style.margin = "0.6em";
          input.style.display = "block";
          input.style.padding = "0.3em";
          input.style.marginLeft = "auto";
          input.style.marginRight = "auto";
          // input.style.= 'center';
          input.style.textAlign = "center";
          input.style.width = "50%";
          //ADD THE FIELD TO THE BODY
          displayclass.appendChild(input);
          // ADD THE ID TO THE ARRAY
          classarr.push(id);
          input.onchange = function () {
            classfunction(id);
          };
          //classarr.forEach(classfunction);
        }
        for (n = 0; n < classarr.length; n++) {
          let id = classarr[n];
          //        document.getElementById(n).remove()
          console.log(n);
          //console.log(n)
        }
      }

      var addClassSub = document.getElementById("classSub");
      function classfunction(id) {
        let d = document.getElementById(id.toString());
        var classdata = d.value;
        classarr.push(classdata);
        console.log(classarr);
      }
      var n = -1;
      var len = classarr.length;
      //console.log = len;
      //document.getElementById('classSub').innerHTML = classarr[0] + ':';
      function show() {
        n += 1;
        var f = classarr[n];
        if (f !== undefined) {
          console.log(f);
          document.getElementById("classSub").innerHTML = "for " + f + " :";
        } else {
          document.getElementById("notification").innerHTML =
            "cant perform this operation";
        }
      }
      function add() {
        var input = document.createElement("input");
        var pAdd = document.getElementById("input");
        pAdd.appendChild(input);
        input.style.placeholder = "Enter Subject";
        input.style.backgroundColor = "#d9d9d9";
        input.style.borderRadius = "0.6em";
        input.style.borderWidth = ".06em";
        //input.style.borderLeft = 'none';
        input.style.outline = "none";
        input.style.margin = "0.6em";
        input.style.display = "block";
        input.style.padding = "0.3em";
        input.style.marginLeft = "auto";
        input.style.marginRight = "auto";
        input.style.textAlign = "center";
        input.style.width = "50%";
      }
    </script>

We are particularly afraid we are not getting it right with the onmessage() and postmessage() functions. A little help if our fears are true.

No Comments Yet