画像を複数読み込んで順次変更させるプログラム

読み込んだ画像名の表示
表示した画像の切り替え

console.log('### in main ###');
let imgObj=document.getElementById('fig_img');
let capObj=document.getElementById('fig_cap');
let bttnObj=document.getElementById('change')
let resetObj=document.getElementById('reset')

let originWidthNum = imgObj.naturalWidth ;
let originHeightNum = imgObj.naturalHeight;
 console.log(" HTML originWidthNum : ", originWidthNum);
 console.log(" HTML originHeightNum : ", originHeightNum);
let openFileObj=document.getElementById('select_image');
let FileNum;
let imageArrayImg; 
let figcapArrayStr;
let srcNameArrayStr;
let capNameArrayStr;
let clkNum, modNum;

FileNum = 0;
clkNum = 0;

function getImageFileObj(){
 console.log('### in func getImageFileObj ###');
 FileNum = openFileObj.files.length;
   console.log(' openFileeObj :', openFileObj);
   console.log(' openFileObj.files :', openFileObj.files); 
   console.log(' FileNum :', FileNum);//ここでエラー多発
   console.log(' ## Selected File name ##');
 for(let i=0; i<FileNum; i++){
	console.log('openFileObj.files[',i,'].name:',openFileObj.files[i].name);
 }
 console.log(' #########################');

 srcNameArrayStr = new Array(FileNum);
 capNameArrayStr = new Array(FileNum);

 let slectedNameStr = ' 選択されたファイルは、' ;
 for(let i=0; i<FileNum; i++){
  srcNameArrayStr[i] = openFileObj.files[i].name;
    console.log(' typeof(srcNameArrayStr[',i,']) = ', typeof(srcNameArrayStr[i]) );
    console.log(' srcNameArrayStr[',i,'] = ', srcNameArrayStr[i] );
 let index_ofNum = openFileObj.files[i].name.indexOf(16) ;
   console.log(' index_ofNum(ドット) : ', index_ofNum );
 capNameArrayStr[i] = openFileObj.files[i].name.slice(0,16); 
   console.log(' openFileObj.files[',i, '].name : ', openFileObj.files[i].name);
   console.log(' capNameArrayStr[',i,'](slicedFileName) : ', capNameArrayStr[i]);
   slectedNameStr += srcNameArrayStr[i]+ ' , ' ;
  }
 slectedNameStr= slectedNameStr.slice( 0,-2 ) + ' です.' ;


 let pObj= document.createElement('p');
 pObj.innerHTML= [FileNum];//エラー多発
  console.log(' pObj.innerHTML: ', pObj.innerHTML);

 let parentObj= document.getElementsByTagName('body'); 

 parentObj[0].insertBefore( pObj, openFileObj );
 console.log('### END func getImageFileObj ###');
}

