在点击函数中调用一个函数

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)

    } 

Answer 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