Estoy tratando de corregir este error, pero si lo soluciono, tengo otro error con

var   save_button = document.getElementById('overlayBtn');
if(save_button){
    save_button.addEventListener('click', updateOutput);}

Recibí el siguiente error

 main.js:297 Uncaught TypeError: Cannot set property 'textContent' of null


//local storage savebtn
var note_textarea = document.querySelector('#TE');
var result_textarea = document.querySelector('#result');
var save_button = document.getElementById('SaveBtn');
var display = document.querySelector('#display');
var bell = document.getElementById('notification');



var   save_button = document.getElementById('overlayBtn');
if(save_button){
    save_button.addEventListener('click', updateOutput);}


result_textarea.textContent = localStorage.getItem('content_result');
note_textarea.textContent = localStorage.getItem('content_textarea');
display.value = localStorage.getItem('content_display');
bell.textContent = localStorage.getItem('bell_count'); 
function updateOutput() {
      Notiflix.Notify.Success('Text  has been saved ');
      localStorage.setItem('content_textarea', note_textarea.value);
      localStorage.setItem('content_result', result_textarea.value);
      localStorage.setItem('content_display', display.value);
      localStorage.setItem('bell_count', bell.textContent);

    }

Este es el código con el que tengo problemas (arriba) Solo quiero obtener después de presionar el botón Guardar todo el contenido guardar.

