call a function inside a click function

Question

I have a few images and a form where I have an input text, one pair of radio button and a select option, everytime I select one radio button and one option both of them get disabled and it can't be select anymore until the 'guardar cambios' button is clicked, when I select an option (in the sample it is the option 1) and an one image it changes for another but what I want is to, in case the person select the wrong option, to undo that, so I create a function where it has three parameters the value of radio and select and the class of the image selected, i call it inside 'seleccionar' where I reset the values of those three elements, then I put it inside the click function (the undo button). https://codepen.io/luzsdx/pen/ExKqwXP

I followed this How to call a function from click event inside another click event function?

But the problem is that when I choose an image it doesnt get replace for another, can anybody tell me what I'm doing wrong? thank you and I get the 'classes is not defined' error in the console

   function deshacer (classes, valorRadio, valorSelect) {
        $(valorRadio).prop("selectedIndex", 0).attr('disabled', false);
        $(valorSelect).val('none').attr('disabled', false)
        $(`div.${classes}>object`).attr('data', 'diente.svg')
    }


    $('.deshacer').on('click', function(e){
        e.preventDefault()
        deshacer(classes, valorRadio, valorSelect)
    })


    function seleccionar(valorSelect, valorRadio, classes, idImg) {
        if (valorSelect) {
            if (confirm('¿Seleccionar pieza Nro ' + classes + '?')) {
            } else {
                return false
            }
        }
        if (valorRadio == 'rojo') {
            if (valorSelect == 2) {
                alert('Extracción indicada es una prestación requerida.')
                $('#tratSelect').val('none')

            } else if (valorSelect == 1) {
                $(`div.${classes}>img`).attr('src', 'https://cdn-0.emojis.wiki/emoji-pics/lg/red-circle-lg.png')

            } 
        }
  deshacer(classes, valorRadio, valorSelect)

    }

Well baked! Now, for images you have not add any class or method to trace which image been selected so what you can do something like wrap a div for all images just after <div class="body"> something like <div class=body><div class="imagesRow">........</div></body Then, you can add new css class called active once images selected where you'll be able to check for active images. Please see this example [link] (stackoverflow.com/a/64341727/14435535) — i3z
– i3z, Commented Oct 14, 2020 at 0:32
thank you! but do I have to add an active element by default? and why the code doesn't take the parameter classes? — luz
– luz, Commented Oct 14, 2020 at 1:10

i3z · Accepted Answer · 2020-10-14 16:02:51Z

1

Global Variable

Initial global variables so calling values inside a function can be done, at top of your add those

var valorSelectValue;
var valorRadioValue;
var classesValue;
var idImgValue;

Now, mostly of time you can save, update selection of those variables sometimes they call it public/private variables depends in your needs and can be called it inside your function, in some other situations you might use this.valorSelectValue;

Local Variable: When you initial local variables that are defined within functions. They have local scope, meaning it should be used within the functions that define them.

Global Variable: They are variables that are defined outside of functions. These variables have global scope, so they can be used by any function and no need to passing them as parameters of the function.

Next, add new class named defaultImage

.defaultImage {
content:url("https://www.tacoshy.de/Images/teeth.png");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}

Inside your function seleccionar I implemented new logic

function seleccionar(valorSelect, valorRadio, classes, idImg) {

...
...

} else if (valorSelect == 1) {

...

// Lookup for any active selection
if ($(`.active`)) {

// Remove added red-circle-lg.png from element
($(`.active`)).removeAttr("src")  

// Add defaultImage before removing active class
$(`.active`).addClass("defaultImage") 

// Remove active class
$(`.active`).removeClass("active") 
                
}
// Remove defaultImage class
$(`div.${classes}>img`).removeClass("defaultImage") 

// Add red-circle-lg.png Image
$(`div.${classes}>img`).attr('src', 'https://cdn-0.emojis.wiki/emoji-pics/lg/red-circle-lg.png')

// Add active class              
$(`div.${classes}>img`).addClass('active')
}

Live Example: codepen.io

edited Oct 14, 2020 at 16:02

answered Oct 14, 2020 at 2:36

i3z

707 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

i3z Over a year ago

If all went fine I will delete your code from codepeon.io, just let me know ! Happy coding =)

luz Over a year ago

okey so I understand the change of image by adding classes and thank you for that but the undo doesn't work for the radio buttons and select can you explain me why?

i3z Over a year ago

Basically, your callback click function for button has (e) then it triggers deshacer (classes, valorRadio, valorSelect) but there's no data to be sent except for e the event triggered so when you do console.log(classes) shows output of undefined meaning it's empty. So, I would suggest holding the values in new variable top of file make it global and accessible as var valorSelect = ""; and var valorRadio =""; and var classes = ""; I hope that helps !

luz Over a year ago

ok I understand and one more question, the class active where does it came from?

luz Over a year ago

okay but if that class has no property and is not attached to an element, how is it related to the selected image? and also I add the three variables to the top to make them global but my code still doesn't work codepen.io/s1bp/pen/YzWydaa thank you for helping me, I'm still a newbie

|

Collectives™ on Stack Overflow

call a function inside a click function

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related