HTML and JavaScript: Change button text (Toggle)

Question

I need to change a button's text, however I think the issue I don't understand is how to change it back using separate files. I need to use jQuery to toggle pictures. This will hide the image and show the image. The button is "hard coded" I think in both the HTML and JavaScript.

The button is showing "hide" to initially hide the image. Once the button is clicked the image disappears and the button's text turns to "Show". However it will not turn back to "hide".

HTML:

<img src="sky.jpg" id="sky">
<input type='button' onclick="js/toggle.js" id="skybutton" value="Hide">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>

JavaScript:

$('#skybutton').click(function() {
    $("#sky").toggle();
    $(skybutton).val('Show');
});

have you tried adding a conditional to check the name of the label ? — Julian Silvestri
– Julian Silvestri, Commented Sep 16, 2018 at 23:48
you dont need onclick in html, just connect script to html on end of body tag — curious lad
– curious lad, Commented Sep 17, 2018 at 5:23

I am Cavic · Accepted Answer · 2018-09-17 00:28:38Z

3

Welcome to stackoverflow Shepard!!

You need little bit of logic in your javascript in order to make this work both ways:

<img src="sky.jpg" id="sky">
<input type='button' onclick="js/toggle.js" id="skybutton" value="Hide">

Here in the click function is where you need magic to happen: Try this code:

$('#skybutton').click(function() {
    $("#sky").toggle();
    if($(this).val() === 'Hide'){
        $(this).val('Show');
    }else{
        $(this).val('Hide');
    }
});

So what is happening above is that you already have a click function attached to the button so with in the function you can refer to that button as this and you can check what the value of the button is.

Your if statement goes hey button if your value is 'Hide' change the value to 'Show' and else your value must be 'Show' so change it back to 'Hide' let me know if I can clear anything else up for you. Good luck with the project

edited Sep 17, 2018 at 0:28

answered Sep 16, 2018 at 23:51

I am Cavic

1,0851 gold badge10 silver badges23 bronze badges

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

Comments

Kiran Shahi · Accepted Answer · 2018-09-17 03:39:27Z

0

You can achieve this using an if else statement say:

$('#skybutton').click(function() {
    If($(this).val() == "hide") {
        $("#sky").hide();
        $(this).val("Show")
    } else {
        $("#sky").show();
        $(this).val("hide")
    }

});

edited Sep 17, 2018 at 3:39

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

answered Sep 16, 2018 at 23:52

user8453321

3441 gold badge5 silver badges13 bronze badges

1 Comment

user8453321 Over a year ago

Was using my phone and barely noticed some syntax typo error the val is in small letters not capita letters

wokoro douye samuel · Accepted Answer · 2018-09-17 05:18:10Z

0

In support of I am Cavic, just a more readable version

$('#skybutton').click(() => {
    $("#sky").toggle()
    if ($(this).val() === "hide") {
        $(this).val("show")
        return
    }
    $(this).val("hide")
})

edited Sep 17, 2018 at 5:18

answered Sep 17, 2018 at 0:08

wokoro douye samuel

2,4143 gold badges19 silver badges30 bronze badges

3 Comments

I am Cavic Over a year ago

thank you for the support have ever your code most likely won't work for the poster he will need to use es6 processor for => notation which by his original post you can tell he is not using also your last line `.Val("hide") will throw an error

Poul Bak Over a year ago

'readable' is a matter of opinion, I prefer @I am Cavic's solution.

wokoro douye samuel Over a year ago

@I am Cavic, ya sure the Val() was a typo. Support for the feature is pretty good, a 86.68% of browsers supports it source : caniuse.com. @Poul Bak, yes you're totally right readability is a opinion and it is something we as developers should promote.

Collectives™ on Stack Overflow

HTML and JavaScript: Change button text (Toggle)

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related