CÓDIGO COMPLETO

  function myFunction() {
    var x = document.getElementById("Cal");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
  var queue = []; // store key history

  function getHistory() {
    var str = ''
    for (var i = 0; i < queue.length; i++)
      str += queue[i];
    return str;
  }
  // display functions
  function runLB() {
    document.case.display.value += "("
    queue.push('(')
  }

  function runRB() {
    document.case.display.value += ")"
    queue.push(')')
  }

  function run1() {
    document.case.display.value += "1"
    queue.push('1')
  };

  function run2() {
    document.case.display.value += "2"
    queue.push('2')
  };

  function run3() {
    document.case.display.value += "3"
    queue.push('3')
  };

  function run4() {
    document.case.display.value += "4"
    queue.push('4')
  };

  function run5() {
    document.case.display.value += "5"
    queue.push('5')
  };

  function run6() {
    document.case.display.value += "6"
    queue.push('6')
  };

  function run7() {
    document.case.display.value += "7"
    queue.push('7')
  };

  function run8() {
    document.case.display.value += "8"
    queue.push('8')
  };

  function run9() {
    document.case.display.value += "9"
    queue.push('9')
  };

  function run0() {
    document.case.display.value += "0"
    queue.push('0')
  };

  function runPlus() {
    document.case.display.value += "+"
    queue.push('+')
  };

  function runMinus() {
    document.case.display.value += "-"
    queue.push('-')
  };

  function runDivide() {
    document.case.display.value += "/"
    queue.push('/')
  };

  function runMultiply() {
    document.case.display.value += "*"
    queue.push('*')
  };

  function runComma() {
    document.case.display.value += "."
    queue.push('.')
  };

  function runBack() {
    var val = document.case.display.value.slice(0, -1);
    document.case.display.value = val;

    if (queue.length > 1) {
      // pop last element from the array
      let last = queue.pop();
      // check if element length is more than 1
      if (last.length > 1) {
        // remove last character from string and push to the array again
        queue.push(last.slice(0, -1))
      }
    }
  };

  function testLength() {

    if (document.case.display.value.length > 16 && document.case.display.value.length < 21) {


      document.getElementById("display").style.fontWeight = "550";
      document.getElementById("display").style.fontSize = "2em";
    } else if (document.case.display.value.length == 16 || document.case.display.value.length == 21) {
      Notiflix.Notify.Info('Because you have a lot of charatchers font size is smaller');



    } else if (document.case.display.value.length > 25) {
      var str = document.case.display.value.length
      Notiflix.Notify.Warning('Max characters you can see is 28 ');

      Notiflix.Notify.Failure('Number of your characters' + str);


      document.getElementById("display").style.fontWeight = "500";
      document.getElementById("display").style.fontSize = "1.5em";
    } else {
      document.getElementById("display").style.fontWeight = "500";
      document.getElementById("display").style.fontSize = "2.5em";
    }
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var numbers = document.querySelectorAll(".digit, #back")
    numbers.forEach(el => el.addEventListener('click', testLength))
  });

  function runEquals() {
    if (document.case.display.value.length < 3) {
      Notiflix.Notify.Info('Enter charatchers !');
      countBell();
    } else if (isNaN(document.case.display.value)) {
      var equals = Math.round(eval(document.case.display.value) * 1000) / 1000;
      document.case.display.value = equals;
      document.getElementById("result").innerHTML += queue.join("") + "=" + equals + "\n";
      queue = [equals.toString()];
      document.getElementById('back').value = "CE";
      document.getElementById('back').onclick = runBack;
      Notiflix.Notify.Success('Success');

    } else if (document.case.display.value == "Infinity") {
      document.getElementById('back').value = "AC";
      document.getElementById('back').onclick = DeleteAll;
      Notiflix.Notify.Warning(' Infinity ! ');
      countBell();
    } else {
      document.getElementById('back').value = "CE";
      document.getElementById('back').onclick = runBack;
      Notiflix.Notify.Warning(' Can not be calculated ! ');
      countBell();

    }
  }

  function testNum() {
    if (document.case.display.value == "Infinity") {
      document.getElementById('back').value = "AC";
      document.getElementById('back').onclick = DeleteAll;
      Notiflix.Notify.Warning(' Infinity ! ');
      countBell();
    } else if (document.case.display.value == "NaN") {
      document.getElementById('back').value = "AC";
      document.getElementById('back').onclick = DeleteAll;
      Notiflix.Notify.Warning(' Not a Number ! ');
      countBell();
    } else if (!document.case.display.value.includes("")) {} else if (document.case.display.value.includes("/0")) {
      Notiflix.Notify.Failure(' You cannot divide by 0 ! ');
      countBell();
    } else if (document.case.display.value.includes("..") || document.case.display.value.includes("//") || document.case.display.value.includes("**") || document.case.display.value.includes("--") || document.case.display.value.includes("++")) {
      runBack();
      Notiflix.Notify.Failure('Enter number ! ');
      countBell();
    } else if (!document.case.display.value.includes("(") && document.case.display.value.includes(")")) {
      Notiflix.Notify.Failure('U cannot end bracket now !');
      countBell();
    } else if (document.case.display.value.includes(")") && !/([123456789])/.test(document.case.display.value)) {
      Notiflix.Notify.Failure('U cannot end bracket now !');
      countBell();
    } else if (document.case.display.value.includes(")") && !/([+/*-])/.test(document.case.display.value)) {
      Notiflix.Notify.Failure('U cannot end bracket now !');
      countBell();
    } else if (!document.case.display.value.includes("(") && document.case.display.value.includes(")") && !/([+/*-])/.test(document.case.display.value)) {
      Notiflix.Notify.Failure('U cannot end bracket now !');
      countBell();
    } else if (!document.case.display.value.includes("(") && document.case.display.value.includes(")") && !/([+/*-])/.test(document.case.display.value) && !/([123456789])/.test(document.case.display.value)) {} else {
      document.getElementById('back').value = "CE";
      document.getElementById('back').onclick = runBack;
    }
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var numbers = document.querySelectorAll(".digit, .oper")
    numbers.forEach(el => el.addEventListener('click', testNum))
  });
  Notiflix.Confirm.Init({
    timeout: 3000,
    okButtonBackground: "#C46600",
    titleColor: "#C46600",
  });

  function DeleteAll() {
    document.case.display.value = "";
  }

  function Del() {
    Notiflix.Confirm.Show(' Confirm',
      'Are you sure you want to delete text?', 'Yes', 'No',
      function() {
        Notiflix.Notify.Success('Text is Deleted');
        document.getElementById("result").innerHTML = "";

      },
      function() {
        Notiflix.Notify.Info('Text is not Deleted');
        countBell();
      });
  }

  //print
  function printTextArea() {
    childWindow = window.open('', 'childWindow', 'location=yes, menubar=yes, toolbar=yes');
    childWindow.document.open();
    childWindow.document.write('<html><head></head><body>');
    childWindow.document.write(document.getElementById('result').value.replace(/\n/gi, '<br>'));
    childWindow.document.write('</body></html>');
    childWindow.print();
    childWindow.document.close();
    childWindow.close();
  }
  //Font ++ and --
  function FontM() {
    txt = document.getElementById('result');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    if (currentSize <= 10) {
      txt.style.fontSize = (currentSize + 5) + 'px';
      Notiflix.Notify.Info('Smallest font size');

    } else {
      txt.style.fontSize = (currentSize - 5) + 'px';
      Notiflix.Notify.Info('Font size -5px');

    }
  }
  //print
  function FontP() {
    txt = document.getElementById('result');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    if (currentSize >= 50) {
      txt.style.fontSize = (currentSize - 5) + 'px';
      Notiflix.Notify.Info('Biggest font size');

    } else {
      txt.style.fontSize = (currentSize + 5) + 'px';
      Notiflix.Notify.Info('Font size +5px');

    }
  }

    //local storage savebtn
    var note_textarea = document.querySelector('#TE');
    var result_textarea = document.querySelector('#result');
    var save_button = document.getElementById('SaveBtn');
    var display = document.querySelector('#display');
    var bell = document.getElementById('notification');



    var   save_button = document.getElementById('overlayBtn');
    if(save_button){
        save_button.addEventListener('click', updateOutput);
}

    result_textarea.textContent = localStorage.getItem('content_result');
    note_textarea.textContent = localStorage.getItem('content_textarea');
    display.value = localStorage.getItem('content_display');
    bell.textContent = localStorage.getItem('bell_count');


    function updateOutput() {
      Notiflix.Notify.Success('Text  has been saved ');
      localStorage.setItem('content_textarea', note_textarea.value);
      localStorage.setItem('content_result', result_textarea.value);
      localStorage.setItem('content_display', display.value);
      localStorage.setItem('bell_count', bell.textContent);

    }

    window.onload = function() {
      const myInput = document.getElementById('display');
      myInput.onpaste = function(e) {
        e.preventDefault();
      }
    }



  function Git() {
    window.open("https://github.com/TheLexa", "_blank");
    countBell()
  };

  var count = 0;


  function countBell() {

    setTimeout(function(){
  document.getElementById('notification').innerText = '🔔';
  document.getElementById('notification').style.fontSize  = '25px';
  setTimeout(function(){
  document.getElementById('notification').innerText = x;
  document.getElementById('notification').style.fontSize  = '33px';
  setTimeout(function(){
    document.getElementById('notification').innerText = '🔔' + x;
    document.getElementById('notification').style.fontSize  = '22px';
  }, 2000);
  }, 3000);
  }, 2000);

    document.getElementById('notification').style.border = "thick solid red ";

    count += 1;
    notifNote();


  }

  var x = -1;

  function notifNote() {

    x++;
    if(x==0){

  }else{
  localStorage.setItem('display_notification' + x, display.value);
    localStorage.setItem('x' ,x);


  }
  }
  window.onload = function() {
    countBell();
    x =+ localStorage.getItem('x');
  }

  function notif() {
    Notiflix.Confirm.Show('Answer', 'Do you want to delete' + ' ' + '(' + x + ')' + ' ' + 'notification', 'Show Notification', 'Yes Delete Notification',
      function() {
        Notiflix.Report.Success(
          ' Success', 'We put notification in Note', 'Click');
        var note_textarea = document.querySelector('#TE');
        var y = 0;
        if (x == 0) {
          Notiflix.Report.Warning('INFO', 'No notification', 'Click');
        } else {
          for (y = 1; x > y; y++) {

            note_textarea.textContent += '\n' + localStorage.getItem('display_notification' + y) + ' ' + 'Cannot be calculated';
          }
          note_textarea.textContent += '\n' + localStorage.getItem('display_notification' + y) + ' ' + 'Cannot be calculated';
        }
      },
      function() {
        count = 1;
        setTimeout(function(){
  document.getElementById('notification').innerText = '🔔';
  document.getElementById('notification').style.fontSize  = '25px';
  setTimeout(function(){
  document.getElementById('notification').innerText = '0';
  document.getElementById('notification').style.fontSize  = '33px';
  setTimeout(function(){
  document.getElementById('notification').innerText = '🔔';
  document.getElementById('notification').style.fontSize  = '22px';
  }, 2000);
  }, 1000);
  }, 2000);


        var z;
        for (z = 0; x > z; z++) {

          localStorage.removeItem('display_notification' + z);
        }
        localStorage.removeItem('display_notification' + z);
        x = 0;
        Notiflix.Report.Success(
          ' Success', 'Notification success deleted', 'Click');

      });
  };

  // NUMBERS
  /*
  function isNumber(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ( (charCode < 40 || charCode > 57)) {
          return false;
      }
      return true;
  }
  var equal = document.getElementById("equal");
  wage.addEventListener("keydown", function (e) {
      if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
           runEquals();
      }
  });
  */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}


#wrapper {
  display: flex;
}

html {
  background:
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

ul {
  list-style: none;
}

body {
  width: 500px;
  overflow: hidden;
}

#Print {
  border: 1px solid rgba(255, 110, 0, 0.7);
  margin-left: 85px;
  position: absolute;
  color: white;
  background: rgba(196, 102, 0, 0.6);
  font-size: 19px;
  width: 85px;
  height: 30px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
}

#Del {
  border: 1px solid rgba(255, 110, 0, 0.7);
  margin-left: 5px;
  position: absolute;
  color: white;
  background: rgba(196, 102, 0, 0.6);
  font-size: 19px;
  width: 80px;
  height: 30px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
  border-radius: 1px;
}

#Git {
  position: absolute;
  color: #fff;
  background: rgba(255, 110, 0, 0.5);
  left: 94.5%;
  font-size: 20px;
  border-radius: 30px;
  width: 80px;
  height: 60px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
  border: 2px solid rgba(255, 110, 0, 0.1);
}

