JavascriptのinnerHTMLが使えない

Question

お世話になっております。

innterHTMLを使って動画と画像を動的に変更したいのですがhtmlのタグをinnterHTMLを使って変更しようとしてもできないです

 function LinkClick(param,extension) {
            var element = document.getElementById("Image01");

            switch (param) {
                case 0:

                    extern = CheckFileType(extension);
                    if(extern == "png" || extern == "jpg"){
                        element.innerHTML = '<img id="Image01" class="MainImage1" src="" >';
                    }else if(extern == "mp4"){
                        element.innerHTML = '<video controls class="Video"><source src="" type="video/mp4"></video>';  
                    }
                    element.src = `../wounise/gamelist/${Id}/img/${Exp_Image1_Path}`;
                    break;
                case 1:
                        extern = CheckFileType(extension);
                    if(extern == "png" || extern == "jpg"){
                        element.innerHTML = '<img id="Image01" class="MainImage1" src="" >';
                    alert("png");
                    }else if(extern == "mp4"){
              
                        element.innerHTML = '<video controls class="Video"><source src="" type="video/mp4"></video>';  
                     
                    }
                    element.src = `../wounise/gamelist/${Id}/img/${Exp_Image2_Path}`;
                    break;
                case 2:
                    element.src = `../wounise/gamelist/${Id}/img/${Exp_Image3_Path}`;
                    break;
                case 3:
                    element.src = `../wounise/gamelist/${Id}/img/${Exp_Image4_Path}`;
                    break;
                case 4:
                    element.src = `../wounise/gamelist/${Id}/img/${Exp_Image5_Path}`;
                    break;
                default:
                    element.src = `../wounise/gamelist/${Id}/img/${Exp_Image6_Path}`;
                    break;
            }
        }
    </script>




 <!-- For image list array -->

<?php


$EOM = <<<EOM

<img id="Image01" class="MainImage1" src="../wounise/gamelist/$Id/img/$Exp_Image1" >
<br/>
   <a href="javascript:void(0);" onclick="LinkClick(0,`${Exp_Image1}`);"><img class="SecondImage1" id="SecondImage1" src="../wounise/gamelist/$Id/img/$Exp_Image1"></img>
    </a><br/>
    <a href="javascript:void(0);" onclick="LinkClick(1,`${Exp_Image2}`);"><img class="SecondImage1" id="SecondImage1" src="../wounise/gamelist/$Id/img/$Exp_Image2"></img>
    </a><br/>
    <a href="javascript:void(0);" onclick="LinkClick(2,`${Exp_Image3}`);"><img class="SecondImage1" id="SecondImage1" src="../wounise/gamelist/$Id/img/$Exp_Image3"></img>
     </a><br/>
   <a href="javascript:void(0);" onclick="LinkClick(5,`${Exp_Image4}`);"><img class="SecondImage1" id="SecondImage1" src="../wounise/gamelist/$Id/img/$Exp_Image4"></img>
     </a><br/>
    <a href="javascript:void(0);" onclick="LinkClick(4,`${Exp_Image5}`);"><img class="SecondImage1" id="SecondImage1" src="../wounise/gamelist/$Id/img/$Exp_Image5"></img>
     </a><br/>
    <a href="javascript:void(0);" onclick="LinkClick(5,`${Exp_Image6}`);"><img class="SecondImage1" id="SecondImage1" src="../wounise/gamelist/$Id/img/$Exp_Image6"></img>
    </a><br/>
EOM;

echo $EOM;

?>







<script type="text/javascript">
document.getElementById("D1").innerHTML = "あいうえお";
</script>



<?php
    $foo = 'abcde';
?>

<script type="text/javascript">


function CheckFileType(extern){

const path = extern;
console.log('typeof: ' + typeof path);
console.log('value: ' + path);

match = path.match(/[^/]+$/);
filename = path.match(/([^/]*)./)[1];
extend = path.match(/[^.]+$/);
console.log("fileinfo = " + match);       
console.log("filename = " + filename);   
console.log("extend   = " + extend);  
return extend; 

}

上記のコードからCheckFileType関数でファイルの拡張子をチェックして.mp4だったら
element.innerHTML = '<video controls class="Video"><source src="" type="video/mp4"></video>';
で
<img id="Image01" class="MainImage1" src="../wounise/gamelist/$Id/img/$Exp_Image1" >
上記の<img>タグを全て<video>に変更したいですがデベロッパーツールで確認しても<img>タグのままになってしまいます...

Answer 1

innerHTMLってタグから閉じタグの間にある部分ですよ？
あまりおすすめはできませんが、せめてouterHTML

<div id="hoge">hoge</div>
<script>
document.querySelector('#hoge').outerHTML='<div id="fuga">fuga</div>';
</script>

ちゃんとやるならDOMベースで書き換えて下さい

Comments

[nguyenseiji]

返信ありがとうございます。
別の質問になってしまうのですが
element.src = `../wounise/gamelist/${Id}/img/${Exp_Image2_Path}`;
上記のコードを
element.src = "../wounise/gamelist/".`${Id}`."/img/"`.${Exp_Image2_Path}`;
のように変数の部分だけバッククォ-トで囲む方法をやるとなぜエラーになってしまうのでしょうか
パスである文字列部分はダブルクオートで囲んでいます

[yambejp]

＞.`${Id}`.

javascriptの文字連結はピリオドではなく＋です

[nguyenseiji]

ありがとうございます。

Answer 2

`は「バッククォート」です。
文字列を囲うのは「シングルクォート」もしくは「ダブルクォート」

幾度となくアドバイスしていますが、
ブラウザに出力されたHTMLの確認はしてください。

PHPとはあたりから基礎が必要では。
JavaScriptも同じくらい（文字列の扱い）から。

Comments

[nguyenseiji]

ブラウザに表示というのはデベロッパーツールで確認するという事でしょうか

[m.ts10806]

今その質問がきたことに驚きです。
確認方法は１つだけではないので、まず色々やってみては。