HMTL内でJavaScriptの変化を維持したまま更新したい

JavaSciptを始めて2日目の初心者で、お見苦しいコードややり方だとは思いますがご容赦ください。
さて、まず私が実現したいことは
JavaScriptによってHTMLを編集したのちに、その編集したHTMLをもう一度読み込ませる、というものです。

HTML上に「あいうえお」という文字列と入力欄があるとします。

HTML
1<body>
2
3<p id="let">あいうえお</p>
4
5<form>
6<input type="text" id="key">
7<input type="button" value="決定"　onclick="func1()">
8</form>
9
10</body>

この状態で入力欄に「キーワード」と入力して決定ボタンを押すとカタカナになるというものを作るとします。
これを実現するのはそれほど難しくはないと思います。
(

JavaScript
1function func1(){
2const key_word = document.getElementById('key').value;
3if(key_word == 'キーワード'){
4 document.getElementById('let').innerHTML = 'アイウエオ';
5}
6}

とすれば作れると思います。)

ここで、私がやりたいのは、これを<script>の変数を用いて実現したいのです。
具体的には次のようなことです。
まず、HTML上で<script>のif文を用いて変数repがtrueならカタカナ、falseならひらがなを表示するようにします。
また、repははじめfalseに設定して、ひらがなが表示されるようにします。

HTML
1<body>
2
3<script id = 'vari_num'>
4var rep = false;
5</script>
6
7<script>
8if(rep){
9 document.write('アイウエオ');
10}else{
11 document.write('あいうえお');
12}
13</script>
14
15<form>
16<input type="text" id="key">
17<input type="button" value="決定"　onclick="func2()">
18</form>
19
20</body>

そしてJavaScript側で、「キーワード」が入力されたらfalseをtrueに書き換えるようにします。

JavaScript
1function func2(){
2const key_word = document.getElementById('key').value;
3var str = document.getElementById('vari_num').innerHTML;
4if(key_word == 'キーワード'){
5 str = str.replace('false','true');
6 document.getElementById('vari_num').innerHTML = str;
7}
8}

これでできると思って実行しました。
確かにHTML上でfalseがtrueに代わっているのですが、表示は「あいうえお」のままでした。
おそらく、HTMLがJavaScriptによって変更されてからHTML全体の更新がなされていないからだと考えました。
そこでreloadをすればいいと思い、func2の最後にreloadを加えました。

JavaScript
1function func2(){
2const key_word = document.getElementById('key').value;
3var str = document.getElementById('vari_num').innerHTML;
4if(key_word == 'キーワード'){
5 str = str.replace('false','true');
6 document.getElementById('vari_num').innerHTML = str;
7 document.location.reload();
8}
9}

今度は更新されることでJavaScriptによる変更が無効化されてしまいました。
そこで題名にある通りの質問なのですが、
JavaScriptによる変更(falseをtrueに変える)を維持してHTML全体に変更を反映させたい(その下のscriptタグのrepにそれを反映させたい)のです。
このような方法があれば、ぜひ教えていただけると助かります。
よろしくお願いします。

行動規範の内容に同意します

回答2件

reloadをすればいい

それは悪手と思います。
変換した文字を特定のHTML要素の値（valueやtextContent）に
入れ込んでやればいいでしょう

初心者ということなので２つだけ最初に覚えておいてください

document.writeは使用しない
evalは使用しない

投稿2020/12/30 14:20

yambejp

総合スコア116694

cookieやlocalStrageを使用すればページを跨いだデータ保持が可能です。

投稿2020/12/30 10:43

tanat

総合スコア18727

zeraorait

2020/12/30 11:39

あまりCookieについて詳しくないのですが、この場合どのように用いればやりたいことが実現できるのでしょうか。

tanat

2020/12/30 12:12

一度使ってみるとイメージが付きやすいので試してみてください。(一度も使ったことがない状態で1から解説するのはteratailの趣旨から外れるのでしません) javascript cookie 使い方とかで調べてサンプルを作ってみる事をお勧めします具体的には現状、HTML上で保持しているデータ <script id = 'vari_num'> var rep = false; </script> について、ロード時にcookieの値を確認して分岐させてやればいけると思います。

行動規範の内容に同意します

あなたの回答