#Note {
  border: 3px solid rgba(155, 89, 182, 1);
  margin-bottom: 25px;
  transform: translate(0, 50%);
  width: 401px;
  height: 50px;
  color: #fff;
  font-family: 'Inconsolata', monospace;
  font-size: 25px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background: rgba(155, 89, 182, 1);
  background-size: 400%;
  border-radius: 0px 0px 7px 7px;
  z-index: 1;
}

#Note:hover {
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 500%;
  }
}

#Note:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 40px;
  opacity: 0;
  transition: 0.5s;
}

#Note:hover:before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 5s linear infinite;
}

  {}

form {
  background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
  text-align: center;
  align-content: center;
  border-radius: 10px;
  border: 3px solid rgba(196, 102, 0, 0.6);
}

#display {
  font-family: 'Roboto', sans-serif;
  width: 98%;
  height: 60px;
  text-align: right;
  margin: 5px;
  border: 5px solid rgba(196, 102, 0, 0.9);
  font-size: 2.5em;
  font-weight: 500px;
}

.digit {
  font-size: 2rem;
  background-color: #f8f8f8;
  height: 55px;
  width: 22%;
  border: 1px solid #c6c6c6;
  display: inline-block;
  box-shadow: 1px 1px 1px;
  color: #222;
  font-family: Roboto-Regular, helvetica, arial, sans-serif;
  margin: 1.5px;
  opacity: 0.9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

.oper {
  font-size: 2rem;
  background-color: #d6d6d6;
  height: 55px;
  width: 22%;
  color: #444;
  display: inline-block;
  margin: 1.5px;
  box-shadow: 0 1px 1px;
  font-family: Roboto-Regular, helvetica, arial, sans-serif;
  opacity: 0.9;
  border: 1px solid #b6b6b6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

#equal {
  background-color: rgba(196, 102, 0, 0.6);
  color: white;
  width: 183px;
  border: none;
}

#TE {
  display: block;
  resize: none;
  width: 386px;
  height: 300px;
  margin-top: 5px;
  margin-left: 7px;
  font-size: 20px;
  border: 1px solid rgba(196, 102, 0, 0.9);
  border-radius: 0px 0px 10px 10px;
  font-family: 'Inconsolata', monospace;
}

