htmlでJavascript処理を出来るようにテキストファイルを読み込む

一度やったのだけど忘れてしまって、やり直してみました。

fileからtextareaに出すにはJavascriptを読み込み時に一度だけ読み込めば、objectが常駐して閉じるまでtextareaの選択リストを更新してくれます。

textareaをクリックして、実行ルーチンはこれとは関係ありません。
**htmlの見本**
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="img/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>
    body { 
        margin: 1cm;
        background:#ffbbff;
    }
</style>
<script>
if( screen.width/2 - 20 > window.innerWidth || screen.height/2 - 20 > window.innerHeight){
alert("ページが小さ過ぎます。");
}
</script>
<script src="studio.js" defer></script>

</head>
<body style="background-image : url(img/bgsc_1.png);">
<!-- stato studio -->


<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>
	<form name="my_form_0">
	　  <input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
	</form>
	<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>
 
<div id="test_my1">test1</div>

<!-- 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>
</body>
<!--<script src="my_js.js" defer></script>-->
</html>

```

**動かしているところ**
配列に入れる処理は別ボタンで行う。呼び出しを組み込めば良いだけだが確認して。

![Animation_file2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/8b97a1b3-78cf-4c88-2a32-990f890603ad.gif)

**Javascriptのscript**

```javascript
// ver. 1_00(test)

/*
 2024/03/14-03/21-
//   it html 
<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>
	<form name="my_form_0">
	　  <input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
	</form>
	<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>
 
<div id="test_my1">test1</div>
// 
*/



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.code];
        }

    }, false);
}


// Radio Button change
let int_r_no = 1;
let bol_boole = false; // false;
function radio_glope1(int_r_no,bol_boole){  //2,3エレメントRadio
	alert(bol_boole);
	alert(int_r_no);
	if(bol_boole == true && int_r_no == 2){
		document.my_form_0.elements[0].checked = false;
		// Radio2が選択
	}else{
		document.my_form_0.elements[1].checked = false;
		// Radio1が選択
	}
}
//              form end
// no coll
function read() {
	alert("my_mese");
    let redotext = document.querySelector('#mytextr').value;
	alert(redotext);
	
    // document.querySelector('#mfl').innerHTML = redotext.replace(/\n/g, '<br>');
    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;
}

```

**スタイルシート**

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


/* test */
#test_my0 {
	color: red;
}

/*
#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;
}
	
```

おわり。処理を書いたテキストを読み込ませ、自動実行させようと、text fileを読み込ませたかった、だけです。

参考にどうぞ。