Как напечатать Specifi c Атрибут данных в .txt

Question

У меня есть сетка css с полями, которые после нажатия изменяют цвет с белого на красный, а затем на зеленый и могут вернуться к исходному состоянию, также у них есть атрибут данных (каждый блок), который изменяется с состояния defaultWhite на defaultRed и defaultGreen в зависимости от нажатия полей. Пока это работает, теперь я хочу напечатать отчет .txt с выборами. Я исследовал и сделал некоторый код, но сейчас он не работает.

Цели:

• После нажатия на кнопку загрузки, получите лист .txt со всеми значения для всех 52 блоков и их данных (по умолчанию, если он красный или зеленый)

readyfunction download(filename, stateData) {
            var element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            element.setAttribute('download', filename);

            element.style.display = 'none';
            document.body.appendChild(element);

            element.click();

            document.body.removeChild(element);
            }

            // Start file download.
            document.getElementById("dwn-btn").addEventListener("click", function(){
            // Generate download of hello.txt file with some content
            var text = document.getElementById("sheW1");
            var stateData = text.getAttribute('data');
            var filename = "Report.txt";
            download(filename, stateData);
            }, false);

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    margin: 0 auto;
    padding: 1em;
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none; 
}

.generalWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: ;
    position:
}

.boxes-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1280px;
    background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
    width: 300px;
    height: 320px;
    font-family: sans-serif, helvetica;
    background-color: white;
    background-color: ;
}

.Title {
    grid-area: Title;
    text-align: center;
    background-color:darkslateblue;
    color: white;
    font-size: 1em;
    padding: 5px 0px;
    font-weight: 600;
}

#sheW1 { grid-area: sheW1;
text-align: center;
}

#sheW2 { grid-area: sheW2;
text-align: center;
}

#sheW3 { grid-area: sheW3;
text-align: center;
}

#sheW4 { grid-area: sheW4;
text-align: center;
}

#sheW5 { grid-area: sheW5;
text-align: center;
}

#sheW6 { grid-area: sheW6;
text-align: center;
}

#sheW7 { grid-area: sheW7;
text-align: center;
}

#sheW8 { grid-area: sheW8;
text-align: center;
}

#sheW9 { grid-area: sheW9;
text-align: center;
}

#sheW10 { grid-area: sheW10;
text-align: center;
}

#sheW11 { grid-area: sheW11;
text-align: center;
}

#sheW12 { grid-area: sheW12;
text-align: center;
}

#sheW13 { grid-area: sheW13;
text-align: center;
}

#sheW14 { grid-area: sheW14;
text-align: center;
}

#sheW15 { grid-area: sheW15;
text-align: center;
}

#sheW16 { grid-area: sheW16;
text-align: center;
}

#sheW17 { grid-area: sheW17;
text-align: center;
}

#sheW18 { grid-area: sheW18;
text-align: center;
}

#sheW19 { grid-area: sheW19;
text-align: center;
}

#sheW20 { grid-area: sheW20;
text-align: center;
}

#sheW21 { grid-area: sheW21;
text-align: center;}

#sheW22 { grid-area: sheW22;
text-align: center;
}

#sheW23 { grid-area: sheW23;
text-align: center;
}

#sheW24 { grid-area: sheW24;
text-align: center;
}

#sheW25 { grid-area: sheW25;
text-align: center;}

#sheW26 { grid-area: sheW26;
text-align: center;
}

#sheW27 { grid-area: sheW27;
text-align: center;
}

#sheW28 { grid-area: sheW28;
text-align: center;
}

#sheW29 { grid-area: sheW29;
text-align: center;
}

#sheW30 { grid-area: sheW30;
text-align: center;
}

#sheW31 { grid-area: sheW31;
text-align: center;
}

#sheW32 { grid-area: sheW32;
text-align: center;
}

#sheW33 { grid-area: sheW33;
text-align: center;
}

#sheW34 { grid-area: sheW34;
text-align: center;
}

