HTML and JavaScript: Change button text (Toggle)

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');
);


3 Answers
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.

this

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

if

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")


);


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")
)


Val()

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy