HTML CSS JavaScript レイアウト編「参考」続編中

https://twitter.com/Tattyan_03/status/1779686278415667671

studio.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="imge/name.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="たっちゃん,studio。">
<title>studio</title>
<link rel="stylesheet" href="studio.css" type="text/css">
<!-- styleダイレクト指定の2つした -->
<style>
    body {background-image: url(imge/bgsc_1.png);}
	/* styleダイレクト指定の一つした*/
</style>
<script>
	if( screen.width/2 - 20 > window.innerWidth || screen.height/2 - 20 > window.innerHeight){
		alert("ページが小さ過ぎます。");
	}
	let my_img_whit = false;
</script>
<script src="studio.js" defer></script>
<!-- styleダイレクト指定の一つ上 -->
</head>
<body onload="mystrto();">
                            <!-- stato studio -->
    <div id="flex1">
        <div class="content1">

            <div id="box01">
                <table><tr><td id="my1td1"><div id="my1d1"></div></td><td></td></tr><tr><td></td><td><div id="my1_1"><img src="imge/my_img.jpg" width="640" alt="イメージがありません"></div></td><tr></table>
	        </div>
            <div id="box02">
                <table><tr><td id="my2td1"></td><td></td></tr>
 <tr><td></td><td><span id="my2_1"><img src="imge/gall.png" width="128" height="128"></span></td></tr></table>
            </div>
            <div id="box02_2">
                <table><tr><td id="my2_2td1"></td><td></td></tr>
 <tr><td></td><td><span id="my2_2"></span></td></tr></table>
            </div><!-- test is it.-->
            <div id="box03">
                 <table><tr><td id="my3td1"></td><td></td></tr>
 <tr><td></td><td><div id="my3_1"><img src="imge/man1.png" width="128" height="128"></div></td></tr></table>
            </div>
            <div id="box04">
                <table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_1">　<mark><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></mark>　</div>
<!-- font-size:20px;  text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;  -->
</td></tr></table>
            </div>
           <div id="box04_01">
                <table><tr><td id="my4_1td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_2"></div></td></tr></table>
            </div>			
			<div id="box05">
				<table border="1" class="teb_b_c"><tr><td id="my5td1"><div id="my5d1"></div></td><td id="my5td2"><div id="my5d2"></div></td><td id="my5td3"><div id="my5d3">16:9</div></td></tr>
<tr><td id="my5td4"></td><td id="my5td5"><div id="my5_1"></div></td><td id="my5td6"><div id="my5d6">0000</div></td></tr>
<tr><td id="my5td7"></td><td id="my5td8"><div id="my5_1"></div></td><td id="my5td9"></td></tr></table>
			</div>			
        </div>
        <div class="content2">
            <form>
				コントロール<br>
                <input type="button" value=" Relode " onClick="Relode();">
                <input type="button" value=" Stato " onClick="Stato1();">

                <input type="button" value=" Re_Stato " onClick="Re_Stato();">
            </form>
			<hr>
            <form name="my_form_0">
				タイプ<br>
                <input type="radio" checked="1" onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>
				比率<br>
				 <input type="radio" checked="1" onchange="radio_glope2(1);">16:9 
				<input type="radio" onchange="radio_glope2(2);">9:16 
				<input type="radio" onchange="radio_glope2(3);">1:1<br>
				サイズ <span id="dis_size_wh">640 * 360</span><br>
				 <input type="radio" onchange="radio_glope3(1);">1280 720(x)x<br>
				 <input type="radio" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
				 <input type="radio" onchange="radio_glope3(3);">720 405(405 720)<br>
				 <input type="radio" checked="1" onchange="radio_glope3(4);">640 360(360 640)<br>
				 <input type="radio" onchange="radio_glope3(5);">320 180(180 320) 
				<input type="radio" onchange="radio_glope3(6);">free<br> 
				 width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
				 height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
				<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>				
				再生<br>
                　<input type="checkbox" checked="1" onchange="chec_g4_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g4_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g4_3(checked);">予備
            </form>
			<label class="my_1">
				<span class="my_1">Stop_pop_upを表示</span>
				<input type="checkbox" name="checkbox1" class="my_1" onclick="chk1();">
				<div id="popup">
				  <div id="my_i_01"><img src="imge/cyat.png" width="200px" height="200px" alt="ねこ"></div>
				  <font size="2"><input type="checkbox" name="checkbox2" id="my_11" onclick="chk2();">上
				  <input type="checkbox"  name="checkbox3" id="my_111">自在
				  <input type="checkbox"  name="checkbox4" id="my_1v" checked>自由/固定
				  <input type="checkbox"  name="checkbox5" id="my_v">右側<br></font>
				  	<form name="my_form_1">
					<span style="color: #fff;">
						<select name="ray_sel" id="ray_selct">
							<option value="box01">box01</option>
							<option value="box02">box02</option>
							<option value="box02_2" selected>box02_2</option>
							<option value="box03">box03</option>
						</select>
						<input type="text" name="w0_w" id="w0" size="2" value="100">*
						<input type="text" name="h0_h" id="h0" size="2" value="100"><br>
						<input type="text" name="w1_w" id="w1" size="2" value="200">*
						<input type="text" name="h1_h" id="h1" size="2" value="200">
						<input type="button" value="送信" onclick="chk_3();">
					</span>
					</form>
					<hr>
					<form name="my_form_2">
						<input type="file" id="selfile1" accept="imge/.png, imge/.jpg, imge/.gif" onchange="chk_4(value);" /><br>
						<div id="errmessage2">ここ</div>
					</form>
										<input type="button" value="画像表示" onclick="chk_5();">


				  <span style="color: #fff;">二行目</span><br>長いのを書いていくとどうなるのか。
				  <span id="my_i_02">kore</span>
				</div>
			  </label>
			<hr>
	 
		<!--<div id='audio0'>0<br><audio src="voise/myout2_0.wav" type="audio/wev" controls autoplay></audio></div>-->
			<div id='audio1'>1<br><audio src="voise/" controls stop-play muted></audio></div>
			<div id='audio2'>2<br><audio src="voise/" controls muted></audio></div>
			<div id='audio3'>3<br><audio src="voise/" controls muted></audio></div>
		</div>
	</div>  
	<div id="flex2">
		<div class="content3">
			<div id="test_my0">test0</div>
			<hr>
			<b>form</b><br>
			<form name="myfile">
				<input type="file" id="selfile" accept="text/.txt" />
				<div id="errmessage"></div>
				<textarea name="texta" id="mytextr"></textarea>
			</form>
	<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
			<hr>
			<span id="my_in_a_text" onclick="it_test2('test');">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
			<input type="button" value="テキストリード" onclick="read();"><br>
			<p id="mfl">text</p>
			<p id="my6_1"><font size="6" color="#f0f">あ</font><font size="1">っ</font><font size="3">かわった</font></p>
		</div>
		<div class="content4">
			<table border="1"><tr><td width="256"><div id="video1">video_in1</div></td>
			<td width="256"><div id="video2">video_in2</div></td>
			<td width="256"><div id="video3">video_in3</div></td></tr>
			<tr><td><div id="img_viw1"> </div></td>
			<td><div id="img_viw2"> </div></td>
			<td><div id="img_viw3"> </div></td></tr>
			</table><br>
			高速読込エリア<br>
		</div>
  
	</div>
	<div id="flex_end">
		<div class="content_end">
    <!-- end -->
			<hr>
			<div style="text-align: center;">
				<p>tattyan(<a href="https://tattyan0-0.sakura.ne.jp/" name="administrator" target="~_blank">たっちゃん</a>) by 2023/11/14- </p>
			</div>
		</div>
	</div>
