Errors may occur when parameters are introduced in a function

Question

Errors may occur when parameters are introduced in a function

Is there a way to change the text of certain paragraphs by clicking different buttons without having to rewrite the entire function every time for just two text elements?

Here is the original code with no parameters:

$('.ilBorgo').click(good);
function good() {
    if ($('#page').hasClass('content') === false) {
        $('#page').addClass('content');
        $('.title').text("text1");
        $('.text').text("text2");
        $('#slider').removeAttr("id");
        $('.container').css("background-image", 'url' + imgPath[0]);
    } else {
        $('#page').removeClass('content');
        $('.container').attr("id", "slider");
        $('.title').text("");
        $('.text').text("");
    };
    document.getElementById("demo").innerHTML = "it's running!";
};

However, when I tried to add parameters to improve the structure of the code, the event triggered automatically without any click after page load.

When trying to click on it, nothing happens as expected and the text section does not disappear like it should.

Below is the code with added parameters:

$('.ilBorgo').click(good("hello", "world"));

function good(a, b) {
    if ($('#page').hasClass('content') === false) {
        $('#page').addClass('content');
        $('.title').text(a);
        $('.text').text(b);
        $('#slider').removeAttr("id");
        $('.container').css("background-image", 'url' + imgPath[0]);
    } else {
        $('#page').removeClass('content');
        $('.container').attr("id", "slider");
        $('.title').text("");
        $('.text').text("");
    };
    document.getElementById("demo").innerHTML = "it's running!";
};

javascript jquery html css

Answer 1

Answer №1

Your understanding of when the function is executed seems a bit off.

Here is your original code snippet:

$('.ilBorgo').click(good); // function execution occurs on click event

This code snippet does not actually call the `good` function. It simply passes the function as an argument to the `click` method.

However, in your updated code, the `good` function is indeed called:

$('.ilBorgo').click(good("hello", "world")); // function execution happens HERE
                                             // return value is passed to the click event.

The equivalent version without parameters would be:

$('.ilBorgo').click(good()); // makes the bug easier to spot

Do you see the problem now?

What you really want is to postpone the execution until the actual click event.

One way to achieve this is by using an anonymous function around the function call:

$('.ilBorgo').click(function () { 
    good("hello", "world");       
});

Another solution is to make the `good` function return another function:

function good(a, b){
    return function () {
        if($('#page').hasClass('content') === false){
            $('#page').addClass('content');
            $('.title').text(a);
            $('.text').text(b);
            $('#slider').removeAttr("id");
            $('.container').css("background-image", 'url'+imgPath[0]);
        } else{
            $('#page').removeClass('content');
            $('.container').attr("id","slider");
            $('.title').text("");
            $('.text').text("");
        };
        document.getElementById("demo").innerHTML = "it's running!";
    };
};

Answer 2

Your understanding of when the function is executed seems a bit off.

Here is your original code snippet:

$('.ilBorgo').click(good); // function execution occurs on click event

This code snippet does not actually call the `good` function. It simply passes the function as an argument to the `click` method.

However, in your updated code, the `good` function is indeed called:

$('.ilBorgo').click(good("hello", "world")); // function execution happens HERE
                                             // return value is passed to the click event.

The equivalent version without parameters would be:

$('.ilBorgo').click(good()); // makes the bug easier to spot

Do you see the problem now?

What you really want is to postpone the execution until the actual click event.

One way to achieve this is by using an anonymous function around the function call:

$('.ilBorgo').click(function () { 
    good("hello", "world");       
});

Another solution is to make the `good` function return another function:

function good(a, b){
    return function () {
        if($('#page').hasClass('content') === false){
            $('#page').addClass('content');
            $('.title').text(a);
            $('.text').text(b);
            $('#slider').removeAttr("id");
            $('.container').css("background-image", 'url'+imgPath[0]);
        } else{
            $('#page').removeClass('content');
            $('.container').attr("id","slider");
            $('.title').text("");
            $('.text').text("");
        };
        document.getElementById("demo").innerHTML = "it's running!";
    };
};

Answer 3

Answer №2

When this action is performed

 $('.ilBorgo').click(good("hello", "world"));

the good method will be executed by the browser immediately, which is why it is triggered on page refresh or load. To avoid this, consider the following approach:

$(".ilBorgo").click(good.bind(this, "Hello", "World"));

In this scenario, the good method will only be called when the button is clicked. To learn more about how .bind() works, click here.

Answer 4

When this action is performed

 $('.ilBorgo').click(good("hello", "world"));

the good method will be executed by the browser immediately, which is why it is triggered on page refresh or load. To avoid this, consider the following approach:

$(".ilBorgo").click(good.bind(this, "Hello", "World"));

In this scenario, the good method will only be called when the button is clicked. To learn more about how .bind() works, click here.

Answer 5

Answer №3

Try this method for passing parameters with a click event

$(".ilBorgo").click({var1: "Greetings", var2: "Universe"}, show);

function show(event){
    alert(event.data.var1);
    alert(event.data.var2);
}

This approach allows you to send specific values to the function when handling a click event.

Answer 6

Try this method for passing parameters with a click event

$(".ilBorgo").click({var1: "Greetings", var2: "Universe"}, show);

function show(event){
    alert(event.data.var1);
    alert(event.data.var2);
}

This approach allows you to send specific values to the function when handling a click event.

Errors may occur when parameters are introduced in a function

Answer №1

Answer №2

Answer №3

Similar questions

Issues with HTML to PDF text rendering (DOMPDF scrambles text after a certain number of HTML lines)

Is it possible to deactivate a button using jQuery without changing its visibility to transparent?

merging the central pair of columns in the bottom row

``Is there a more SEO-friendly option instead of using an iframe?

There are certain lines of JavaScript/Node.js code that are failing to execute

Retrieve the size of an element without having to wait for the browser to "recalculate style"

Changing the application's state from within a child component using React and Flux

A method for displaying information in HTML by implementing ng-repeat in AngularJS

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Angular directive for D3 chart not displaying on the page

Trying to add a single value to a specific index in a JavaScript array, but it is mistakenly assigning multiple values at once

Access a folder in JavaScript using Flask

Perform a postback within a jQuery UI dialog box

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Display the scrollbar only when the mouse cursor hovers over it

How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

Why is my timer function speeding past too swiftly?

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

Display an icon to act as a separator between icons in CSS styling

Incorrect form element style is only visible when contained within an unstyled HTML Details tag