How to change a button's value? Jquery

Question

i have a button which expands and hides text. However im not sure how to change the value of the text. What i mean by that is when i click on the expand button that says "expand" it doesnt change to "hide" it stays as "expand". I tried it in javascript but wasn't completely sure how to apply it to the html :(

function btnChanger() {
    var i = 0;

    if(i % 2 == 0)
    {
        document.getElementById("hide").value="Hide";
    }
    else
    {
        document.getElementById("hide").value="Expand";
    }
    i++;
}

If it's easier to do in Jquery? Im not too sure, thank in advance :) Here is the Jfiddle: https://jsfiddle.net/dmgnsx17/3/

since you always declare `var i=0` inside function, it will always be 0 — charlietfl, Oct 04 '15 at 21:30
Your code is correct but you're re-initializing `i` to 0 each time. Reference a counter not local to the function, or do something like in this answer: http://stackoverflow.com/a/10671201/185034 — Paul, Oct 04 '15 at 21:31
just use `$("#hide").prop("value", "Expand/Hide")` or attr() — Sherali Turdiyev, Oct 04 '15 at 21:35

score 1 · Accepted Answer · 2015-10-04T21:33:39.933

You can do using both jQuery or JavaScript. Use this code instead of declaring any new or global variables, which might tend to attract erroneous values:

function btnChanger() {
    if (document.getElementById("hide").innerHTML == "Hide")
        document.getElementById("hide").innerHTML = "Expand";
    else
        document.getElementById("hide").innerHTML = "Hide";
}

To do the same thing in jQuery, you can use:

function btnChanger() {
    if ($("#hide").html() == "Hide")
        $("#hide").html("Expand");
    else
        $("#hide").html("Hide");
}

How to change a button's value? Jquery

1 Answers1