Trying to push var value into another var

[multichild]

I am trying to cut down on some very repetitive code and below is an example, but its not working, I cant work it out how to use var id in $(id) if its possible anyway.

var greenTick = $(id).closest('.card').find('.greenTick').css({ "display": "inline" });

if (testEmail.test($('#txtEmailAddress').val().trim()))
    {
        var id = '#txtEmailAddress';
        greenTick;
    }

greenTick basically needs to have the value of id pushed into it, is it possible?

This is an example of the whole chunk of code.

<div class="card">
<div class="greenTick greenClientAdmin" style="display:none;">&#10004;</div>
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
@LH.GetText(LH.SystemComponent.TheSystem, "mdlContractForm_ClientAdministrator")
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
<div class="card-body">
<div class="newContractFormElementWrapper">
@Html.LocalisedText("lblContractForm_ClientAdministratorInstructions", "lblContractForm_ClientAdministratorInstructions", LH.SystemComponent.TheSystem)

<br />

@Html.LocalisedText("lblFormEmailAddress", "lblForm_Field_EmailAddress", LH.SystemComponent.Shared, "textSizeStandard title required")
@Html.EditorFor(model => model.ClientAdministratorEmailAddress, null, new { htmlAttributes = new { @type = "email", @class = "textBox textSizeSmall text-input", @id = "txtEmailAddress", maxlength = DH.GetFieldMaxLength("Contract", "Client_Administrator_Email_Address") } })

<br />
<br />

</div>
</div>
</div>
</div>

[Dormilich]

The CSS selector for IDs starts with a #.

[multichild]

Hi Dormilich,

Sorry I cant see it, I’m not getting you.

Do you mean that .closest and .find need to use ID’s not class

[Dormilich]

@multichild

$(id).closest(...)

If id does not start with a #, the whole line will not do anything.

[multichild]

Ah right ok,

I changed it to

<div class="card" id="cardAdministrator">
<div class="greenTick greenClientAdmin" style="display:none;">&#10004;</div>

Then

var greenTick = $(id).closest('#cardAdministrator').find('.greenTick').css({ "display": "inline" });
if (testEmail.test($('#txtEmailAddress').val().trim()))
    {
        var id = '#txtEmailAddress';
        greenTick;
    }

And unfortunately the tick still doesn’t appear

[Dormilich]

Change

var greenTick = $(id).closest('#cardAdministrator').find('.greenTick').css({ "display": "inline" }); 
if (testEmail.test($('#txtEmailAddress').val().trim()))

to

var greenTick = $(id).closest('#cardAdministrator').find('.greenTick').css({ "display": "inline" }); 
console.log(id)
if (testEmail.test($('#txtEmailAddress').val().trim()))

What is then printed in the console?

[multichild]

I added console as below and got #txtEmailAddress

var greenTick = $(id).closest('#cardAdministrator').find('.greenTick').css({ "display": "inline" });

if (testEmail.test($('#txtEmailAddress').val().trim()))
    {
        var id = '#txtEmailAddress';
        greenTick;
        console.log(id);
    }

So then I changed it to this, and got a Object {length …

var id = '#txtEmailAddress';
        greenTick;
        console.log(greenTick);

This gives me undefined

var greenTick = $(id).closest('#cardAdministrator').find('.greenTick').css({ "display": "inline" });
    console.log(id);

[Dormilich]

@multichild

This gives me undefined

And there you have the explanation why it doesn’t work. $(undefined) does not produce a result.

[multichild]

ye I get you, ok thanks

[Paul_Wilkins]

Why can’t you just make greentick a function?

function greenTick(id) {
    return $(id)
        .closest('#cardAdministrator')
        .find('.greenTick')
        .css({ "display": "inline" });
}

Or, an arrow function instead:

var greenTick = (id) => $(id)
    .closest('#cardAdministrator')
    .find('.greenTick')
    .css({ "display": "inline" });