</body>
<!--<script src="studio2.js" defer></script>-->
</html>

```
studio.css
```css
@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */


/* test */

body { 
    margin: 0px;
    background:#ffbbff;
}




#flex1 {
    display: flex;
}
#flex2 {		
    display: flex;
}
#flex_end {		
    display: flex;
}

.content1 {
    float: left;
    background-color: #dcffb8;
    border: 5px solid #5abbe4;
    padding: 0px;
    width: 1400px;/* *1280+32+64 *720+32*10 */
    height: 840px;
    justify-content: flex-start;
}
.content2 {
	
    float: left;
    border: 5px solid #a1d9f1;
    padding: 0px;
    width: 320px;
    height: 840px;
    justify-content: flex-end;
}

.content3 {
    float: left;
    padding: 32px;
	justify-content: flex-start;
}
.content4 {
    float: left;
    padding: 32px;
	justify-content: flex-end;
}



.content_end {
    float: left;
    padding: 32px;
	width: 100%;
	justify-content: flex-end;
}

/* まーかー　の例 */
.mark1 {
  background-color: #80ff80;
  color: #ffffff;
  padding: 14px;
}
.mark2 {
  background: linear-gradient(transparent 40%, #FFF100 0%);	
}	


#test_my0 {
	color: red;
}

#box01 { 
  background-color: #8080ff; 
  position: fixed; 
  top: 0;/* タグによる位置の既定の位置に配置無視 */
  left: 0;/* 無視 */
  /*width: 64px; 
  height: 64px;*/ 
} 
/* 変わらない */
#my1td1 {
	width: 32px;
	height: 32px;
}
#my1td3 {
    width: 32px;
}

#box02 { 
  /*background-color: #ff6a00;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
  left: 0;/* 既定の位置 */
  /*width: 64px; 
  height: 64px;*/ 
} 

#my2td1 {
	width: 60px;
	height: 280px;
}

#box02_2 { 
  position: fixed;
  top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
  left: 0;/* 既定の位置 */
} 
#my2_2td1 {
	width: 1px;
	height: 1px;
}

#box03 { 
 /* background-color: #ffd800; */
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 スクロール*/
  left: 0;/* スクロール */
  /*width: 64px; 
  height: 64px; */
} 

#my3td1 {
	width: 550px;
	height: 280px;
}

/* <font class="f1">あ</font><font class="f2">い</font><font class="f1">う</font><font class="f2">え</font>お<br>font にクラスが使える。<br> */*/
.f1 {
    color: violet;
    font-size: 20px;
}

.f2 {
    color: forestgreen;
    font-size: 25px;
}















#box04 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
 /* width: 58px; 
  height: 58px; */
} 
 #my4td1 {
	width: 200px;
	height: 350px;
}

#my4_1 {
	 background-color:rgba(127,127,255,0.5);
	/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
	 text-shadow:
           2px 2px 0px #fff, -2px -2px 0px #fff,
          -2px 2px 0px #fff,  2px -2px 0px #fff,
           2px 0px 0px #fff, -2px  0px 0px #fff,
           0px 2px 0px #fff,  0px -2px 0px #fff;
	 
}

.teb_b_c {
	
	border-color: #333399;
}


