Changing An Elements Content

Question

I would like to change the content of a element with a button click and then have it return back to its original message. How Would i do this preferable with toggle class if possible.

<doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>

</head>
<body>
<h1> HotDogs</h1>
<input type=button id=button value=button>
<script>
$("#button").click(function(){ 
$("h1").html("Change to this");
});


</script>

This changes the header with a button, but I don't know how to revert it when I click on the button again. Maybe Toggle Class, I don't know.

score 1 · Accepted Answer · answered Oct 02 '15 at 22:59

1

this should solve:

$( "#button" ).toggle(function() {
  $("h1").html("Change here");
}, function() {
  $("h1").html("Revert back here");
});

answered Oct 02 '15 at 22:59

GrafiCode

3,307
3
26
31

didn't work when i ran the page immediately the button disappears – Sam Opoku Oct 02 '15 at 23:16
can you try something else i like the simplicity of your code though, maybe something different – Sam Opoku Oct 02 '15 at 23:17
@SamOpoku Why do you accept an answer that didn't work for you? I mean, the reason it doesn't work is because `toggle()` sets an element visible / invisable and therefor this is a bad answer anyway, but still.. – icecub Oct 02 '15 at 23:17
Ahem.. Quote "jQuery .toggle: Description: Display or hide the matched elements.". http://api.jquery.com/toggle/ – icecub Oct 02 '15 at 23:20
2

Ahem... Are you blind? He posted a JSFiddle that proves it works in his last comment. And btw, you've got the wrong toggle: "Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks." https://api.jquery.com/toggle-event/ – mbinette Oct 02 '15 at 23:22
I stand corrected for that. But jQuery having 2 functions with the exact same name.. no wonder that causes confusion – icecub Oct 02 '15 at 23:24
@mbinette Seems the event `.toggle()` is deprecated: Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. – icecub Oct 02 '15 at 23:26

score 0 · Answer 2 · answered Oct 02 '15 at 22:59

0

Set a flag to toggle and check, and store the old text whenever you change it. An example:

var flag = false;
var old_text = "";

$("#button").click(function () {
    if (flag) {
        $("h1").html(old_text);
    } else {
        old_text = $("h1").html();
        $("h1").html("Change to this");
    }
    flag = !flag;    
});

answered Oct 02 '15 at 22:59

enigma

3,476
2
17
30

This worked but could you possible do a more simplified version of this – Sam Opoku Oct 02 '15 at 23:18
1

how simplified do you want it? It's quite a small code block. I'll have a think. – enigma Oct 02 '15 at 23:20

score 0 · Answer 3 · answered Oct 02 '15 at 23:01

0

You can try this:

var alternate_text = "Change to this";
$("#button").click(function(){ 
    var temp = $("h1").html()
    $("h1").html(alternate_text);
    alternate_text = temp; // Switch the two instances of text.
});

answered Oct 02 '15 at 23:01

mbinette

5,094
3
24
32

score 0 · Answer 4 · answered Oct 02 '15 at 23:10

Since you prefered to do this with toggleClass(), here you go:

$(document).ready(function(){

    var oldContent;

    $("#button").click(function(){
        if($(".newCont")[0]){
            $("h1").html(oldContent);
        } else {
            oldContent = $("h1").html();
            $("h1").html("New text here");
        }

        $("h1").toggleClass("newCont");
    });
});

Changing An Elements Content

4 Answers4