子フレームから親フレームのSPANタグを書き換え

Question

前提・実現したいこと

JavaScriptを利用して子フレームのTEXTに入っている値を親フレームのSPANタグに反映させたい

該当のソースコード

'親：事前に配列処理を行いHI(i)へ値が格納されている⇒JS実行で子のTEXTデータへ書き換え
<span class="datepick" ID="HI<%=i%>" NAME="HI<%=i%>" style="display:inline-block;">
　<%=HI(i)%>
</span>
<INPUT TYPE=BUTTON name="Number<%=i%>" VALUE="<%=Number(i)%>"　onclick=Read(<%=i%>)>
<iframe name=dmyframe id=dmyframe></iframe>

'子：SQL読込にてoraDs(日数)を取得
<INPUT TYPE=TEXT NAME="HI<%=Request("num")%>"　VALUE="<%=oraDs("日数")%>">
<INPUT TYPE=BUTTON name="Num" VALUE="<%=Request("num")%>" onclick=Read_On()>

//親：iframe画面変更。
function Read(i){
　JCode = document.MAIN['Number'+i].value;
　document.MAIN.action = "set.asp?JCode="+JCode+"&num="+i;
　document.MAIN.target = "dmyframe";
　document.MAIN.submit();
}

//子：親のSPANタグ表示内容を子のTEXTデータにて変更
function Read_On(){
　i = document.MAIN.num.value;
　parent.document.MAIN['HI'+i].innertext = document.MAIN['HI'+i].value;
}

試したこと

親のSPANタグを<INPUT TYPE=TEXT>へ書き換え、子のJavaScript部分を下記の通り書き換え、値が渡せることは確認しました。
parent.document.MAIN['HI'+i].value= document.MAIN['HI'+i].value;

上記より、【parent.document.MAIN['HI'+i].value】部分が誤っていると考え、下記3通り試しました。

//1個目
　parent.document.MAIN['HI'+i].value = document.MAIN['HI'+i].value;
//2個目
　parent.document.MAIN['HI'+i].innerHTML = document.MAIN['HI'+i].value;
//3個目
　parent.document.MAIN['HI'+i].textContent = document.MAIN['HI'+i].value;

本質問サイトを始め、いくつかのサイトを探してみましたが、上記の方法ぐらいしか見つかりませんでした。
基礎的な部分となり申し訳ございませんが、ご助力のほどお願い致します。

Answer 1

parent.getElementById('HI'+i).innerHTMLにて実装出来ました。
ID指定Onlyなのですね。。。失礼致しました。

Comments

[kei344]

「ID指定」以外でもいくつかメソッドがありますが、querySelector/querySelectorAllでだいたいできます。

【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

[Program_]

Selectorでの実装は初めて知りました。今後の学習時に活かしていきます。
ご丁寧にありがとうございました！！！