The storage capacity of localStorage is insufficient for retaining data

While I was trying to troubleshoot an error, I encountered another issue.

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

This led to the following 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);

    }

The code facing issues is highlighted above. The primary goal is to save all content after clicking the save button.

FULL CODE

  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 characters 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 characters !');
      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('Cannot 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('Cannot end bracket now!');
      countBell();
    } else if (document.case.display.value.includes(")") && !/([123456789])/.test(document.case.display.value)) {
      Notiflix.Notify.Failure('Cannot end bracket now!');
      countBell();
    } else if (document.case.display.value.includes(")") && !/([+/*-])/.test(document.case.display.value)) {
      Notiflix.Notify.Failure('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('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');

      });
  };

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

...

</body>
<!--Additional HTML and CSS markup-->

Notiflix is a client-side library that provides non-blocking notifications, popup boxes, loading indicators, and more to enhance web projects.

Please feel free to provide any feedback or suggestions on my portfolio. Thank you!

javascript

Answer â„–1

The issue at hand lies in the fact that the DOM has not finished loading, causing the textarea to be unavailable until the DOM has fully loaded. By adding a window load listener, this problem can be resolved.

window.addEventListener('load', function(){
    //local storage save button
    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 overlay_button = document.getElementById('overlayBtn');
    if(overlay_button){
        overlay_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');
})

Answer â„–2

The reasoning behind why the bell variable is not accessible to the function is due to the limitations of JavaScript scope, which restricts its visibility. To resolve this issue, it is essential to ensure that your DOM elements are located within the updateOutput function.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing React selectors to manage the state changes on page load and when a user

I'm currently delving into React selectors with ReSelect, and while things seem to be going well, I have a feeling that there may be an issue in my logic. 1 - Upon receiving an AJAX response, I obtain a list of "categories" consisting of id, name, an ...

javascriptreactjsreduxreact-reduxreselect

How can I show a title when redirecting a URL in VUE JS?

My current setup includes a navigation drawer component that changes the title based on the user's route. For example, when navigating to the home page (e.g. "/"), the title updates to "Home", and when navigating to the profile page (e.g. /profile), t ...

javascriptvue.jsvuejs2

Learn how to efficiently process a data queue with AngularJS using Promises

Within my AngularJS application, I have a Service and multiple controllers running simultaneously. The app receives data updates from the server in JSON format through the Angular Service. To manage the vast amount of data, I need to queue it within the se ...

javascriptangularjsangular-promise

"How can I use node.js to retrieve the number of connections on an HTTP server

I have set up a Node.js HTTP server using the following code: http.createServer(function(req, res) {}).listen(8181); I am interested in finding a straightforward way to monitor the performance of my Node.js HTTP server from within the same process. I wou ...

javascriptnode.js

Click a button to switch the visibility of a section in an

Is there a way to create a toggle feature in Angular.JS that will open and close a div when clicked on the same div again? Currently, it opens the div when clicked but I want it to also close the div when clicked again. <a ng-href ng-click="openAccordi ...

javascriptjqueryangularjs

Unable to interpret encoded json information

I'm currently developing a basic chat system using PHP and jQuery with Ajax, but I've encountered an issue when trying to display a JSON encoded string through the ajax callback function. Below is the code for the ajax request: $.ajax({ url: ...

javascriptphpjqueryjsonajax

Forge: Securely encrypting massive files

I rely on the forge framework for implementing PGP functionality, specifically for encrypting large files (2gb or larger) while minimizing RAM usage. What would be the most efficient approach to achieve this? ...

javascriptnode.jscryptographyforge

Ensure to close the Ajax request from PHP before the script finishes executing

Is there a way to terminate an Ajax request from PHP before the script finishes executing? For instance, if a user requests php.php and it includes the line 'echo "phpphp"', how can we ensure that the Ajax request is completed with the data "phpp ...

phpjavascriptjqueryajax

Executing a function on page load instead of waiting for user clicks

I've been researching a problem with onclick triggers that are actually triggered during page/window load, but I haven't been able to find a solution yet. What I need is the ID of the latest clicked button, so I tried this: var lastButtonId = ...

javascriptonclick

Using ajax for transferring form data to a different php page

Hello everyone, I'm in need of assistance. I have a form on one PHP page and I want to use AJAX to pass the data to another PHP page that will update my database and then return the results. <form name="profile" class="profile"> < ...

javascriptphpjqueryajax

I need help determining the starting date and ending date of the week based on a given date

I am looking to determine the starting date (Monday) and ending date of a specified date using Javascript. For instance, if my date is 2015-11-20, then the starting date would be 2015-11-16 and the ending date would be 2015-11-21. ...

javascript

jQuery doesn't seem to function properly upon initial click

Working with Rails and attempting to implement an ajax bookmark icon functionality. When clicking for the first time, the request is sent but the image does not change; however, subsequent clicks work as expected (request sent and image changes). This is ...

javascriptjqueryruby-on-railsajaxonclick

Ending a Firestore `get` query upon unmounting component

Currently, I am retrieving data from Firestore in the componentDidMount function. However, if I happen to change the component while it is still in the process of fetching data, an error occurs: Warning: Can't call setState (or forceUpdate) on an u ...

javascriptreactjsfirebasegoogle-cloud-firestore

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

My Password Validation Dilemma I'm in the process of developing a password field that can assess the strength of the input provided. In a different response, I came across a regex that I could utilize to validate whether the input meets specific crit ...

javascriptreactjsformikyup

Can Node.js handle parsing this as JSON?

Attempting to parse a small API that returns somewhat invalid JSON. Trying the following approach: var request = require('request'), url = 'urlhere'; request({ url: url }, function(error, response, body) { ...

javascriptjsonnode.js

Difficulty encountered when transferring an array from Xcode to JavaScript via SBJSON

In an attempt to transfer an array from Xcode to a local HTML file, I am utilizing jQuery in the HTML code. This involves using loadHTMLString: with baseURL to read both the HTML and included .js files. However, I am encountering an issue when trying to us ...

javascriptiphoneuiwebview

Is the default behavior of Ctrl + C affected by catching SIGINT in NodeJS?

When I run my nodejs application on Windows, it displays ^C and goes back to the cmd prompt when I press Ctrl + C. However, I have included a SIGINT handler in my code as shown below: process.on('SIGINT', (code) => { console.log("Process term ...

javascriptnode.jsprocesssigint

Imagine a complex JSON structure with multiple levels of nesting

Take a look at this JSON data : { department_1 : [{ id : 1, name = Joe Smith, email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660c150b0f120e2613150048030213">[email protected]</a>}, ...., { id : 500, name ...

javascriptcssjsonresponsive-designdata-visualization

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...

javascriptjqueryhtmljquery-selectorsjquery-events

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

javascripthtmlcss