javascriptを用いて、動画をクリックした時に指定の画像に切り替える方法。

###前提・実現したいこと
javascriptを用いて、動画から画像への切り替えを行いたいです。
###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/pokemon.css">
    <title>Pokemon</title>
  </head>
  <body>
    <div class="flame">
      <img src="images/flame.jpg" alt="" width="500px;" height="450px">
      <video src="video/video.mp4" id="video" autoplay width="312px" height="300px;" onclick="opning()"></video>
    </div>

    <script type="text/javascript" src="pokemoscript.js">
    </script>
  </body>
</html>

function opning(){
  var title = document.createElement("img");
  title.setAttribute('src','text.png');
  title.style.cssText ="width:312px";

  document.getElementById('video').innerHTML = title;
  }

動画までは再生されています。
動画をクリックした際に、指定した画像に切り替えを行いたいのですが、実行されません。
また、デベロッパーツールで確認をしても、エラーは確認されていません。
まだ学習を初めて、２週間ほどなので、詰まってしまい、質問いたしました。
どうぞよろしくお願いいたします。

kei344

2017/05/06 03:01

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「クリックしたら」の部分のJavaScriptが書かれていないので、追記してください。

shi_ue

2017/05/06 03:35

なんか、HTMLが二回出てますが・・・

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

回答1件

ベストアンサー

createElementではなく、getElementsByTagNameかquerySelectorを使って、img要素を特定し、srcを書き換えるだけでOKですよ。
widthやheightも違うのであれば、それも変更する必要がありそうですね。

追記

video要素をimg要素に入れ替えたいんですね。じゃあ、要素を消して、親要素にimgを追加したらいいですね。

javascript
1var v = document.getElementById("video");
2var p = v.parentElement;
3v.remove();
4
5var e = document.createElement("img");
6e.src = "text.png";
7e.width = 312;
8p.appendChild(e);
9```てな感じ。