#box04_01 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
 /* width: 58px; 
  height: 58px; */
} 
#my4_1td1 {
	width: 420px;
	height: 310px;
}
#my4_2 {
	 background-color:rgba(255,127,255,0.5);
	/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
	 text-shadow:
           2px 2px 0px #fff, -2px -2px 0px #fff,
          -2px 2px 0px #fff,  2px -2px 0px #fff,
           2px 0px 0px #fff, -2px  0px 0px #fff,
           0px 2px 0px #fff,  0px -2px 0px #fff;
	 
}






	
#box05 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
}
#my5td1 {
  background-color: #1995ee; 	
	width: 30px;
	height: 30px;
}
#my5td2 {
  background-color: #1995ee; 

}
#my5td3 {
  background-color: #1995ee; 	
	width: 64px;

}
#my5td4 {
  background-color: #1995ee; 

}
#my5td5 {
	width: 636px;
	height: 375px;
}
#my5td6 {
  background-color: #1995ee; 
}
#my5td7 {
  background-color: #1995ee; 
	height: 64px;
}
#my5td8 {
  background-color: #1995ee; 
}
#my5td9 {
  background-color: #1995ee; 
}


/*popup表示させたいコンテンツのレイアウトと位置*/
#popup {
  width: 250px;
 /* line-height: 100px;*/
  background: #000;
  padding: 10px 10px;
  vertical-align: text-top;
  box-sizing: border-box;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate (-50%, -50%);
  transform: translate (-50%, -50%);
}
/*
img#my_i_01 {
  width: 200px;
}
*/

label.my_1 {
  display:block;
  color: #01b6ed;
}

  /*ボタンの装飾*/
label.my_1 span.my_1 {
  display: block;
  background-color: #01b6ed;
  color: #fff;
  width: 200px;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;

}
label.my_1 span.my_1:hover {
  cursor: pointer;
}
input.my_1[type="checkbox"] {
  display:none;
}
  /*checkboxがチェックの状態になったらpopupを表示させる*/
input.my_1[type="checkbox"]:checked + #popup {
  display:block;
}

/*
#selfile {
    width: auto;
    height: auto;
}


.obje {
    width: auto;
    height: auto;
}
*/
#mytextr {
    word-wrap: normal;
    width: 400px;
    height: 150px;
    overflow: scroll;
    /* valuetext :"test.txt"*/
    /* border: 1px solid white;*/
    background: #fff;
    padding: 10px;
    /*  box-sizing: border-box;*/
    word-break: break-all;
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.75rem;
    margin-top: 10px;
}

#test_my1 {
	 color: red;
}
	
```
studio.js
```javascript
// ver. 1_00(test)

/*
 2024/03/14-03/21-
 ///////////////////////////////
 html
                            <!-- stato studio -->
    <div id="flex1">
        <div class="content1">

            <div id="box01">
                <table><tr><td id="my1td1"><div id="my1d1"></div></td><td></td></tr><tr><td></td><td><div id="my1_1"><img src="imge/my_img.jpg" width="640" alt="イメージがありません"></div></td><tr></table>
	        </div>
            <div id="box02">
                <table><tr><td id="my2td1"></td><td></td></tr>
 <tr><td></td><td><span id="my2_1"><img src="imge/gall.png" width="128" height="128"></span></td></tr></table>
            </div>
            <div id="box03">
                 <table><tr><td id="my3td1"></td><td></td></tr>
 <tr><td></td><td><div id="my3_1"><img src="imge/man1.png" width="128" height="128"></div></td></tr></table>
            </div>
            <div id="box04">
                <table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_1">　<mark><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></mark>　</div>
<!-- font-size:20px;  text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;  -->
</td></tr></table>
            </div>
           <div id="box04_01">
                <table><tr><td id="my4_1td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_2"></div></td></tr></table>
            </div>			
			<div id="box05">
				<table border="1" class="teb_b_c"><tr><td id="my5td1"><div id="my5d1"></div></td><td id="my5td2"><div id="my5d2"></div></td><td id="my5td3"><div id="my5d3">16:9</div></td></tr>
<tr><td id="my5td4"></td><td id="my5td5"><div id="my5_1"></div></td><td id="my5td6"><div id="my5d6">0000</div></td></tr>
<tr><td id="my5td7"></td><td id="my5td8"><div id="my5_1"></div></td><td id="my5td9"></td></tr></table>
			</div>			
        </div>
        <div class="content2">
            <form>
				コントロール<br>
                <input type="button" value=" Relode " onClick="Relode();">
                <input type="button" value=" Stato " onClick="Stato1();">

                <input type="button" value=" Re_Stato " onClick="Re_Stato();">
            </form>
			<hr>
            <form name="my_form_0">
				タイプ<br>
                <input type="radio" checked onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>
				比率<br>
				 <input type="radio" checked onchange="radio_glope2(1);">16:9 
				<input type="radio" onchange="radio_glope2(2);">9:16 
				<input type="radio" onchange="radio_glope2(3);">1:1<br>
				サイズ <span id="dis_size_wh">640 * 360</span><br>
				 <input type="radio" onchange="radio_glope3(1);">1280 720(x)x<br>
				 <input type="radio" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
				 <input type="radio" onchange="radio_glope3(3);">720 405(405 720)<br>
				 <input type="radio" checked onchange="radio_glope3(4);">640 360(360 640)<br>
				 <input type="radio" onchange="radio_glope3(5);">320 180(180 320) 
				<input type="radio" onchange="radio_glope3(6);">free<br> 
				 width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
				 height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
				<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>				
				再生<br>
                　<input type="checkbox" checked onchange="chec_g4_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g4_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g4_3(checked);">予備
            </form>
			<hr>
	 
		<!--<div id='audio0'>0<br><audio src="voise/myout2_0.wav" type="audio/wev" controls autoplay></audio></div>-->
			<div id='audio1'>1<br><audio src="voise/" controls stop-play muted></audio></div>
			<div id='audio2'>2<br><audio src="voise/" controls muted></audio></div>
			<div id='audio3'>3<br><audio src="voise/" controls muted></audio></div>
		</div>
	</div>  
	<div id="flex2">
		<div class="content3">
			<div id="test_my0">test0</div>
			<hr>
			<b>form</b><br>
			<form name="myfile">
				<input type="file" id="selfile" accept=".txt" />
				<div id="errmessage"></div>
				<textarea name="texta" id="mytextr"></textarea>
			</form>
	<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
			<hr>
			<span id="my_in_a_text" onclick="it_test2('test');">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
			<input type="button" value="テキストリード" onclick="read();"><br>
			<p id="mfl">text</p>
			<p id="my6_1"><font size="6" color="#f0f">あ</font><font size="1">っ</font><font size="3">かわった</font></p>
		</div>
		<div class="content4">
			<table border="1"><tr><td width="256"><div id="video1">video_in1</div></td>
			<td width="256"><div id="video2">video_in2</div></td>
			<td width="256"><div id="video3">video_in3</div></td></tr>
			<tr><td><div id="img_viw1"> </div></td>
			<td><div id="img_viw2"> </div></td>
			<td><div id="img_viw3"> </div></td></tr>
			</table><br>
			高速読込エリア<br>
		</div>
  
	</div>
	<div id="flex_end">
		<div class="content_end"></div>
    </div>
    <!-- end -->
*/
// nn = true,false


