Javascript 部品入力(text,file"未完",radio,フィールド)'html付き'

# 報告出来る範囲内で。

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="studio_css" href="studio.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 -->


	<input type="text" name="text1" value="Please write the directory." id="my_text1" onchange="text_Changed(value)"><br>
	<input type="file" onchange="file_Changed(value)"><br>
	<!--<span id="my_inna_text">てきすと<span><br>-->
	<textarea name="txt" cols="40" rows="5" id="mytextarea"></textarea><br>
	<hr>
	<b>form</b><br>
    <form name="my_form_0">
		<input type="file" id="selfile" accept=".txt" onchange="text_read(value)">
		<span id="errmessage">errmessage</span><br>
		<input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
		<input type="file" onchange="fileChanged(value)"><br>
        <textarea name="txt" cols="40" rows="5" class="mytextr"></textarea>
    </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">x</p>
    <p id="f_name">filename</p><br>
    <div class="image-list">image-list</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>

```

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

/*
 2024/03/14-
//   it html 
	<input type="text" name="text1" value="Please write the directory." id="my_text1" onchange="text_Changed(value)"><br>
	<input type="file" onchange="file_Changed(value)"><br>
	<!--<span id="my_inna_text">てきすと<span><br>-->
	<textarea name="txt" cols="40" rows="5" id="mytextarea"></textarea><br>
	<hr>
	<b>form</b><br>
    <form name="my_form_0">
		<input type="file" id="selfile" accept=".txt" onchange="text_read(value)">
		<span id="errmessage">errmessage</span><br>
		<input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
		<input type="file" onchange="fileChanged(value)"><br>
        <textarea name="txt" cols="40" rows="5" class="mytextr"></textarea>
    </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">x</p>
    <p id="f_name">filename</p><br>
    <div class="image-list">image-list</div>
// 
*/
let my_a_ll_line = "it syori!";
let element = document.getElementById('mytextarea');
element.value = 'Hello';
let fail_name = "";
let kore = "";
let kore0 = "";
let kore0_0 = "";
let my_text_value = "";
function text_Changed(my_text_value) {   //no_form
	alert("my_text_value:"+my_text_value);

}

function file_Changed(kore0_0) {   //no_form
	alert("kore0_0:"+kore0_0);
	// elements[0] 最初の一個だけの時はうまく行く時がある。
	fail_name = document.forms[0].elements[0].value;  
	alert("my_mese1:"+fail_name);
}

// 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.forms[0].elements[1].checked = false;
		// Radio2が選択
	}else{
		document.forms[0].elements[2].checked = false;
		// Radio1が選択
	}
}

function text_read(kore) {    //1st
	alert("kore"+kore);
	fail_name = document.forms[0].elements[0].value;
	document.forms[0].elements[4].value = fail_name;
	alert("my_mese1"+fail_name);
	fail_name = fail_name.replace('C\:\\fakepath','\.');//なんか違ってる先頭にマッチさせる
	alert(fail_name);
	
	// ファイル名の選択
    var obj1 = document.getElementById("selfile");

    obj1.addEventListener("change", function(evt) {

        var file = evt.target.files;
	//	document.querySelector('#my_inna_text').innerHTML = file[0];
        var reader = new FileReader();

        reader.readAsText(file[0]);
		
		
		if('Filename' in file[0]){
			alert(file[0].Filename);
		}else{
			console.log('File name はありません'); //ハッシュ参照の仕方
		}
		
        reader.onload = function(ev) {
            //
        }

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

    }, false);
}

function fileChanged(kore0) {    //2nd　+2
	document.querySelector('#my_in_a_text').innerHTML = my_a_ll_line;
	alert("kore0"+kore0);
	fail_name = document.my_form_0.elements[3].value;  
	alert("my_mese2"+fail_name);
		
    console.log(kore0);
	my_a_ll_line = " 読込.";
	if(1 == 0 && kore0.files.length > 0){
		for (let i = 0; i < kore0.files.length; i++) {
			my_a_ll_line += kore0.files[i];
		}
	}else{
		my_a_ll_line = "失敗";
	
	}
	document.querySelector('#my_in_a_text').innerHTML = my_a_ll_line;
}
let it_str = "";
function it_test2(it_str){
	alert("it chenge!!"+it_str);
	document.querySelector('#my_in_a_text').innerHTML = "chnge!";
}

// no coll
function read() {
	alert("my_mese"+fail_name);
    let redotext = document.querySelector('.mytextr').value;
    // 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;
}

```
一部動きません。

参考　js2
```javascript
// note 

let it_str1 = "";
function it_test(it_str1){
	alert("it chenge!!"+it_str1);
	document.querySelector('#my_in_a_text').innerHTML = "chnge!";
}

```

空っぽのスタイルシート
```css
@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */

a {	background:  #ffffcc; }

```

おまけ
![スクリーンショット 2024-03-15 215714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/bf4ebd53-3811-1ad4-d7a9-a780bdbf930b.png)

アイコンfileと背景は各自準備または、scriptの削除をお願いします。

各自、工夫してお使いください。