ホーム 技術ネタ

jsで画面を再描画(リロードなし)する最適な方法

2019年2月21日

jsで画面を再描画(リロードなし)する最適な方法の実行画面

 

jsで画面を『再描画』する。(リロードなし)

やることは

 

一番最初に表示される画面を保存して

 

ボタンを押して画面の文字を変える

 

その後に、再度『画面を最初の状態に戻す』ボタンを押して、一番最初の画面に戻す。

 

つまり、一番最初の画面の状態を変数に保存しておく感じ。

 

これで『再描画』が可能になる。

 

コードはこんな感じ。

 

<!DOCTYPE html>
<html>
  <body>
    <div id="screen">
      <button onclick="BackToFunc()">画面を元に戻す</button>
      <button onclick="DefaultFunc()">画面を変える</button>
      <p id="demo"></p>
    </div>
	<script>
		document.getElementById("demo").innerHTML =  "最初の画面";
		var defaultHTML  = document.getElementById("screen").innerHTML;

		function BackToFunc() {
		  document.body.innerHTML = defaultHTML;
		}

		function DefaultFunc() {
		  document.getElementById("demo").innerHTML = "画面を変える";
		}
	</script>
  </body>
</html>

 

Pocket
LinkedIn にシェア



新規webサービスの開発の依頼ならoffテク⭐️

低コストで、Reactなどモダン言語での新規webサービス開発を承ります

-ホーム, 技術ネタ

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.