#result {
  margin-left: 5px;
  display: block;
  resize: none;
  width: 400px;
  height: 430px;
  max-width: 400px;
  max-height: 600px;
  font-size: 20px;
  border-radius: 10px 10px 1px 1px;
  border: 1px solid rgba(196, 102, 0, 0.9);
}

button, input[type=button] {
  cursor: pointer;
}

.digit:hover, .oper:hover {
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);
  opacity: 1;
}

#Del:hover, #Print:hover, #Git:hover, #FP:hover, #FM:hover, #SaveBtn:hover {
  opacity: 0.8;
  font-size: 20px;
}

#display:hover {
  border: 4px solid rgba(196, 102, 0, 0.9);
}

#FP {
  border: 1px solid rgba(255, 110, 0, 0.7);
  margin-left: 170px;
  position: absolute;
  color: white;
  background: rgba(196, 102, 0, 0.6);
  font-size: 19px;
  width: 80px;
  height: 30px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
  border-radius: 1px;
}

#FM {
  border: 1px solid rgba(255, 110, 0, 0.7);
  margin-left: 250px;
  position: absolute;
  color: white;
  background: rgba(196, 102, 0, 0.6);
  font-size: 19px;
  width: 80px;
  height: 30px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
  border-radius: 1px;
}

#SaveBtn {
  border: 1px solid rgba(255, 110, 0, 0.7);
  background: rgba(200, 102, 0, 0.75);
  margin-left: 330px;
  position: absolute;
  color: white;
  font-size: 21px;
  width: 75px;
  height: 30px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
  border-radius: 1px;
  border-radius: 0px 0px 10px 0px;
}