const maxtime = 7200;
//
let timerId = 0; //タイマーID
let intrtim = 1000; //インターバルタイマーの時間
let singlsyot = false;
let tim_end = false;
let mycount = -3;

let timId1 = 1;
let puleymiu = "puleymiu";
let mykyoku = "mykyoku";
let mloop = '';// 'loop ';

let video_voise_on = false;
let audio_voise_on = true;
let sonota_on = false;

let v_muted = "muted ";// ""
let a_muted = "";// "muted "
let v_url = "";
let a1_url = "";
let a2_url = "";
let a3_url = "";


let dis_hiritu = "16:9"
// let hiritu = '16:5';
text_read();//テキスト読み込みセットアップ
let my_n =0;
let readlin = ['//00/*zahyou1_1/*#my1td1/*0/*0/*32/*32/*/* box01 1_1 始まり指定 */',
    '//00/*image1/*/*#my1_1/*<img src="imge/my_img.jpg" width="640" alt="イメージがありません">', 
    '//00/*redin_v1/*imge/una00.mp4/*#video1/*<video controls src="imge/una00.mp4" width="256"></video>/* box01 用ビデオ先読み */',
    '//00/*redin_a1/*voise/una_kiruna.wav/*#audio1/*Stato Up<br><audio src="voise/una_kiruna.wav" type="audio/wev" controls></audio>/* fast music 1へ先読み */',
    '//-2/*zahyou2_1/*#my2td1/*0/*0/*32/*32/*/* box02_1 始まり指定 */',//スタイルより座標をとってくること。
'//-2/*image2/*/*#my2_1/*<img src="imge/gall.png" width="128" height="128"></span>/* box02 main image 女の子 */',
    '//-2/*zahyou3/*#my3td1/*0/*0/*32/*32/*/* box03_1 始まり指定 */',//スタイルより座標をとってくること。
    '//-2/*image2/*/*#my3_1/*<img src="imge/man1.png" width="128" height="128"></span>/* box03 main image 女の子 */'];

let linein_arr_n=[];

//glooe0 コントロールむ
function mystrto() {
    
    clearInterval(timId1);

    while(readlin[my_n].startsWith('//00')){
        linein_arr_n = readlin[my_n].split("/*");
        if( linein_arr_n[1]=="zahyou1_1"){
        }
        if( linein_arr_n[1]=="zahyou2_1"){
        }
        if( linein_arr_n[1]=="zahyou3_1"){
        }
        if( linein_arr_n[1]=="zahyou4_1"){
        }
        if( linein_arr_n[1]=="zahyou4_1_1"){
        }
        if( linein_arr_n[1]=="image1"){
        }
        if( linein_arr_n[1]=="redin_v1"){
        }






        my_n +=1;
    }
    v_url = "imge/una00.mp4";
    document.querySelector('#video1').innerHTML = '<video controls src="imge/una00.mp4" width="256"></video>';// muted
    a1_url = "voise/una_kiruna.wav";
    document.querySelector('#audio1').innerHTML = 'Stato Up<br><audio src="voise/una_321.wav" type="audio/wev" controls></audio>';
    timId1 = setInterval('demoPlay()', 1000);

}
function demoPlay() {
  
    clearInterval(timId1);
    clearInterval(timerId);
    tim_end = false;
    mycount = -3;
}