#sheW35 { grid-area: sheW35;
text-align: center;
}

#sheW36 { grid-area: sheW36;
text-align: center;
}

#sheW37 { grid-area: sheW37;
text-align: center;
}

#sheW38 { grid-area: sheW38;
text-align: center;
}

#sheW39 { grid-area: sheW39;
text-align: center;
}

#sheW40 { grid-area: sheW40;
text-align: center;
}

#sheW41 { grid-area: sheW41;
text-align: center;
}

#sheW42 { grid-area: sheW42;
text-align: center;
}

#sheW43 { grid-area: sheW43;
text-align: center;
}

#sheW44 { grid-area: sheW44;
text-align: center;
}

#sheW45 { grid-area: sheW45;
text-align: center;
}

#sheW46 { grid-area: sheW46;
text-align: center;
}

#sheW47 { grid-area: sheW47;
text-align: center;
}

#sheW48 { grid-area: sheW48;
text-align: center;
}

#sheW49 { grid-area: sheW49;
text-align: center;
}

#sheW50 { grid-area: sheW50;
text-align: center;
}

#sheW51 { grid-area: sheW51;
text-align: center;
}

#sheW52 { grid-area: sheW52;
text-align: center;
}

.Letter { grid-area: Letter;
border: 1px solid darkgrey;
text-align: center;
}

.letterCenter {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 200px;
    color: darkslateblue;
}

.changeColor {
    border: 1px solid darkgrey;
    font-size: 11px;
    display: flex;
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: darkgrey;
    font-weight: bold;
}

.changeColor {
    cursor: pointer;
}

.enableHover:hover {
    background-color:darkgrey;
    color: white;
}

.changeColor.green {
    background-color:forestgreen;
    color: white;
}

