Capturing Text from tab selected in Javascript

Question

Am working on some tabs using Jquery, if the user clicks on a specific tab, am trying to capture the text of the tab selected and do some action if the text of the tab clicked matches but it aint showing.

~ Kindly assist?

let selected = false;
$(".columns").click(function () {
    if (selected =! selected) {
        var subject = $(this).text();
        //alert(subject);
        if(subject == "Mathematics"){
            alert('Maths');
        }
        else if(subject == "English"){
            alert('Eng');
        }
        else{
            alert('Others');
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>

Do you need to match based on tab text or could it be based on ID? What would happen if two tabs had the same name? — Remy
– Remy, Commented Nov 4, 2019 at 15:15
@Remy Want to match based on tab text,, the content is static so no tabs will have similar names.. — Martin
– Martin, Commented Nov 4, 2019 at 15:16
What do you think this line is doing? if (selected =! selected) - what do you get if you remove that if — fdomn-m
– fdomn-m, Commented Nov 4, 2019 at 15:18
@freedomn-m When I remove it and I alert(subject) clicked it is displayed twice,, so the selected variable captures the subject selected only when the tab is clicked once.. — Martin
– Martin, Commented Nov 4, 2019 at 15:23
Well that's an XY problem, but not the one you've asked. Maybe if you used clearer spaces it wouldn't be a question (if (selected = !selected)), but at least you know why it's there. — fdomn-m
– fdomn-m, Commented Nov 4, 2019 at 15:30

Ram Segev · Accepted Answer · 2019-11-04 15:27:33Z

4

The problem is when you get the text it comes with spaces. use .trim() to remove them.

let selected = false;
$(".columns").click(function () {
    if (!selected) {// means false
        var subject = $(this).text();
        //alert(subject);
        if(subject.trim() == "Mathematics"){
            alert('Maths');
        }
        else if(subject.trim() == "English"){
            alert('Eng');
        }
        else{
            alert('Others');
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>

answered Nov 4, 2019 at 15:27

Ram Segev

2,5612 gold badges14 silver badges24 bronze badges

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

1 Comment

fdomn-m Over a year ago

@Martin if you used data-value='English' then you wouldn't have to trim (and wouldn't have need to ask this question). Never use .text() for anything other than displaying text to the user.

Remy · Accepted Answer · 2019-11-04 15:37:45Z

0

If the content is static, I would recommend adding IDs, as this enforces unique naming, however, to answer your question, if you're looking to match tabs by their name, I would suggest using XPath, as you can't select by text with CSS selectors

//*[text()="Mathematics"]

If you copy the above and paste it in dev tools, it should show the highlighted matches. To use it with jQuery, use

$(document).xpathEvaluate(//*[text()="Mathematics"])

To achieve the desired outcome with ID's, which is a better practice for this use case, you're simply matching to your ID as follows:

HTML:

<span ID="Mathematics">Mathematics</span>

CSS:

#Mathematics { }

JQuery:

$("#Mathematics")

edited Nov 4, 2019 at 15:37

answered Nov 4, 2019 at 15:29

Remy

90413 silver badges20 bronze badges

Collectives™ on Stack Overflow

Capturing Text from tab selected in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related