// gloope1_in
/*
				タイプ<br>
                <input type="radio" checked onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>
*/
// Radio Button change
let int_r_no = 1; //nullを避けるため1から;
function radio_glope1(int_r_no) {  //2,3エレメントRadio noだけで良い?変わった時しか来ないから

    alert(int_r_no);
    if (int_r_no == 1) {
        document.my_form_0.elements[1].checked = false;
        document.my_form_0.elements[2].checked = false;
        // Radio2が選択
    }
    if (int_r_no == 2) {
        document.my_form_0.elements[0].checked = false;
        document.my_form_0.elements[2].checked = false;
        // Radio2が選択
    }
    if (int_r_no == 3) {
        document.my_form_0.elements[0].checked = false;
        document.my_form_0.elements[1].checked = false;
        // Radio1が選択
    }
}


/*  定義  */
let hiritu = '16:9';


// gloope2_in
/*
				比率<br>
				 <input type="radio" checked onchange="radio_glope2(1);">16:9
				<input type="radio" onchange="radio_glope2(2);">9:16 
				<input type="radio" onchange="radio_glope2(3);">1:1<br> and free
*/                            // no_3-5
function radio_glope2(int_r_no){
    alert(int_r_no);
    if (int_r_no == 1) {
        document.my_form_0.elements[4].checked = false;
        document.my_form_0.elements[5].checked = false;
        document.my_form_0.elements[11].checked = false;		
        hiritu = '16:9';

    }
    if (int_r_no == 2) {
        document.my_form_0.elements[3].checked = false;
        document.my_form_0.elements[5].checked = false;
        document.my_form_0.elements[11].checked = false;		
        hiritu = '9:16';
    }
    if (int_r_no == 3) {
        document.my_form_0.elements[3].checked = false;
        document.my_form_0.elements[4].checked = false;
        document.my_form_0.elements[11].checked = false;		
        hiritu = '1:1';
    }
	
}

/*  定義  */
let dis_yoko = 640;
let dis_tate = 200;



// gloope3_in
/*
				サイズ <span id="dis_size_wh">640 * 360</span><br>
				 <input type="radio" onchange="radio_glope3(1);">1280 720(x)x<br>
				 <input type="radio" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
				 <input type="radio" onchange="radio_glope3(3);">720 405(405 720)<br>
				 <input type="radio" checked onchange="radio_glope3(4);">640 360(360 640)<br>
				 <input type="radio" onchange="radio_glope3(5);">320 180(180 320) 
				<input type="radio" onchange="radio_glope3(6);">free<br> 
				 width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
				 height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
				<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>				
*/                           // no_6-11
function radio_glope3(int_r_no){
	alert(int_r_no);
    if (int_r_no == 1) {  //6  <input type="radio" onchange="radio_glope3(1);">
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;
		if(hiritu == '16:9'){		
			dis_yoko = 1280;
			dis_tate = 720;
        
		}
		if(hiritu == '9:16' || hiritu == '1:1'){  
			document.my_form_0.elements[4].checked = false;
			document.my_form_0.elements[5].checked = false;
			document.my_form_0.elements[3].checked = true;
			dis_yoko = 1280;
			dis_tate = 720;
		}	
		dis_hiritu = "16:9";
    }
    if (int_r_no == 2) {   //7  <input type="radio" onchange="radio_glope3(2);">
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 1088;
			dis_tate = 612;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 450;
			dis_tate = 800;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 1040;
			dis_tate = 780;
            dis_hiritu = "4:3";
		}

    }
    if (int_r_no == 3) {   //8 <input type="radio" onchange="radio_glope3(3);">
		document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 720;
			dis_tate = 405;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 405;
			dis_tate = 720;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 720;
			dis_tate = 720;
            dis_hiritu = "1:1";
		}
    }
    if (int_r_no == 4) {   //9 <input type="radio" checked onchange="radio_glope3(4);">
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 640;
			dis_tate = 360;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 360;
			dis_tate = 640;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 640;
			dis_tate = 640;
            dis_hiritu = "1:1"
		}
    }
    if (int_r_no == 5) {   //10  <input type="radio" onchange="radio_glope3(5);">
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 320;
			dis_tate = 180;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 180;
			dis_tate = 320;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 320;
			dis_tate = 320;
            dis_hiritu = "1:1";
		}

    }
    if (int_r_no == 6) {   //11    gllpe_1
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
		
        document.my_form_0.elements[3].checked = false;
        document.my_form_0.elements[4].checked = false;
		document.my_form_0.elements[5].checked = false;
		hiritu = "furee";

		dis_yoko = 100;
		dis_tate = 100;
        dis_hiritu = "furee";
		
    }
	
	Chend_dsp_wh();
}
// テキストボックスからテキストを得て数字にする
/*const mystr = "a-9-b-1234-c-55555-d";
const result = mystr.match(/\d{2,4}/);
console.log( result[0] );*/
let non_nmu = "";
function text_3_w(){
	if(hiritu != "furee"){
		alert('フリーサイズで使ってください');
		return;
	}
	let str_in_text = document.getElementById('tx_wid').value;
	if(str_in_text.length < 3 || str_in_text.length > 4){
		alert('間違っています。');
		return;
	}
	non_nmu = str_in_text;
	non_nmu = non_nmu.replace(/[0-9]/g, '');
	if (non_nmu != ""){		
		alert('数字だけを入れてください['+non_nmu+']');
		return;
	}else{		
		let int_value_t = parseInt(str_in_text);
		if(int_value_t>99 && int_value_t < 1281){
			//値を入れる
			alert('width値を'+int_value_t+'にします。');
						
			dis_yoko = int_value_t;
			Chend_dsp_wh();
			
		}else{
			alert('100 ~999までてす');
		}
	}
}
function text_3_h(){
	if(hiritu != "furee"){
		alert('フリーサイズで使ってください');
		return;
	}
	let str_in_text = document.getElementById('tx_hi').value;
	if(str_in_text.length != 3){
		alert('間違っています。');
		return;
	}
	non_nmu = str_in_text;
	non_nmu = non_nmu.replace(/[0-9]/g, '');
	if (non_nmu != ""){		
		alert('数字だけを入れてください['+non_nmu+']');
		return;
	}else{		
		let int_value_t = parseInt(str_in_text);
		if(int_value_t>99 && int_value_t < 801){
			//値を入れる
			alert('hight値を'+int_value_t+'にします。');
			
			dis_tate = int_value_t ;
			Chend_dsp_wh();
			
		}else{
			alert('100 ~999までてす');
		}
	}
}
/* サイズ <span id="dis_size_wh">640 * 200</span><br> */
function Chend_dsp_wh(){

    document.querySelector('#my5d3').innerHTML = dis_hiritu;	
	document.querySelector('#dis_size_wh').innerHTML = dis_yoko + ' * ' + dis_tate;
	
	const box_5 = document.querySelector("#my5td5"); 
	box_5.style.width = dis_yoko + 'px';  
	box_5.style.height = dis_tate + 'px'; 
	
	
	
}