#notification {
  border: 3px solid rgba(155, 89, 182, 1);
  background: white;
  margin-left: 1470px;
  margin-top: 730px;
  position: absolute;
  color: black;
  font-size: 22px;
  width: 56.5px;
  height: 56.5px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;
  border-radius: 1px;
  border-radius: 60px 60px 60px 60px;
  animation-name: example;
  animation-duration: 30s;
}

@keyframes example {
  0% {
    border-color: red;
  }

  5% {
    border-color: yellow;
  }

  10% {
    border-color: blue;
  }

  15% {
    border-color: green;
  }

  20% {
    border-color: red;
  }

  25% {
    border-color: yellow;
  }

  30% {
    border-color: blue;
  }

  35% {
    border-color: green;
  }

  40% {
    border-color: red;
  }

  45% {
    border-color: yellow;
  }

  50% {
    border-color: blue;
  }

  55% {
    border-color: green;
  }

  60% {
    border-color: red;
  }

  65% {
    border-color: yellow;
  }

  70% {
    border-color: blue;
  }

  75% {
    border-color: green;
  }

  80% {
    border-color: red;
  }

  85% {
    border-color: yellow;
  }

  90% {
    border-color: blue;
  }

  95% {
    border-color: green;
  }

  100% {
    border-color: red;
  }
}
<html>

<head>
  <!--Copyright 2019, Aleksa Kovacevic, All rights reserved.-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Online calculators for everything. Some solve problems, some satisfy curiosity." />
  <meta name="keywords" content="calculator, mortgage, loan,lease, cooking, math, college tuition, agriculture, finance,fractions,love,scientific, design, health, unit converter, pocket, running, calculators" />
  <link rel="icon" href="https://www.apkmirror.com/wp-content/uploads/2017/11/5a0aad10ea5ec.png">
  <title id="Title">Calculator </title>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="main.css" type="text/css">
  <link rel="stylesheet" href="Notiflix\node_modules\notiflix\dist\notiflix-1.8.0.min.css" />
  <script src="Notiflix\node_modules\notiflix\dist\notiflix-aio-1.8.0.js""></script>

        <script src=" main.js" type="text/javascript"></script>
</head>