function createTargetClone(){
 console.log('### in func createTargetClone ###');

 let readerImageObj = new Array(FileNum);
 imageArrayImg = new Array(FileNum); 
 figcapArrayStr = new Array(FileNum); 
}

 for(let i=0; i<FileNum; i++){
  figcapArrayStr[i] = document.createElement('figcaption');
  figcapArrayStr[i].innerHTML = document.createElement('figcaption');;
  imageArrayImg[i] = document.createElement('img');
  readerImageObj[i] = new FileReader() ;
  readerImageObj[i].onload=function(evt){
  readerImageObj[i].onload = function( evt ){
   imageArrayImg[i].onload = function(){
    try{
     if( imageArrayImg[i].naturalWidth !== imageArrayImg[i].naturalHeight ){
      throw new Error('正方形画像を選択して下さい !( ' + srcNameArrayStr[i] + ' )')
     
     }
    }
   catch(size_err){
     window.alert( size_err );
   }
   console.log(' read Width_loaded :', imageArrayImg[i].naturalWidth );
   console.log(' read Height_loaded :', imageArrayImg[i].naturalHeight);
  }
  imageArrayImg[i].src = evt.target.result;
  imageArrayImg[i].alt = ' Photo of ' + capNameArrayStr[i];
   console.log(' read Width_out : ', imageArrayImg[i].naturalWidth );
   console.log(' read Height_out : ', imageArrayImg[i].naturalHeight);
  }
  readerImageObj[i].readAsDataURL(openFileObj.files[i]);
 }
 console.log('### END func createTargetClone ###');
}
function figureDOM_change(){
 console.log('### in func figureDOM_change ###');

 try{
  if( FileNum === 0){
   throw new Error(' Fileが選択されていません !');

  }

 clkNum = clkNum +1;
 let modNum = clkNum % FileNum;
 let figureObj = document.getElementsByTagName('figure');
 console.log(' 元の要素一覧');
 console.log(' figureObj[0] : ', figureObj[0]);
 console.log(' 元の子【要素】数');
 console.log(' figureObj[0]. childElementCount 【 】 :', figureObj[0].childElementCount);
 console.log(' 元の第 子要素 1 ');
 console.log(' figureObj[0].children[0] : ', figureObj[0].children[0]);
 console.log(' 元の第 子要素の子 1 ');
 console.log(' figureObj[0].children[0].firstElementChild : ', figureObj[0].children[0].firstElementChild );
 console.log(' 元の第 子要素 2 ');
 console.log(' figureObj[0].children[1] : ', figureObj[0].children[1]);
 console.log(' 書き換え <img>');
 console.log(' imageArrayImg[',modNum,'] : ', imageArrayImg[modNum] );
let clone_figureObj = figureObj[0].cloneNode(true);
  console.log(' クローンの子【要素】数');
  console.log(' clone_figureObj. childElementCount 【 】 :', clone_figureObj.childElementCount);
  console.log(' クローン内の要素一覧');
  console.log(' clone_figureObj : ', clone_figureObj);
  console.log(' クローンの第1子【要素】');
  console.log(' clone_figureObj.children[0] : ', clone_figureObj.children[0]);
  console.log(' クローンの第1子【要素】の子要素');
  console.log(' clone_figureObj.children[0].firstElementChild : ', clone_figureObj.children[0].firstElementChild);
 clone_figureObj.children[0].firstElementChild.replaceWith( imageArrayImg[modNum] );
 clone_figureObj.children[1].replaceWith( figcapArrayStr[modNum] );

  figureObj[0].replaceWith( clone_figureObj );
  console.log("clkNum= %d, modnum=%d", clkNum, modNum);
 }
 catch(no_file_error){
  window.alert( no_file_error );
 }
  console.log('### END func figureDOM_change ###');
} 
function reset(){
 console.log('### in func reset ###');
 let confirmBool= window.confirm('リセットしますか ?');

   console.log(' confirmBool : ', confirmBool);

  if( confirmBool ){

   window.location.reload(confirmBool);
 }
 else{ 
   window.alert('続けます ');
  } 
 console.log('### END func reset ###');
} 

openFileObj.addEventListener('change', function(){

                                            getImageFileObj();
                                            createTargetClone();
                                        } , 
                          false);

bttnObj.addEventListener('click', function(){

                                          figureDOM_change();
                                       },
                          false );

resetObj.addEventListener('click', function(){
                                        reset();
                                      },
                          false );

update();

<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset ="utf-8">
<title>課題</title>
</head>
<body>
<h1>課題</h1>
<h2>氏名 </h2>
<figure>
<div>
<img id ="fig_img" width ="256" height ="256" src="./img/Parrots.jpg">
</div>
<figcaption id ="fig_cap">画像名</figcaption>
</figure>
<input id="select_image" type ="file" accept =".jpg, .png, .bmp" multiple>
<br><br>
<button id="change">変更</button> <button id ="reset">リセット</button>
<script type ="module" charset ="utf-8" async src="./js/jsファイル名.js ">
</script>
</body>
</html>