// gloope4_in
/*
				再生<br>
                　<input type="checkbox" checked onchange="chec_g4_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g4_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g4_3(checked);">予備
*/
function chec_g4_1(in_this) {
    if (in_this) {
        video_voise_on = false;
        v_muted = "muted ";
    } else {
        video_voise_on = true;
        v_muted = "";
    }
    alert(video_voise_on);
}
function chec_g4_2(in_this) {
    if (in_this) {
        audio_voise_on = false;
        a_muted = "muted ";
    } else {
        audio_voise_on = true;
        a_muted = "";
    }
    alert(audio_voise_on);
}
function chec_g4_3(in_this) {
    if (in_this) {
        sonota_on = true;
    } else {
        sonota_on = false;
    }
    alert(sonota_on);
}
// gloop_in end


/* stylsyto 変更 */
let my_width = document.documentElement.clientWidth;
let myNewWidth = my_width - 250 //styleで横幅を250pxと指定しているから
let my_x = 0;
let my_y = 0;
let myset_pop = false;
let my_Rnafil = "imge/cyat.png"; //ファイル名初期値
let my_w = 150;
let my_h = 150;
let my_w0 = 0;
let my_h0 = 0;

if(!document.getElementsByName('checkbox')){
    myset_pop = false;
}else{
    myset_pop = true;
}
document.querySelector('#popup').style.left = '50%';//`${myNewWidth}px`;
/*               */
function chk1() {
    my_width = document.documentElement.clientWidth;
    myNewWidth = my_width - 250
    document.querySelector('#popup').style.left ='50%';// `${myNewWidth}px`;
    document.querySelector("#my_i_01").innerHTML = '<img src="'+my_Rnafil+'" width="'+String(my_w)+'" height="'+String(my_h)+'">';
}

function chk2() {
    let myelement = document.getElementsByName('checkbox2');
    if (myelement[0].checked == true){
       document.querySelector('#popup').style.top = '0';
    }else{
        document.querySelector('#popup').style.top = '50%';
    }
    document.querySelector("#my_i_01").innerHTML = '<img src="'+my_Rnafil+'" width="'+String(my_w)+'" height="'+String(my_h)+'">';
}

/*  */
window.addEventListener("click", e => {
    let myelement3 = document.getElementsByName('checkbox3');
    if(myset_pop == true){
        my_x = e.clientX;
        my_y = e.clientY;
        let myelement4 = document.getElementsByName('checkbox4');//free
        if(myelement4[0].checked == true){
            let myelement5 = document.getElementsByName('checkbox5');
            if(myelement5[0].checked != true){
                document.getElementById('w0').value =my_x;
                document.getElementById('h0').value =my_y;
            }else{
                document.getElementById('w1').value =my_x - document.getElementById('w0').value;
                document.getElementById('h1').value =my_y - document.getElementById('h0').value; 
            }
        }     
        if (myelement3[0].checked == true){      
        //const box_pop = document.querySelector("#popup"); 
	        const my_box_x_pop = 250;//ポップ     
            if(my_width < my_x+my_box_x_pop){
        //      alert('右端です。');
                my_x = my_width - my_box_x_pop;
            }
            document.querySelector('#popup').style.left = my_x+'px';//`${myNewWidth}px`;
            document.querySelector('#popup').style.top = my_y+'px';               
        }
    }
});
/* owari */

/* ポップアップウィンドウからの取り込み */
function chk_3() {
    let my_pop_select = document.getElementById('ray_selct').value;
    let my_to1_w0 = document.getElementById('w0').value;
    let my_to1_h0 = document.getElementById('h0').value;
    let my_to1_w1 = document.getElementById('w1').value;
    let my_to1_h1 = document.getElementById('h1').value;
    alert(my_pop_select+' W0='+my_to1_w0+' H0='+my_to1_h0+' W1='+my_to1_w1+' H1='+my_to1_h1+'<br>'+my_Rnafil);

    if(my_pop_select == "box02_2"){
        let box_2_2 = document.querySelector("#my2_2td1"); 
        if(my_to1_w0 - Math.floor(my_to1_w1 / 2) > 0){
            my_to1_w0 -= Math.floor(my_to1_w1 / 2);
        }else{
            my_to1_w0 = 0;
        }
        if(my_to1_h0 - Math.floor(my_to1_h1 / 2) > 0){
            my_to1_h0 -= Math.floor(my_to1_h1 / 2);
        }else{
            my_to1_h0 = 0;
        }
        box_2_2.style.width = my_to1_w0 + 'px';  
        box_2_2.style.height = my_to1_h0 + 'px';
        document.querySelector("#my2_2").innerHTML = '<img src="'+my_Rnafil+'" width="'+my_to1_w1+'" height="'+my_to1_h1+'">'; 
    }
    //my2_2td1

}
/* end */

