More than 3 years have passed since last update.

#マンダラチャートの作成方法( #Localstrage 使うから入力値が保存されます)

Posted at 2020-03-12

該当

大谷投手の目標管理にマンダラチャートを利用していたというのは有名な話かと思います。
マンダラチャートを作成できるWEBサービスを探したのですが、見当たらなかったので作成しました。

マンダラチャートURL

[https://koji-yamamoto-github.github.io/mandala-chart/]

概要

Web1.0時代の見た目ですが、簡易に作成しようとするとこれが限界でした。
タイトルは変更することが出来ます。
入力した値は、Localstrageに保存するので、誤ってブラウザを閉じたとしても続きから始められるようにしてあります。
localstrageも含めて全部消すには、下部の「クリア」リンクを押下して頂ければ消えます。

作り方

マス上のものは、以下のCSSを利用するに尽きます。
display: grid;

  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 30vh 30vh 30vh;
  grid-template-areas: "column1 column2 column3" "column4 center-column5 column6" "column7 column8 column9";

以下は、上記マンダラチャートを生成する為のプログラム

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./mandara.css" />
    <script type="text/javascript" src="./mandara.js"></script>
    <title>マンダラ</title>
</head>

<body>
    <div class="title"><textarea id="tiltle-textarea"></textarea></div>
    <div class="grid-container">
        <div class="column1">
            <div class="column1-1"><textarea id="column1-1-textarea"></textarea></div>
            <div class="column1-2"><textarea id="column1-2-textarea"></textarea></div>
            <div class="column1-3"><textarea id="column1-3-textarea"></textarea></div>
            <div class="column1-4"><textarea id="column1-4-textarea"></textarea></div>
            <div class="column1-5"><textarea id="column1-5-textarea"></textarea></div>
            <div class="column1-6"><textarea id="column1-6-textarea"></textarea></div>
            <div class="column1-7"><textarea id="column1-7-textarea"></textarea></div>
            <div class="column1-8"><textarea id="column1-8-textarea"></textarea></div>
            <div class="column1-9"><textarea id="column1-9-textarea"></textarea></div>
        </div>
        <div class="column2">
            <div class="column2-1"><textarea id="column2-1-textarea"></textarea></div>
            <div class="column2-2"><textarea id="column2-2-textarea"></textarea></div>
            <div class="column2-3"><textarea id="column2-3-textarea"></textarea></div>
            <div class="column2-4"><textarea id="column2-4-textarea"></textarea></div>
            <div class="column2-5"><textarea id="column2-5-textarea"></textarea></div>
            <div class="column2-6"><textarea id="column2-6-textarea"></textarea></div>
            <div class="column2-7"><textarea id="column2-7-textarea"></textarea></div>
            <div class="column2-8"><textarea id="column2-8-textarea"></textarea></div>
            <div class="column2-9"><textarea id="column2-9-textarea"></textarea></div>
        </div>
        <div class="column3">
            <div class="column3-1"><textarea id="column3-1-textarea"></textarea></div>
            <div class="column3-2"><textarea id="column3-2-textarea"></textarea></div>
            <div class="column3-3"><textarea id="column3-3-textarea"></textarea></div>
            <div class="column3-4"><textarea id="column3-4-textarea"></textarea></div>
            <div class="column3-5"><textarea id="column3-5-textarea"></textarea></div>
            <div class="column3-6"><textarea id="column3-6-textarea"></textarea></div>
            <div class="column3-7"><textarea id="column3-7-textarea"></textarea></div>
            <div class="column3-8"><textarea id="column3-8-textarea"></textarea></div>
            <div class="column3-9"><textarea id="column3-9-textarea"></textarea></div>
        </div>
        <div class="column4">
            <div class="column4-1"><textarea id="column4-1-textarea"></textarea></div>
            <div class="column4-2"><textarea id="column4-2-textarea"></textarea></div>
            <div class="column4-3"><textarea id="column4-3-textarea"></textarea></div>
            <div class="column4-4"><textarea id="column4-4-textarea"></textarea></div>
            <div class="column4-5"><textarea id="column4-5-textarea"></textarea></div>
            <div class="column4-6"><textarea id="column4-6-textarea"></textarea></div>
            <div class="column4-7"><textarea id="column4-7-textarea"></textarea></div>
            <div class="column4-8"><textarea id="column4-8-textarea"></textarea></div>
            <div class="column4-9"><textarea id="column4-9-textarea"></textarea></div>
        </div>
        <div class="center-column5">
            <div class="column5-1"><textarea id="column5-1-textarea"></textarea></div>
            <div class="column5-2"><textarea id="column5-2-textarea"></textarea></div>
            <div class="column5-3"><textarea id="column5-3-textarea"></textarea></div>
            <div class="column5-4"><textarea id="column5-4-textarea"></textarea></div>
            <div class="column5-5"><textarea id="column5-5-textarea"></textarea></div>
            <div class="column5-6"><textarea id="column5-6-textarea"></textarea></div>
            <div class="column5-7"><textarea id="column5-7-textarea"></textarea></div>
            <div class="column5-8"><textarea id="column5-8-textarea"></textarea></div>
            <div class="column5-9"><textarea id="column5-9-textarea"></textarea></div>
        </div>
        <div class="column6">
            <div class="column6-1"><textarea id="column6-1-textarea"></textarea></div>
            <div class="column6-2"><textarea id="column6-2-textarea"></textarea></div>
            <div class="column6-3"><textarea id="column6-3-textarea"></textarea></div>
            <div class="column6-4"><textarea id="column6-4-textarea"></textarea></div>
            <div class="column6-5"><textarea id="column6-5-textarea"></textarea></div>
            <div class="column6-6"><textarea id="column6-6-textarea"></textarea></div>
            <div class="column6-7"><textarea id="column6-7-textarea"></textarea></div>
            <div class="column6-8"><textarea id="column6-8-textarea"></textarea></div>
            <div class="column6-9"><textarea id="column6-9-textarea"></textarea></div>
        </div>
        <div class="column7">
            <div class="column7-1"><textarea id="column7-1-textarea"></textarea></div>
            <div class="column7-2"><textarea id="column7-2-textarea"></textarea></div>
            <div class="column7-3"><textarea id="column7-3-textarea"></textarea></div>
            <div class="column7-4"><textarea id="column7-4-textarea"></textarea></div>
            <div class="column7-5"><textarea id="column7-5-textarea"></textarea></div>
            <div class="column7-6"><textarea id="column7-6-textarea"></textarea></div>
            <div class="column7-7"><textarea id="column7-7-textarea"></textarea></div>
            <div class="column7-8"><textarea id="column7-8-textarea"></textarea></div>
            <div class="column7-9"><textarea id="column7-9-textarea"></textarea></div>
        </div>
        <div class="column8">
            <div class="column8-1"><textarea id="column8-1-textarea"></textarea></div>
            <div class="column8-2"><textarea id="column8-2-textarea"></textarea></div>
            <div class="column8-3"><textarea id="column8-3-textarea"></textarea></div>
            <div class="column8-4"><textarea id="column8-4-textarea"></textarea></div>
            <div class="column8-5"><textarea id="column8-5-textarea"></textarea></div>
            <div class="column8-6"><textarea id="column8-6-textarea"></textarea></div>
            <div class="column8-7"><textarea id="column8-7-textarea"></textarea></div>
            <div class="column8-8"><textarea id="column8-8-textarea"></textarea></div>
            <div class="column8-9"><textarea id="column8-9-textarea"></textarea></div>
        </div>
        <div class="column9">
            <div class="column9-1"><textarea id="column9-1-textarea"></textarea></div>
            <div class="column9-2"><textarea id="column9-2-textarea"></textarea></div>
            <div class="column9-3"><textarea id="column9-3-textarea"></textarea></div>
            <div class="column9-4"><textarea id="column9-4-textarea"></textarea></div>
            <div class="column9-5"><textarea id="column9-5-textarea"></textarea></div>
            <div class="column9-6"><textarea id="column9-6-textarea"></textarea></div>
            <div class="column9-7"><textarea id="column9-7-textarea"></textarea></div>
            <div class="column9-8"><textarea id="column9-8-textarea"></textarea></div>
            <div class="column9-9"><textarea id="column9-9-textarea"></textarea></div>
        </div>
    </div>
    <a href="#" onclick="deletelocalstrage()">クリア</a>
</body>
</html>

mandara.css


body{
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
/*
body * {
  border : 1px solid #CCCCCC;
}
*/
.title{
  text-align:center;
}
div[class^="column1-"] {
  border : 1px solid #808080;
  background-color: #b0c4de;
}
div[class^="column2-"] {
  border : 1px solid #808080;
  background-color: #7fffd4;
}
div[class^="column3-"] {
  border : 1px solid #808080;
  background-color: #fffacd;
}
div[class^="column4-"] {
  border : 1px solid #808080;
  background-color: #add8e6;
}
div[class^="column5-"] {
  border : 1px solid #808080;
  background-color: aqua;
}
div[class^="column5-1"] {
  background-color: #b0c4de;
}
div[class^="column5-2"] {
  background-color: #7fffd4;
}
div[class^="column5-3"] {
  background-color: #fffacd;
}
div[class^="column5-4"] {
  background-color: #add8e6;
}
div[class^="column5-6"] {
  background-color: #dda0dd;
}
div[class^="column5-7"] {
  background-color: #ffe4e1;
}
div[class^="column5-8"] {
  background-color: #e9967a;
}
div[class^="column5-9"] {
  background-color: #fff8dc;
}

div[class^="column6-"] {
  border : 1px solid #808080;
  background-color: #dda0dd;
}
div[class^="column7-"] {
  border : 1px solid #808080;
  background-color: #ffe4e1;
}
div[class^="column8-"] {
  border : 1px solid #808080;
  background-color: #e9967a;
}
div[class^="column9-"] {
  border : 1px solid #808080;
  background-color: #fff8dc;
}
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 30vh 30vh 30vh;
  grid-template-areas: "column1 column2 column3" "column4 center-column5 column6" "column7 column8 column9";
}

.column1 {
  grid-area: column1;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column1-1 column1-2 column1-3" "column1-4 column1-5 column1-6" "column1-7 column1-8 column1-9";
  margin: auto;
}

.column2 {
  grid-area: column2;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column2-1 column2-2 column2-3" "column2-4 column2-5 column2-6" "column2-7 column2-8 column2-9";
  margin: auto;
}

.column3 {
  grid-area: column3;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column3-1 column3-2 column3-3" "column3-4 column3-5 column3-6" "column3-7 column3-8 column3-9";
  margin: auto;
}

.column4 {
  grid-area: column4;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column4-1 column4-2 column4-3" "column4-4 column4-5 column4-6" "column4-7 column4-8 column4-9";
  margin: auto;
}

.center-column5 { 
  grid-area: center-column5;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column5-1 column5-2 column5-3" "column5-4 column5-5 column5-6" "column5-7 column5-8 column5-9";
  margin: auto;
}

.column6 {
  grid-area: column6;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column6-1 column6-2 column6-3" "column6-4 column6-5 column6-6" "column6-7 column6-8 column6-9";
  margin: auto;
}

.column7 {
  grid-area: column7;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column7-1 column7-2 column7-3" "column7-4 column7-5 column7-6" "column7-7 column7-8 column7-9";
  margin: auto;
}

.column8 {
  grid-area: column8;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column8-1 column8-2 column8-3" "column8-4 column8-5 column8-6" "column8-7 column8-8 column8-9";
  margin: auto;
}

.column9 {
  grid-area: column9;
  display: grid;
  grid-auto-columns: 33%;
  grid-auto-rows: 9.5vh;
  grid-template-areas: "column9-1 column9-2 column9-3" "column9-4 column9-5 column9-6" "column9-7 column9-8 column9-9";
  margin: auto;
} 
textarea{
  width: 90%;
  height: 90%;
  text-align:center;
  border:none;
  background-color: transparent;
}

mandara.js

/**
   *起動時localstrageから値を取得
   */
window.onload = function () {
  var textvalue = localStorage.getItem('tiltle-textarea');
  //値がある場合
  if (textvalue) {
    document.getElementById('tiltle-textarea').value = textvalue;
  } else {
    document.getElementById('tiltle-textarea').value = "マンダラチャートタイトル変更可能";
  }
  document.getElementById('column1-1-textarea').value = localStorage.getItem('column1-1-textarea');
  document.getElementById('column1-2-textarea').value = localStorage.getItem('column1-2-textarea');
  document.getElementById('column1-3-textarea').value = localStorage.getItem('column1-3-textarea');
  document.getElementById('column1-4-textarea').value = localStorage.getItem('column1-4-textarea');
  document.getElementById('column1-5-textarea').value = localStorage.getItem('column1-5-textarea');
  document.getElementById('column1-6-textarea').value = localStorage.getItem('column1-6-textarea');
  document.getElementById('column1-7-textarea').value = localStorage.getItem('column1-7-textarea');
  document.getElementById('column1-8-textarea').value = localStorage.getItem('column1-8-textarea');
  document.getElementById('column1-9-textarea').value = localStorage.getItem('column1-9-textarea');

  document.getElementById('column2-1-textarea').value = localStorage.getItem('column2-1-textarea');
  document.getElementById('column2-2-textarea').value = localStorage.getItem('column2-2-textarea');
  document.getElementById('column2-3-textarea').value = localStorage.getItem('column2-3-textarea');
  document.getElementById('column2-4-textarea').value = localStorage.getItem('column2-4-textarea');
  document.getElementById('column2-5-textarea').value = localStorage.getItem('column2-5-textarea');
  document.getElementById('column2-6-textarea').value = localStorage.getItem('column2-6-textarea');
  document.getElementById('column2-7-textarea').value = localStorage.getItem('column2-7-textarea');
  document.getElementById('column2-8-textarea').value = localStorage.getItem('column2-8-textarea');
  document.getElementById('column2-9-textarea').value = localStorage.getItem('column2-9-textarea');

  document.getElementById('column3-1-textarea').value = localStorage.getItem('column3-1-textarea');
  document.getElementById('column3-2-textarea').value = localStorage.getItem('column3-2-textarea');
  document.getElementById('column3-3-textarea').value = localStorage.getItem('column3-3-textarea');
  document.getElementById('column3-4-textarea').value = localStorage.getItem('column3-4-textarea');
  document.getElementById('column3-5-textarea').value = localStorage.getItem('column3-5-textarea');
  document.getElementById('column3-6-textarea').value = localStorage.getItem('column3-6-textarea');
  document.getElementById('column3-7-textarea').value = localStorage.getItem('column3-7-textarea');
  document.getElementById('column3-8-textarea').value = localStorage.getItem('column3-8-textarea');
  document.getElementById('column3-9-textarea').value = localStorage.getItem('column3-9-textarea');

  document.getElementById('column4-1-textarea').value = localStorage.getItem('column4-1-textarea');
  document.getElementById('column4-2-textarea').value = localStorage.getItem('column4-2-textarea');
  document.getElementById('column4-3-textarea').value = localStorage.getItem('column4-3-textarea');
  document.getElementById('column4-4-textarea').value = localStorage.getItem('column4-4-textarea');
  document.getElementById('column4-5-textarea').value = localStorage.getItem('column4-5-textarea');
  document.getElementById('column4-6-textarea').value = localStorage.getItem('column4-6-textarea');
  document.getElementById('column4-7-textarea').value = localStorage.getItem('column4-7-textarea');
  document.getElementById('column4-8-textarea').value = localStorage.getItem('column4-8-textarea');
  document.getElementById('column4-9-textarea').value = localStorage.getItem('column4-9-textarea');

  document.getElementById('column5-1-textarea').value = localStorage.getItem('column5-1-textarea');
  document.getElementById('column5-2-textarea').value = localStorage.getItem('column5-2-textarea');
  document.getElementById('column5-3-textarea').value = localStorage.getItem('column5-3-textarea');
  document.getElementById('column5-4-textarea').value = localStorage.getItem('column5-4-textarea');
  document.getElementById('column5-5-textarea').value = localStorage.getItem('column5-5-textarea');
  document.getElementById('column5-6-textarea').value = localStorage.getItem('column5-6-textarea');
  document.getElementById('column5-7-textarea').value = localStorage.getItem('column5-7-textarea');
  document.getElementById('column5-8-textarea').value = localStorage.getItem('column5-8-textarea');
  document.getElementById('column5-9-textarea').value = localStorage.getItem('column5-9-textarea');

  document.getElementById('column6-1-textarea').value = localStorage.getItem('column6-1-textarea');
  document.getElementById('column6-2-textarea').value = localStorage.getItem('column6-2-textarea');
  document.getElementById('column6-3-textarea').value = localStorage.getItem('column6-3-textarea');
  document.getElementById('column6-4-textarea').value = localStorage.getItem('column6-4-textarea');
  document.getElementById('column6-5-textarea').value = localStorage.getItem('column6-5-textarea');
  document.getElementById('column6-6-textarea').value = localStorage.getItem('column6-6-textarea');
  document.getElementById('column6-7-textarea').value = localStorage.getItem('column6-7-textarea');
  document.getElementById('column6-8-textarea').value = localStorage.getItem('column6-8-textarea');
  document.getElementById('column6-9-textarea').value = localStorage.getItem('column6-9-textarea');

  document.getElementById('column7-1-textarea').value = localStorage.getItem('column7-1-textarea');
  document.getElementById('column7-2-textarea').value = localStorage.getItem('column7-2-textarea');
  document.getElementById('column7-3-textarea').value = localStorage.getItem('column7-3-textarea');
  document.getElementById('column7-4-textarea').value = localStorage.getItem('column7-4-textarea');
  document.getElementById('column7-5-textarea').value = localStorage.getItem('column7-5-textarea');
  document.getElementById('column7-6-textarea').value = localStorage.getItem('column7-6-textarea');
  document.getElementById('column7-7-textarea').value = localStorage.getItem('column7-7-textarea');
  document.getElementById('column7-8-textarea').value = localStorage.getItem('column7-8-textarea');
  document.getElementById('column7-9-textarea').value = localStorage.getItem('column7-9-textarea');

  document.getElementById('column8-1-textarea').value = localStorage.getItem('column8-1-textarea');
  document.getElementById('column8-2-textarea').value = localStorage.getItem('column8-2-textarea');
  document.getElementById('column8-3-textarea').value = localStorage.getItem('column8-3-textarea');
  document.getElementById('column8-4-textarea').value = localStorage.getItem('column8-4-textarea');
  document.getElementById('column8-5-textarea').value = localStorage.getItem('column8-5-textarea');
  document.getElementById('column8-6-textarea').value = localStorage.getItem('column8-6-textarea');
  document.getElementById('column8-7-textarea').value = localStorage.getItem('column8-7-textarea');
  document.getElementById('column8-8-textarea').value = localStorage.getItem('column8-8-textarea');
  document.getElementById('column8-9-textarea').value = localStorage.getItem('column8-9-textarea');

  document.getElementById('column9-1-textarea').value = localStorage.getItem('column9-1-textarea');
  document.getElementById('column9-2-textarea').value = localStorage.getItem('column9-2-textarea');
  document.getElementById('column9-3-textarea').value = localStorage.getItem('column9-3-textarea');
  document.getElementById('column9-4-textarea').value = localStorage.getItem('column9-4-textarea');
  document.getElementById('column9-5-textarea').value = localStorage.getItem('column9-5-textarea');
  document.getElementById('column9-6-textarea').value = localStorage.getItem('column9-6-textarea');
  document.getElementById('column9-7-textarea').value = localStorage.getItem('column9-7-textarea');
  document.getElementById('column9-8-textarea').value = localStorage.getItem('column9-8-textarea');
  document.getElementById('column9-9-textarea').value = localStorage.getItem('column9-9-textarea');
}
/**
* ブラウザフォーカスアウト時localstrage保存処理
*/
window.onbeforeunload = function () {
  //テキストエリアから値を取得
  var textareavalue = document.getElementById('tiltle-textarea').value;
  localStorage.setItem('tiltle-textarea', textareavalue);

  textareavalue = document.getElementById('column1-1-textarea').value;
  localStorage.setItem('column1-1-textarea', textareavalue);
  textareavalue = document.getElementById('column1-2-textarea').value;
  localStorage.setItem('column1-2-textarea', textareavalue);
  textareavalue = document.getElementById('column1-3-textarea').value;
  localStorage.setItem('column1-3-textarea', textareavalue);
  textareavalue = document.getElementById('column1-4-textarea').value;
  localStorage.setItem('column1-4-textarea', textareavalue);
  textareavalue = document.getElementById('column1-5-textarea').value;
  localStorage.setItem('column1-5-textarea', textareavalue);
  textareavalue = document.getElementById('column1-6-textarea').value;
  localStorage.setItem('column1-6-textarea', textareavalue);
  textareavalue = document.getElementById('column1-7-textarea').value;
  localStorage.setItem('column1-7-textarea', textareavalue);
  textareavalue = document.getElementById('column1-8-textarea').value;
  localStorage.setItem('column1-8-textarea', textareavalue);
  textareavalue = document.getElementById('column1-9-textarea').value;
  localStorage.setItem('column1-9-textarea', textareavalue);

  textareavalue = document.getElementById('column2-1-textarea').value;
  localStorage.setItem('column2-1-textarea', textareavalue);
  textareavalue = document.getElementById('column2-2-textarea').value;
  localStorage.setItem('column2-2-textarea', textareavalue);
  textareavalue = document.getElementById('column2-3-textarea').value;
  localStorage.setItem('column2-3-textarea', textareavalue);
  textareavalue = document.getElementById('column2-4-textarea').value;
  localStorage.setItem('column2-4-textarea', textareavalue);
  textareavalue = document.getElementById('column2-5-textarea').value;
  localStorage.setItem('column2-5-textarea', textareavalue);
  textareavalue = document.getElementById('column2-6-textarea').value;
  localStorage.setItem('column2-6-textarea', textareavalue);
  textareavalue = document.getElementById('column2-7-textarea').value;
  localStorage.setItem('column2-7-textarea', textareavalue);
  textareavalue = document.getElementById('column2-8-textarea').value;
  localStorage.setItem('column2-8-textarea', textareavalue);
  textareavalue = document.getElementById('column2-9-textarea').value;
  localStorage.setItem('column2-9-textarea', textareavalue);

  textareavalue = document.getElementById('column3-1-textarea').value;
  localStorage.setItem('column3-1-textarea', textareavalue);
  textareavalue = document.getElementById('column3-2-textarea').value;
  localStorage.setItem('column3-2-textarea', textareavalue);
  textareavalue = document.getElementById('column3-3-textarea').value;
  localStorage.setItem('column3-3-textarea', textareavalue);
  textareavalue = document.getElementById('column3-4-textarea').value;
  localStorage.setItem('column3-4-textarea', textareavalue);
  textareavalue = document.getElementById('column3-5-textarea').value;
  localStorage.setItem('column3-5-textarea', textareavalue);
  textareavalue = document.getElementById('column3-6-textarea').value;
  localStorage.setItem('column3-6-textarea', textareavalue);
  textareavalue = document.getElementById('column3-7-textarea').value;
  localStorage.setItem('column3-7-textarea', textareavalue);
  textareavalue = document.getElementById('column3-8-textarea').value;
  localStorage.setItem('column3-8-textarea', textareavalue);
  textareavalue = document.getElementById('column3-9-textarea').value;
  localStorage.setItem('column3-9-textarea', textareavalue);

  textareavalue = document.getElementById('column4-1-textarea').value;
  localStorage.setItem('column4-1-textarea', textareavalue);
  textareavalue = document.getElementById('column4-2-textarea').value;
  localStorage.setItem('column4-2-textarea', textareavalue);
  textareavalue = document.getElementById('column4-3-textarea').value;
  localStorage.setItem('column4-3-textarea', textareavalue);
  textareavalue = document.getElementById('column4-4-textarea').value;
  localStorage.setItem('column4-4-textarea', textareavalue);
  textareavalue = document.getElementById('column4-5-textarea').value;
  localStorage.setItem('column4-5-textarea', textareavalue);
  textareavalue = document.getElementById('column4-6-textarea').value;
  localStorage.setItem('column4-6-textarea', textareavalue);
  textareavalue = document.getElementById('column4-7-textarea').value;
  localStorage.setItem('column4-7-textarea', textareavalue);
  textareavalue = document.getElementById('column4-8-textarea').value;
  localStorage.setItem('column4-8-textarea', textareavalue);
  textareavalue = document.getElementById('column4-9-textarea').value;
  localStorage.setItem('column4-9-textarea', textareavalue);

  textareavalue = document.getElementById('column5-1-textarea').value;
  localStorage.setItem('column5-1-textarea', textareavalue);
  textareavalue = document.getElementById('column5-2-textarea').value;
  localStorage.setItem('column5-2-textarea', textareavalue);
  textareavalue = document.getElementById('column5-3-textarea').value;
  localStorage.setItem('column5-3-textarea', textareavalue);
  textareavalue = document.getElementById('column5-4-textarea').value;
  localStorage.setItem('column5-4-textarea', textareavalue);
  textareavalue = document.getElementById('column5-5-textarea').value;
  localStorage.setItem('column5-5-textarea', textareavalue);
  textareavalue = document.getElementById('column5-6-textarea').value;
  localStorage.setItem('column5-6-textarea', textareavalue);
  textareavalue = document.getElementById('column5-7-textarea').value;
  localStorage.setItem('column5-7-textarea', textareavalue);
  textareavalue = document.getElementById('column5-8-textarea').value;
  localStorage.setItem('column5-8-textarea', textareavalue);
  textareavalue = document.getElementById('column5-9-textarea').value;
  localStorage.setItem('column5-9-textarea', textareavalue);

  textareavalue = document.getElementById('column6-1-textarea').value;
  localStorage.setItem('column6-1-textarea', textareavalue);
  textareavalue = document.getElementById('column6-2-textarea').value;
  localStorage.setItem('column6-2-textarea', textareavalue);
  textareavalue = document.getElementById('column6-3-textarea').value;
  localStorage.setItem('column6-3-textarea', textareavalue);
  textareavalue = document.getElementById('column6-4-textarea').value;
  localStorage.setItem('column6-4-textarea', textareavalue);
  textareavalue = document.getElementById('column6-5-textarea').value;
  localStorage.setItem('column6-5-textarea', textareavalue);
  textareavalue = document.getElementById('column6-6-textarea').value;
  localStorage.setItem('column6-6-textarea', textareavalue);
  textareavalue = document.getElementById('column6-7-textarea').value;
  localStorage.setItem('column6-7-textarea', textareavalue);
  textareavalue = document.getElementById('column6-8-textarea').value;
  localStorage.setItem('column6-8-textarea', textareavalue);
  textareavalue = document.getElementById('column6-9-textarea').value;
  localStorage.setItem('column6-9-textarea', textareavalue);

  textareavalue = document.getElementById('column7-1-textarea').value;
  localStorage.setItem('column7-1-textarea', textareavalue);
  textareavalue = document.getElementById('column7-2-textarea').value;
  localStorage.setItem('column7-2-textarea', textareavalue);
  textareavalue = document.getElementById('column7-3-textarea').value;
  localStorage.setItem('column7-3-textarea', textareavalue);
  textareavalue = document.getElementById('column7-4-textarea').value;
  localStorage.setItem('column7-4-textarea', textareavalue);
  textareavalue = document.getElementById('column7-5-textarea').value;
  localStorage.setItem('column7-5-textarea', textareavalue);
  textareavalue = document.getElementById('column7-6-textarea').value;
  localStorage.setItem('column7-6-textarea', textareavalue);
  textareavalue = document.getElementById('column7-7-textarea').value;
  localStorage.setItem('column7-7-textarea', textareavalue);
  textareavalue = document.getElementById('column7-8-textarea').value;
  localStorage.setItem('column7-8-textarea', textareavalue);
  textareavalue = document.getElementById('column7-9-textarea').value;
  localStorage.setItem('column7-9-textarea', textareavalue);

  textareavalue = document.getElementById('column8-1-textarea').value;
  localStorage.setItem('column8-1-textarea', textareavalue);
  textareavalue = document.getElementById('column8-2-textarea').value;
  localStorage.setItem('column8-2-textarea', textareavalue);
  textareavalue = document.getElementById('column8-3-textarea').value;
  localStorage.setItem('column8-3-textarea', textareavalue);
  textareavalue = document.getElementById('column8-4-textarea').value;
  localStorage.setItem('column8-4-textarea', textareavalue);
  textareavalue = document.getElementById('column8-5-textarea').value;
  localStorage.setItem('column8-5-textarea', textareavalue);
  textareavalue = document.getElementById('column8-6-textarea').value;
  localStorage.setItem('column8-6-textarea', textareavalue);
  textareavalue = document.getElementById('column8-7-textarea').value;
  localStorage.setItem('column8-7-textarea', textareavalue);
  textareavalue = document.getElementById('column8-8-textarea').value;
  localStorage.setItem('column8-8-textarea', textareavalue);
  textareavalue = document.getElementById('column8-9-textarea').value;
  localStorage.setItem('column8-9-textarea', textareavalue);

  textareavalue = document.getElementById('column9-1-textarea').value;
  localStorage.setItem('column9-1-textarea', textareavalue);
  textareavalue = document.getElementById('column9-2-textarea').value;
  localStorage.setItem('column9-2-textarea', textareavalue);
  textareavalue = document.getElementById('column9-3-textarea').value;
  localStorage.setItem('column9-3-textarea', textareavalue);
  textareavalue = document.getElementById('column9-4-textarea').value;
  localStorage.setItem('column9-4-textarea', textareavalue);
  textareavalue = document.getElementById('column9-5-textarea').value;
  localStorage.setItem('column9-5-textarea', textareavalue);
  textareavalue = document.getElementById('column9-6-textarea').value;
  localStorage.setItem('column9-6-textarea', textareavalue);
  textareavalue = document.getElementById('column9-7-textarea').value;
  localStorage.setItem('column9-7-textarea', textareavalue);
  textareavalue = document.getElementById('column9-8-textarea').value;
  localStorage.setItem('column9-8-textarea', textareavalue);
  textareavalue = document.getElementById('column9-9-textarea').value;
  localStorage.setItem('column9-9-textarea', textareavalue);
}
/**
* localstrageクリア処理
*/
function deletelocalstrage() {
  localStorage.removeItem('tiltle-textarea');
  document.getElementById('tiltle-textarea').value = '';

  localStorage.removeItem('column1-1-textarea');
  document.getElementById('column1-1-textarea').value = '';
  localStorage.removeItem('column1-2-textarea');
  document.getElementById('column1-2-textarea').value = '';
  localStorage.removeItem('column1-3-textarea');
  document.getElementById('column1-3-textarea').value = '';
  localStorage.removeItem('column1-4-textarea');
  document.getElementById('column1-4-textarea').value = '';
  localStorage.removeItem('column1-5-textarea');
  document.getElementById('column1-5-textarea').value = '';
  localStorage.removeItem('column1-6-textarea');
  document.getElementById('column1-6-textarea').value = '';
  localStorage.removeItem('column1-7-textarea');
  document.getElementById('column1-7-textarea').value = '';
  localStorage.removeItem('column1-8-textarea');
  document.getElementById('column1-8-textarea').value = '';
  localStorage.removeItem('column1-9-textarea');
  document.getElementById('column1-9-textarea').value = '';

  localStorage.removeItem('column2-1-textarea');
  document.getElementById('column2-1-textarea').value = '';
  localStorage.removeItem('column2-2-textarea');
  document.getElementById('column2-2-textarea').value = '';
  localStorage.removeItem('column2-3-textarea');
  document.getElementById('column2-3-textarea').value = '';
  localStorage.removeItem('column2-4-textarea');
  document.getElementById('column2-4-textarea').value = '';
  localStorage.removeItem('column2-5-textarea');
  document.getElementById('column2-5-textarea').value = '';
  localStorage.removeItem('column2-6-textarea');
  document.getElementById('column2-6-textarea').value = '';
  localStorage.removeItem('column2-7-textarea');
  document.getElementById('column2-7-textarea').value = '';
  localStorage.removeItem('column2-8-textarea');
  document.getElementById('column2-8-textarea').value = '';
  localStorage.removeItem('column2-9-textarea');
  document.getElementById('column2-9-textarea').value = '';

  localStorage.removeItem('column3-1-textarea');
  document.getElementById('column3-1-textarea').value = '';
  localStorage.removeItem('column3-2-textarea');
  document.getElementById('column3-2-textarea').value = '';
  localStorage.removeItem('column3-3-textarea');
  document.getElementById('column3-3-textarea').value = '';
  localStorage.removeItem('column3-4-textarea');
  document.getElementById('column3-4-textarea').value = '';
  localStorage.removeItem('column3-5-textarea');
  document.getElementById('column3-5-textarea').value = '';
  localStorage.removeItem('column3-6-textarea');
  document.getElementById('column3-6-textarea').value = '';
  localStorage.removeItem('column3-7-textarea');
  document.getElementById('column3-7-textarea').value = '';
  localStorage.removeItem('column3-8-textarea');
  document.getElementById('column3-8-textarea').value = '';
  localStorage.removeItem('column3-9-textarea');
  document.getElementById('column3-9-textarea').value = '';

  localStorage.removeItem('column4-1-textarea');
  document.getElementById('column4-1-textarea').value = '';
  localStorage.removeItem('column4-2-textarea');
  document.getElementById('column4-2-textarea').value = '';
  localStorage.removeItem('column4-3-textarea');
  document.getElementById('column4-3-textarea').value = '';
  localStorage.removeItem('column4-4-textarea');
  document.getElementById('column4-4-textarea').value = '';
  localStorage.removeItem('column4-5-textarea');
  document.getElementById('column4-5-textarea').value = '';
  localStorage.removeItem('column4-6-textarea');
  document.getElementById('column4-6-textarea').value = '';
  localStorage.removeItem('column4-7-textarea');
  document.getElementById('column4-7-textarea').value = '';
  localStorage.removeItem('column4-8-textarea');
  document.getElementById('column4-8-textarea').value = '';
  localStorage.removeItem('column4-9-textarea');
  document.getElementById('column4-9-textarea').value = '';

  localStorage.removeItem('column5-1-textarea');
  document.getElementById('column5-1-textarea').value = '';
  localStorage.removeItem('column5-2-textarea');
  document.getElementById('column5-2-textarea').value = '';
  localStorage.removeItem('column5-3-textarea');
  document.getElementById('column5-3-textarea').value = '';
  localStorage.removeItem('column5-4-textarea');
  document.getElementById('column5-4-textarea').value = '';
  localStorage.removeItem('column5-5-textarea');
  document.getElementById('column5-5-textarea').value = '';
  localStorage.removeItem('column5-6-textarea');
  document.getElementById('column5-6-textarea').value = '';
  localStorage.removeItem('column5-7-textarea');
  document.getElementById('column5-7-textarea').value = '';
  localStorage.removeItem('column5-8-textarea');
  document.getElementById('column5-8-textarea').value = '';
  localStorage.removeItem('column5-9-textarea');
  document.getElementById('column5-9-textarea').value = '';

  localStorage.removeItem('column6-1-textarea');
  document.getElementById('column6-1-textarea').value = '';
  localStorage.removeItem('column6-2-textarea');
  document.getElementById('column6-2-textarea').value = '';
  localStorage.removeItem('column6-3-textarea');
  document.getElementById('column6-3-textarea').value = '';
  localStorage.removeItem('column6-4-textarea');
  document.getElementById('column6-4-textarea').value = '';
  localStorage.removeItem('column6-5-textarea');
  document.getElementById('column6-5-textarea').value = '';
  localStorage.removeItem('column6-6-textarea');
  document.getElementById('column6-6-textarea').value = '';
  localStorage.removeItem('column6-7-textarea');
  document.getElementById('column6-7-textarea').value = '';
  localStorage.removeItem('column6-8-textarea');
  document.getElementById('column6-8-textarea').value = '';
  localStorage.removeItem('column6-9-textarea');
  document.getElementById('column6-9-textarea').value = '';

  localStorage.removeItem('column7-1-textarea');
  document.getElementById('column7-1-textarea').value = '';
  localStorage.removeItem('column7-2-textarea');
  document.getElementById('column7-2-textarea').value = '';
  localStorage.removeItem('column7-3-textarea');
  document.getElementById('column7-3-textarea').value = '';
  localStorage.removeItem('column7-4-textarea');
  document.getElementById('column7-4-textarea').value = '';
  localStorage.removeItem('column7-5-textarea');
  document.getElementById('column7-5-textarea').value = '';
  localStorage.removeItem('column7-6-textarea');
  document.getElementById('column7-6-textarea').value = '';
  localStorage.removeItem('column7-7-textarea');
  document.getElementById('column7-7-textarea').value = '';
  localStorage.removeItem('column7-8-textarea');
  document.getElementById('column7-8-textarea').value = '';
  localStorage.removeItem('column7-9-textarea');
  document.getElementById('column7-9-textarea').value = '';

  localStorage.removeItem('column8-1-textarea');
  document.getElementById('column8-1-textarea').value = '';
  localStorage.removeItem('column8-2-textarea');
  document.getElementById('column8-2-textarea').value = '';
  localStorage.removeItem('column8-3-textarea');
  document.getElementById('column8-3-textarea').value = '';
  localStorage.removeItem('column8-4-textarea');
  document.getElementById('column8-4-textarea').value = '';
  localStorage.removeItem('column8-5-textarea');
  document.getElementById('column8-5-textarea').value = '';
  localStorage.removeItem('column8-6-textarea');
  document.getElementById('column8-6-textarea').value = '';
  localStorage.removeItem('column8-7-textarea');
  document.getElementById('column8-7-textarea').value = '';
  localStorage.removeItem('column8-8-textarea');
  document.getElementById('column8-8-textarea').value = '';
  localStorage.removeItem('column8-9-textarea');
  document.getElementById('column8-9-textarea').value = '';

  localStorage.removeItem('column9-1-textarea');
  document.getElementById('column9-1-textarea').value = '';
  localStorage.removeItem('column9-2-textarea');
  document.getElementById('column9-2-textarea').value = '';
  localStorage.removeItem('column9-3-textarea');
  document.getElementById('column9-3-textarea').value = '';
  localStorage.removeItem('column9-4-textarea');
  document.getElementById('column9-4-textarea').value = '';
  localStorage.removeItem('column9-5-textarea');
  document.getElementById('column9-5-textarea').value = '';
  localStorage.removeItem('column9-6-textarea');
  document.getElementById('column9-6-textarea').value = '';
  localStorage.removeItem('column9-7-textarea');
  document.getElementById('column9-7-textarea').value = '';
  localStorage.removeItem('column9-8-textarea');
  document.getElementById('column9-8-textarea').value = '';
  localStorage.removeItem('column9-9-textarea');
  document.getElementById('column9-9-textarea').value = '';
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

#マンダラチャート の作成方法( #Localstrage 使うから入力値が保存されます)

該当