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 REINITIATED. 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.
Just having a scan and I think this block and another similar one further down in your code, could be addressed. You could set this as a class definition in CSS instead