<body>
  <button type="button" id="notification" onclick="notif()"> 🔔</button>
  <button type="button" id="Git" onclick="Git()"> GitHub</button>
  <div id="wrapper">
    <form name="case">
      <!--Buttons -->
      <input name="display" id="display" placeholder "0" onkeypress="" autofocus readonly>
      <input type="button" class="oper" value="(" onclick="runLB()">
      <input type="button" class="oper" value=")" onclick="runRB()">
      <input type="button" id="back" class="oper" value="CE" onclick="runBack()">
      <input type="button" id="divide" class="oper" value="÷" onclick="runDivide()">

      <input type="button" class="digit" value="1" onclick="run1()">
      <input type="button" class="digit" value="2" onclick="run2()">
      <input type="button" class="digit" value="3" onclick="run3()">
      <input type="button" id="multiply" class="oper" value="×" onclick="runMultiply()">

      <input type="button" class="digit" value="4" onclick="run4()">
      <input type="button" class="digit" value="5" onclick="run5()">
      <input type="button" class="digit" value="6" onclick="run6()">
      <input type="button" id="minus" class="oper" value="-" onclick="runMinus()">

      <input type="button" class="digit" value="7" onclick="run7()">
      <input type="button" class="digit" value="8" onclick="run8()">
      <input type="button" class="digit" value="9" onclick="run9()">
      <input type="button" id="plus" class="oper" value="+" onclick="runPlus()">

      <input type="button" class="digit" value="0" onclick="run0()">
      <input type="button" id="comma" class="digit" value="." onclick="runComma()">
      <input type="button" id="equal" class="oper" value="=" onclick="runEquals()">
      <div id="Cal">
        <textarea id="TE" placeholder="Note"></textarea>
      </div>
      <div id="newpos">
        <!-- button rainbow -->
        <button type="button" id="Note" onclick="myFunction()"> Note</button></div>

    </form>
    <div id="new">
      <!--result textarea-->
      <textarea id="result" placeholder="History" readonly></textarea>
      <button type="button" id="Del" onclick="Del()"> Delete</button>
      <button type="button" id="Print" onclick="printTextArea()"> Print</button>
      <button type="button" id="FP" onclick="FontP()">Font +</button>
      <button type="button" id="FM" onclick="FontM()">Font -</button>
      <button type="button" id="SaveBtn"> Save </button>
    </div>
  </div>
</body>

La biblioteca NOTIFLIX IS para notificaciones sin bloqueo del lado del cliente, cuadros emergentes, indicadores de carga y más, hace que sus proyectos web sean mucho mejores.

ESTE es mi portafolio si tienes alguna buena información dime GRACIAS :)

1
DRAGANA KOVAČEVIĆ 1 may. 2020 a las 19:58

2 respuestas

El problema aquí es que el dom no está cargado, por lo que el área de texto no está disponible hasta que no se cargue el dom. agregar un oyente de carga de ventana para resolverlo.

window.addEventListener('load', function(){
    //local storage savebtn
    var note_textarea = document.querySelector('#TE');
    var result_textarea = document.querySelector('#result');
    var save_button = document.getElementById('SaveBtn');
    var display = document.querySelector('#display');
    var bell = document.getElementById('notification');



    var   save_button = document.getElementById('overlayBtn');
    if(save_button){
        save_button.addEventListener('click', updateOutput);
    }

    result_textarea.textContent = localStorage.getItem('content_result');
    note_textarea.textContent = localStorage.getItem('content_textarea');
    display.value = localStorage.getItem('content_display');
    bell.textContent = localStorage.getItem('bell_count');
})
1
Anees Ijaz 1 may. 2020 a las 17:07

La función no ve la variable de campana porque un ámbito de JavaScript no permite que se vea. Necesita obtener sus elementos dom en el interior de la función updateOutput.

function updateOutput() {
    var note_textarea = document.querySelector('#TE');
    var result_textarea = document.querySelector('#result');
    var save_button = document.getElementById('SaveBtn');
    var display = document.querySelector('#display');
    var bell = document.getElementById('notification');

    Notiflix.Notify.Success('Text  has been saved ');
    localStorage.setItem('content_textarea', note_textarea.value);
    localStorage.setItem('content_result', result_textarea.value);
    localStorage.setItem('content_display', display.value);
    localStorage.setItem('bell_count', bell.textContent);
}
1
Max 1 may. 2020 a las 17:12