.changeColor.red {
    background-color:crimson;
    color: white;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }

  #sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  #sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  #sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  #sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  #sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  #sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  #sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  #sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  #sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  #sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  #sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  #sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  #sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  #sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  #sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  #sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  #sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  #sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  #sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  #sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  #sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  #sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  #sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  #sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  #sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }

}

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>S test</title>
        <meta name="description" content="S test">
        <link rel="stylesheet" href="styles/main.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
        <script>
        $(document).ready(function(){
        const changeColor = document.getElementsByClassName('changeColor');

        Array.from(changeColor).forEach(function(element) {
        element.addEventListener('click', function(event) {
        item = event.target;

        if (item.classList.contains('green')) {
            item.classList.remove('green');
            item.classList.add('red');
            item.setAttribute('data', 'defaultRed');
        } else if(item.classList.contains('red')) {
            item.classList.remove('red');
            item.classList.add('enableHover');
            item.setAttribute('data', 'defaultWhite');
        } else {
            item.classList.add('green');
            item.classList.remove('enableHover');
            item.setAttribute('data', 'defaultGreen');
        }
        });
        });
        });
        </script>
        <script type="text/javascript" src="js/printReport.js"></script>
    </head>
    <body>
   
    <div class="generalWrapper">  
      <div class="boxes-container">  
        <div class="grid-container">
          <div class="Title">SHE</div>
          <div class="changeColor enableHover" id="sheW1" data="defaultWhite">1</div>
          <div class="changeColor enableHover" id="sheW2" data="defaultWhite">2</div>
          <div class="changeColor enableHover" id="sheW3" data="defaultWhite">3</div>
          <div class="changeColor enableHover" id="sheW4" data="defaultWhite">4</div>
          <div class="changeColor enableHover" id="sheW5" data="defaultWhite">5</div>
          <div class="changeColor enableHover" id="sheW6" data="defaultWhite">6</div>
          <div class="changeColor enableHover" id="sheW7" data="defaultWhite">7</div>
          <div class="changeColor enableHover" id="sheW8" data="defaultWhite">8</div>
          <div class="changeColor enableHover" id="sheW9" data="defaultWhite">9</div>
          <div class="changeColor enableHover" id="sheW10" data="defaultWhite">10</div>
          <div class="changeColor enableHover" id="sheW11" data="defaultWhite">11</div>
          <div class="changeColor enableHover" id="sheW12" data="defaultWhite">12</div>
          <div class="changeColor enableHover" id="sheW13" data="defaultWhite">13</div>
          <div class="changeColor enableHover" id="sheW14" data="defaultWhite">14</div>
          <div class="changeColor enableHover" id="sheW15" data="defaultWhite">15</div>
          <div class="changeColor enableHover" id="sheW16" data="defaultWhite">16</div>
          <div class="changeColor enableHover" id="sheW17" data="defaultWhite">17</div>
          <div class="changeColor enableHover" id="sheW18" data="defaultWhite">18</div>
          <div class="changeColor enableHover" id="sheW19" data="defaultWhite">19</div>
          <div class="changeColor enableHover" id="sheW20" data="defaultWhite">20</div>
          <div class="changeColor enableHover" id="sheW21" data="defaultWhite">21</div>
          <div class="changeColor enableHover" id="sheW22" data="defaultWhite">22</div>
          <div class="changeColor enableHover" id="sheW23" data="defaultWhite">23</div>
          <div class="changeColor enableHover" id="sheW24" data="defaultWhite">24</div>
          <div class="changeColor enableHover" id="sheW25" data="defaultWhite">25</div>
          <div class="changeColor enableHover" id="sheW26" data="defaultWhite">26</div>
          <div class="changeColor enableHover" id="sheW27" data="defaultWhite">27</div>
          <div class="changeColor enableHover" id="sheW28" data="defaultWhite">28</div>
          <div class="changeColor enableHover" id="sheW29" data="defaultWhite">29</div>
          <div class="changeColor enableHover" id="sheW30" data="defaultWhite">30</div>
          <div class="changeColor enableHover" id="sheW31" data="defaultWhite">31</div>
          <div class="changeColor enableHover" id="sheW32" data="defaultWhite">32</div>
          <div class="changeColor enableHover" id="sheW33" data="defaultWhite">33</div>
          <div class="changeColor enableHover" id="sheW34" data="defaultWhite">34</div>
          <div class="changeColor enableHover" id="sheW35" data="defaultWhite">35</div>
          <div class="changeColor enableHover" id="sheW36" data="defaultWhite">36</div>
          <div class="changeColor enableHover" id="sheW37" data="defaultWhite">37</div>
          <div class="changeColor enableHover" id="sheW38" data="defaultWhite">38</div>
          <div class="changeColor enableHover" id="sheW39" data="defaultWhite">39</div>
          <div class="changeColor enableHover" id="sheW40" data="defaultWhite">40</div>
          <div class="changeColor enableHover" id="sheW41" data="defaultWhite">41</div>
          <div class="changeColor enableHover" id="sheW42" data="defaultWhite">42</div>
          <div class="changeColor enableHover" id="sheW43" data="defaultWhite">43</div>
          <div class="changeColor enableHover" id="sheW44" data="defaultWhite">44</div>
          <div class="changeColor enableHover" id="sheW45" data="defaultWhite">45</div>
          <div class="changeColor enableHover" id="sheW46" data="defaultWhite">46</div>
          <div class="changeColor enableHover" id="sheW47" data="defaultWhite">47</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW49" data="defaultWhite">49</div>
          <div class="changeColor enableHover" id="sheW50" data="defaultWhite">50</div>
          <div class="changeColor enableHover" id="sheW51" data="defaultWhite">51</div>
          <div class="changeColor enableHover" id="sheW52" data="defaultWhite">52</div>
          <div class="Letter">
            <div class="letterCenter">S</div>
          </div>
        </div>
      </div> 
    
    <input type="button" id="dwn-btn" value="Download Report"/>
    </div>
       
    </body>
</html>

Может ли кто-нибудь направить меня?