enter image description hereHi i am trying to run a java script in nocode plateform. what i am actually trying to do is i am getting 2 dynamic values from dropdown and adding div according to those values respectively. one dropdown defines length and other one defines width. and i am trying to draw a grid by those values. i am able to add rows but can not add columns in 1st row.
`
<script>
window.onload = function () {
var MainDiv = document.getElementById("Main");
var virtualDiv= document.createElement('div');
virtualDiv.id='Vdiv';
var Rows = document.getElementById("rows");
var Columns = document.getElementById("columns");
var length;
var width;
var arrayDivRow = new Array();
var arrayDivCol = new Array();
if(Rows){
Rows.addEventListener('change', function handleChange(event) {
length = parseInt(event.target.value);
console.log(length);
for(var i=0;i<length;i++){
arrayDivRow[i] = document.createElement('div');
arrayDivRow[i].id='row'+i;
arrayDivRow[i].style.backgroundColor = 'yellow';
arrayDivRow[i].style.height = "100px";
arrayDivRow[i].style.margin = "5px";
if(Columns){
Columns.addEventListener('change', function handleChange(event) {
width = parseInt(event.target.value);
console.log(width);
for(var j=0;j<width;j++){
arrayDivCol[j] = document.createElement('div');
arrayDivCol[j].id='col'+j;
arrayDivCol[j].style.backgroundColor = 'green';
arrayDivCol[j].style.height = "100px";
arrayDivCol[j].style.margin = "5px";
arrayDivRow[i].appendchild(arrayDivCol[j]);
}
});
}
virtualDiv.appendChild(arrayDivRow[i]);
}
});
}
MainDiv.appendChild(virtualDiv);
};
</script>
` here i am getting error
Uncaught TypeError: Cannot read properties of undefined (reading 'appendchild')
at HTMLSelectElement.handleChange (<anonymous>:37:26)
in console of a browser
please help me solve this