/* 分からんから ok にしてにしておく */
function chk_4(my_Rnafil0){
    my_Rnafil = my_Rnafil0;
    document.getElementById('errmessage2').innerHTML = 'checkし'+my_Rnafil+'ました。';
    //document.getElementById('my_01').value = '<img src="./imge/man1_1.png" width="200px" height="200px" alt="is not">';
    //ファイルがない時はis not!! にする。拡張子が合わないのに次をするのはどうかと思う。 
    if(my_Rnafil.startsWith("C\:\\fakepath\\")){ //ファイル名の先頭がC:\fakepath\で始まるか
        my_Rnafil = my_Rnafil.replace(/C\:\\fakepath\\/gm, 'imge/');
        alert('ファイル名を変更しました');
    }else{
        my_Rnafil = 'imge/gall.png'; //違っていたら借り入れしてみゆ。
        return;
    }
    // if (my_Rnafil.startsWith("(\./)?imge/")){ //ファイル名の先頭がimge/で始まるか}
    if(my_Rnafil.match(/.+\.(png|jpg|gif)$/gm)){ //ファイル名の最後がpng,jpg,gifで終わるか 1文字以上の文字列の後に.があり、png,jpg,gifのいずれかで終わる
        alert('ファイル一致しました');
        document.getElementById('errmessage2').innerHTML = my_Rnafil;
        var get_img_size = new Image();
        get_img_size.src = my_Rnafil;
        get_img_size.onload = function () {
            // プロセスが遅くなるため中で処理を完結させること
            const innersunpou = 170;
            var width_myp = get_img_size.naturalWidth;
            var height_myp = get_img_size.naturalHeight;
            alert('1 width='+width_myp+' height='+height_myp);
            document.getElementById('w1').value = width_myp;
            document.getElementById('h1').value = height_myp;
            if (width_myp >= height_myp){
                if (width_myp > innersunpou){
                    my_w = innersunpou;            
                    my_h =  Math.floor(innersunpou * height_myp / width_myp); //x:y=w:h 150:150=w:h 150h=150w 150=150w/h;                
                }else{
                    my_w = width_myp;
                    my_h = height_myp;
                }
            }else{       
                if (height_myp > innersunpou){
                    my_w =  Math.floor(innersunpou * width_myp / height_myp); //x:y=w:h 150:150=w:h 150w=
                    my_h = innersunpou;
                }else{
                    my_w = width_myp;
                    my_h = height_myp;
                }
            }
            alert('width='+String(my_w)+' height='+String(my_h));//小数点以下の変数は文字列に変換しない小数点以下の変数
            document.querySelector("#my_i_01").innerHTML = '<img src="'+my_Rnafil+'" width="'+String(my_w)+'" height="'+String(my_h)+'">';
        };      
    }
}

function chk_5() {
    alert('test on');
 
}



function Stato1() {

        if(v_url !=""){
        document.querySelector('#my1_1').innerHTML = '<video controls src="'+v_url+'" stop-play width="640"></video>';// muted
    }
    if(a1_url !=""){
        document.querySelector('#audio1').innerHTML = '1<br><audio src="'+a1_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio2').innerHTML = '2<br><audio src="'+a2_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio3').innerHTML = '3<br><audio src="'+a3_url+'" controls stop-play></audio>';
    }



    mycount = -3;
    tim_end = false;
    if (video_voise_on) {
        document.querySelector('#my1_1').innerHTML = '<video src="imge/una00.mp4" width="640" autoplay></video>'; 
        
    }else {
        document.querySelector('#my1_1').innerHTML = '<video src="imge/una00.mp4" width="640" muted autoplay></video>';
    }
    if (audio_voise_on) {
        document.querySelector('#audio1').innerHTML = 'una_kiruna<br><audio controls src="voise/una_321.wav" autoplay></audio>';
    } else {
        document.querySelector('#audio1').innerHTML = 'una_kiruna<br><audio controls src="voise/una_321.wav" muted autoplay></audio>';
    }
   
    timerId = setInterval('mytfunc()', intrtim);
}





