Perform the script only when a click event occurs

Question

Perform the script only when a click event occurs

I need help with a script that will only refresh the page when a specific link is clicked. Currently, the script is running on page load instead of waiting for the click event.

As someone who is not familiar with JavaScript, I am struggling to figure this out on my own. Any assistance would be greatly appreciated...

Edit: I made some changes to my code, but now it's not executing at all - neither on page load nor on click.

Edit 2: This issue is part of a larger problem. You can observe the effect by visiting the following website:

Once on the site, use the dropdown menu under 'productions' and select 'Edition Klangidee'. The page loads correctly and scrolls to the anchor. However, if you click 'Edition Klangidee' again, the cookie bar seems to displace all content by its own height. A simple reload fixes the layout.

The cookie bar is generated by a script that I did not create myself (as I lack the skill to do so) but downloaded.

In my opinion, the best solution would be to modify the JavaScript file. Since I lack the required knowledge, I thought an auto-reload feature could serve as a temporary workaround.

Perhaps this additional information provides some context...

script:
=======

<script type="text/javascript">
    ;(function fun() {
        var reloads = [1000, 3000],
            storageKey = 'reloadIndex',
            reloadIndex = parseInt(localStorage.getItem(storageKey), 10) || 0;

        if (reloadIndex >= reloads.length || isNaN(reloadIndex)) {
            localStorage.removeItem(storageKey);
            return;
        }

        setTimeout(function(){
            window.location.reload();
        }, reloads[reloadIndex]);

        localStorage.setItem(storageKey, parseInt(reloadIndex, 10) + 1);
    }
</script>

html-code:
==========

<a href="https://mylink#myanchor" target="_self" id="ek_reload" onclick="fun()">MyMenuItem</a>

javascript

Answer 1

Answer №1

By utilizing the function, you are activating its functionality

(function fun() {

}());  <-- this is how it's executed

When creating a function, all you need is the function itself

function fun() {

}

Answer 2

By utilizing the function, you are activating its functionality

(function fun() {

}());  <-- this is how it's executed

When creating a function, all you need is the function itself

function fun() {

}

Answer 3

Answer №2

Here is a straightforward solution using plain JavaScript:

    window.onload = function(e){
        console.log("window.onload: " + new Date());
    }
    function refreshPage() {
        location.reload();
    }

<a href="javascript:void(0);" target="_self" id="ek_reload" onclick="refreshPage()">Click to reload</a>

Answer 4

Here is a straightforward solution using plain JavaScript:

    window.onload = function(e){
        console.log("window.onload: " + new Date());
    }
    function refreshPage() {
        location.reload();
    }

<a href="javascript:void(0);" target="_self" id="ek_reload" onclick="refreshPage()">Click to reload</a>

Answer 5

Answer №3

previously mentioned, you are invoking the function itself
if desired, another approach can be utilized such as
html

<input type="button" onclick="fun()" value="test">

javascript

 fun=()=>{
   alert("hey there");
   }

alternatively, the onclick can be removed and an event listener created like so

html

<input id="testBTN" type="button" value="test">

javascript

document.getElementById("testBTN").addEventListener("click", ()=>{alert("hey man")});

hope that was helpful:)

Answer 6

previously mentioned, you are invoking the function itself
if desired, another approach can be utilized such as
html

<input type="button" onclick="fun()" value="test">

javascript

 fun=()=>{
   alert("hey there");
   }

alternatively, the onclick can be removed and an event listener created like so

html

<input id="testBTN" type="button" value="test">

javascript

document.getElementById("testBTN").addEventListener("click", ()=>{alert("hey man")});

hope that was helpful:)

Perform the script only when a click event occurs

Answer №1

Answer №2

Answer №3

Similar questions

React Bootstrap ToggleButton firing function multiple times unnecessarily

Rules for validating string and numeric combinations in Vuetify are essential for ensuring accurate

A guide to customizing the appearance of Textfield labels in Material-UI using React

Converting a string to a number is not functioning as expected

Utilizing Asynchronous Values in a Different JavaScript Function

Struggling to retrieve CSS property from a child element?

Unable to establish connection with server through Ajax request on HTML page

Converting an Object into an Array of Objects

Tips for creating a useState variable within the render() function in reactjs

Successfully converted Javascript variables to PHP variables, however, I faced difficulties when attempting to compare the PHP variable

Tips for dividing by a large number

Unleashing the Power of Lodash Debounce in Vue

Using JavaScript to Parse JSON Data Retrieved from an AJAX Call

The standard date format used in Javascript/Jquery programs

Having difficulty saving data in database using Ajax request from a Chrome extension

The issue I am experiencing within my PHP code is that the redirection to the gratitude page is not functioning correctly when utilizing

Firestore - Using arrayUnion() to Add Arrays

having trouble retrieving information from the input field

Transferring information between React components

Updating or swapping images using JavaScript and HTML