Disappear and reappear: the magic of text on page reload with javascript onclick event

Question

Disappear and reappear: the magic of text on page reload with javascript onclick event

I have a JavaScript function that displays text when a button is clicked. The issue I am facing is that the text appears momentarily and then disappears after the page is reloaded.

Below is the paragraph that shows the text once the button is clicked:

<p class="lead" id="class"><strong style="color: red; font-size: 15px; display: none;"></strong></p>

Here is the button in question:

<button type="submit" class="btn btn-primary" onclick="myFunction()">Search</button>

This is the script for my function:

<script>
        function myFunction() {
            document.getElementById("class").innerHTML = "Class current balance total";
        }
</script>

Is there a way to ensure that the text remains visible even after the page reloads?

Note: I am still learning about JavaScript and its functionalities.

javascript

Answer 1

Answer №1

The reason for this is due to specifying type="submit". A better option would be to use

<input type="button" ... />

.

Answer 2

The reason for this is due to specifying type="submit". A better option would be to use

<input type="button" ... />

.

Answer 3

Answer №2

That method won't work for achieving what you are trying to do. JavaScript operates differently than that. If you want the data to remain unchanged even after refreshing the page, you'll need to utilize Localstorage.

Localstorage is a key component of JavaScript. By storing the data in the browser's local storage, you can display it again later as needed. Since the value is already stored in the browser, you can easily retrieve and display it whenever required.

Here's how you can implement it: Use localstorage.setItem to save the value, and then use localstorage.getItem to access the saved value and display it on your webpage.

I hope this clarifies things for you!

Answer 4

That method won't work for achieving what you are trying to do. JavaScript operates differently than that. If you want the data to remain unchanged even after refreshing the page, you'll need to utilize Localstorage.

Localstorage is a key component of JavaScript. By storing the data in the browser's local storage, you can display it again later as needed. Since the value is already stored in the browser, you can easily retrieve and display it whenever required.

Here's how you can implement it: Use localstorage.setItem to save the value, and then use localstorage.getItem to access the saved value and display it on your webpage.

I hope this clarifies things for you!

Answer 5

Answer №3

Utilizing local storage can definitely assist in resolving this issue. I have devised a solution to address your concern. Local storage enables web applications to store data locally within the user's browser, distinguishing it from cookies. In this case, I have stored your text as a key/value pair in local storage. The text is retrieved using the "getItem" method. To view a demonstration of this code, please visit this link

The code example is shown below:

<script>
  //an immediately invoked function that checks if the text is already present in local storage
  (function(){
    //if the text exists in local storage, set the HTML content
    if (localStorage.currentTotal){
    console.log(localStorage.currentTotal);
    document.getElementById('class').innerHTML = localStorage.getItem("currentTotal");
  }
    })();
  
  //function triggered by an onclick event
  function myFunction() {
    // Store data in local storage
    localStorage.setItem("currentTotal", "Class current balance total");
    //set the inner HTML to the value stored in local storage
    document.getElementById("class").innerHTML = localStorage.getItem("currentTotal");

}
</script>

Answer 6

Utilizing local storage can definitely assist in resolving this issue. I have devised a solution to address your concern. Local storage enables web applications to store data locally within the user's browser, distinguishing it from cookies. In this case, I have stored your text as a key/value pair in local storage. The text is retrieved using the "getItem" method. To view a demonstration of this code, please visit this link

The code example is shown below:

<script>
  //an immediately invoked function that checks if the text is already present in local storage
  (function(){
    //if the text exists in local storage, set the HTML content
    if (localStorage.currentTotal){
    console.log(localStorage.currentTotal);
    document.getElementById('class').innerHTML = localStorage.getItem("currentTotal");
  }
    })();
  
  //function triggered by an onclick event
  function myFunction() {
    // Store data in local storage
    localStorage.setItem("currentTotal", "Class current balance total");
    //set the inner HTML to the value stored in local storage
    document.getElementById("class").innerHTML = localStorage.getItem("currentTotal");

}
</script>

Answer 7

Answer №4

Eliminating the form tag will resolve the issue of the page reloading unnecessarily, allowing it to function properly.

Answer 8

Eliminating the form tag will resolve the issue of the page reloading unnecessarily, allowing it to function properly.

Answer 9

Answer №5

Consider replacing display:none with display:block within your code snippet.

function updateBalance() {
    document.getElementById("element").innerHTML = "Element current balance total";
    document.getElementById("element").children.style.display = 'block';

}

Answer 10

Consider replacing display:none with display:block within your code snippet.

function updateBalance() {
    document.getElementById("element").innerHTML = "Element current balance total";
    document.getElementById("element").children.style.display = 'block';

}

Answer 11

Answer №6

There is an issue with the input value disappearing on refresh, despite attempts to use local storage. However, this can be resolved by implementing the setItem code and getItem functions. Make sure to include window.onload and insert document.getElementById("demo").innerHTML = localStorage.getItem("peanuts"); in your code. By doing so, you will be able to see that the information is stored in localStorage but needs to be retrieved for display. Use f12 to check if it is being stored properly. Additionally, remember to add if(typeof(Storage) !== etc., to your code when working with localStorage.

Answer 12

There is an issue with the input value disappearing on refresh, despite attempts to use local storage. However, this can be resolved by implementing the setItem code and getItem functions. Make sure to include window.onload and insert document.getElementById("demo").innerHTML = localStorage.getItem("peanuts"); in your code. By doing so, you will be able to see that the information is stored in localStorage but needs to be retrieved for display. Use f12 to check if it is being stored properly. Additionally, remember to add if(typeof(Storage) !== etc., to your code when working with localStorage.

Disappear and reappear: the magic of text on page reload with javascript onclick event

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Node does not recognize the $or operator

Efficiently sending VueJS data to a separate script

When working with ReactJS and NextJS applications, the variables declared in the .env file may sometimes be received as undefined

JavaScript: utilizing JSON, implementing dynamic methods for creatures, and utilizing closures for encaps

Storing Redux state in local storage for persistence within a React application

Potential unhandled promise error in react-native

What is the method to define a loosely typed object literal in a TypeScript declaration?

How does axios .catch() handle JavaScript errors within Redux middleware?

Rendering components asynchronously in ReactJS

Tips for detecting the backspace key code in an Android browser using JavaScript?

Implementing dynamic loading of a view partial with CodeIgniter and jQuery

Is there a way to utilize the function body onload in jQuery?

An issue occurred while evaluating the Pre-request Script: Unable to access the 'get' property of an undefined object

Issue with React Router: Trying to access the 'history' property of an undefined object

What is the best way to showcase a modal component when the page loads?

"Commander.js does not process query strings when used in conjunction with node

Pattern matching for ' ... '

Guide on Validating and Updating an embedded item within a mongoDB Collection Document

"What could be the reason behind the sudden disappearance of the TinyMCE icon in my Vue

Transferring retrieved information from one division to another