let bol_mymy = "false";
function mytfunc() {

    // 訳の分らん割り込みが発生している
        mycount += 1;
 
 //   alert('リード'+String(mycount));
    if (mycount == 0) {
     //   document.querySelector('#my1_1').innerHTML = '<video controls src="imge/una00.mp4" width="640" autoplay muted></video>';// muted
        // document.querySelector('#audio0').innerHTML = `${puleymiu} ${mykyoku}<br><audio controls src="voise/myout2_0.wav" type="audio/wev" autoplay></audio>`;//myout2_0 // una_kiruna
        a2_url = "voise/myout2_0.wav";
        document.querySelector('#audio2').innerHTML = puleymiu+" "+mykyoku+'<br><audio controls src="voise/myout2_0.wav" '+a_muted+'autoplay></audio>';
    }

	if(mycount==4){
		document.querySelector('#img_viw1').innerHTML = '<img src="imge/man2_1.png" width="100" height="128">';
	}
	
	if(mycount==6){
		document.querySelector('#my3_1').innerHTML = '<img src="imge/man2_1.png" width="100" height="128">';
	}

 
    if (mycount == 8) {
       // alert('5==5');終わった後なんで出てくるんや。
        document.querySelector('#my4_1').innerHTML = '　<font size="7" color="#f0f">あ</font><font size="1">っ</font><mark clas="mark2"><font size="3">かわった</font></mark>　';
    
    }
	if(mycount == 9){
		document.querySelector('#video2').innerHTML = '<video controls src="imge/rec_2023_07_30_1.mp4" width="256"></video>';// muted
	}
    if (mycount == 12) { //プリロード\\\\ stop-play v_url = "imge/una00.mp4";
         document.querySelector('#my1_1').innerHTML = '<video controls src="'+v_url+'" stop-play width="640"></video>';// muted
         v_url = "imge/rec_2023_07_30_1.mp4";
        document.querySelector('#my1_1').innerHTML = '<video controls src="imge/rec_2023_07_30_1.mp4" width="640"' + v_muted + 'autoplay></video>';// muted
    }
 
    if (mycount == 20) {

        document.querySelector('#audio1').innerHTML = puleymiu + " " + mykyoku +'<br><audio controls src="voise/una_kiruna.wav" '+a_muted+'autoplay></audio>';
    }
   if (mycount == 25) {
       // 
        document.querySelector('#my4_1').innerHTML = '　男を、<br>いつ変えた?　';    
    }
   if (mycount == 26) {
       // 
        document.querySelector('#my4_2').innerHTML = '　鈴木と申します。 ';    
    }

    if (mycount == 610) { //タイムアウト
        tim_end = true;
    }

	if(mycount >= 0){
		let sec = mycount;
		let hour = Math.floor(sec / 3600);
		let min = Math.floor(sec % 3600 / 60);
		let rem = sec % 60;
		document.querySelector('#my5d6').innerHTML = " " + mycount.toString().padStart(4, '0')+'<font size="2"><br> '+`${hour}:${min}:${rem}`+'</font>';//("00000" + num1).slice(-5);`${hour}時間${min}分${rem}秒`
	}else{
		document.querySelector('#my5d6').innerHTML = " " + mycount.toString().padStart(4, '0')+'<font size="2"><br>　0:0:0</font>';
	}
	
    if (mycount > maxtime) {
         tim_end = true;
    }


    if (tim_end==true) {
        bol_mymy = "true";
    } else {
        bol_mymy = "false";
    }


 //   alert(bol_mymy); 
    if (tim_end==true) {
      
        mycount = 0;
        clearInterval(timerId);
      //  alert('終わり' + String(mycount));
    }
  

  //  clearInterval(timerId);



}

function it_test2(test) {
 //   document.querySelector('#my6_1').innerHTML = 'あいうえお';
    document.querySelector('#my_in_a_text').innerHTML = test + 'あいうえお';
}

function Relode() {
    location.reload();
}



function Re_Stato() {
  //  alert('fast');
    if(v_url !=""){
        document.querySelector('#my1_1').innerHTML = '<video controls src="'+v_url+'" stop-play width="640"></video>';// muted
    }
    if(a1_url !=""){
        document.querySelector('#audio1').innerHTML = '1<br><audio src="'+a1_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio2').innerHTML = '2<br><audio src="'+a2_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio3').innerHTML = '3<br><audio src="'+a3_url+'" controls stop-play></audio>';
    }



    mystrto();   //これで何で動くのかが理解出来ていない。

    Stato1();



}




// text_read();  //一回だけ実行してやれば常駐して消すまで有効に成る　毎回実行すると得られない。
//let this_file = "";
function text_read() {
    alert('テキストリード');
    var obj1 = document.getElementById("selfile");

    obj1.addEventListener("change", function(evt) { //"change"
        var file = evt.target.files;
        var reader = new FileReader();
        reader.readAsText(file[0]);
        reader.onload = function(ev) {
            document.myfile.texta.value = reader.result;
        }

        //エラー処理
        reader.onerror = function(e) {
            //エラーメッセージを配列に格納する
            var errmes = new Array(
                "",
                "ファイルが見つかりません！",
                "セキュリティエラーが検出されました！",
                "ファイルの読込が中断されました！",
                "ファイルの読み込み権限がありません！",
                "ファイルサイズが大き過ぎます！"
            );
            //エラーをinnerHTMLで書き出す
            var obj2 = document.getElementById("errmessage");
            obj2.innerHTML = errmes[reader.error];// obj2.innerHTML = errmes[reader.error.code];
        }

    }, false);
}


//              form end
// no coll
function read() {
	alert("my_mese");
    let redotext = document.querySelector('#mytextr').value;
	alert(redotext);
    if (redotext == "") { return; }


    // document.querySelector('#mfl').innerHTML = redotext.replace(/\n/g, '<br>');
    //   let readlin = [];  let readlin  先頭へ持って行った
    readlin[0] = '';
    let ii = 0;
	
    for (let i = 0; i < redotext.length; i++) {
        if (!redotext[i].includes('\n')) {
            readlin[ii] += redotext[i];
        } else {
            ii++;
            readlin[ii] = '';
        }
    }
    document.querySelector('#mfl').innerHTML = readlin;
}

```
解説は、専門家に任せる。Copilot!