单击时更改按钮文本，再次单击时将其更改回来

Question

how can i change the text of a button when clicked? and change it back when clicked again? i have this javascript i made.and its not giving me what i want.please help?

    $('#addbtn').click(function (){
    if(document.getElementById('addMat').style.display == "none"){
        document.getElementById('addMat').style.display= "inline";
        $(this).val('Cancel');
    }else
        document.getElementById('addMat').style.display= "none";
        $(this).val('Add Material');
});

Answer 1

Just do it all with jQuery syntax:

$('#addbtn').click(function (){
    var addMat = $('#addMat');
    if( addMat.css('display')  === 'none' ) {
      addMat.css('display','inline');
      $(this).val('Cancel');
    } else {
      addMat.css('display','none');
      $(this).val('Add Material');
    }
});