开发者问题收集

localStorage 无法保存信息

2020-05-01
185

我正在尝试修复此错误,但如果我修复,会出现另一个错误

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

我收到下一个错误

 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);

    }

这是我遇到问题的代码(向上) 我只想在按下保存按钮后保存所有内容。

完整代码

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>

NOTIFLIX 是一个用于客户端非阻塞通知、弹出框、加载指示器等的库,可让您的 Web 项目变得更好。

这是我的作品集,如果您有任何好的信息请告诉我,谢谢 :)

2个回答

这里的问题是 dom 未加载,因此在 dom 未加载之前 textarea 不可用。为其添加窗口加载监听器即可解决该问题。

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');
})
anees
2020-05-01

该函数看不到 bell 变量,因为 javascript 作用域不允许看到它。您需要在 updateOutput 函数内部获取 dom 元素。

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);
}
Max
2020-05-01