how to increment a number using jQuery for a footnote plugin in redactor.js

Question

I'm developing a plugin for redactor.js which allows users to add in footnotes. Eventually the footnotes will be written to a separate table on the database, but at the moment this is only a mockup - it's part of a much larger university project and it only needs to look like it's working at this stage. I'm very much a JS beginner by the way.

I've added a custom button to the editor which runs the function using a callback. As you can see, every time the button is pressed the fnCount variable is reset to 0. I don't know how to take the last value and increment it. I've seen some similar problems on here, but none of them were quite the same because I'm doing this using the redactor API.

here is my code:

// Insert footnote plugin

insertFootnote = function(){
    var fnCount = 0
    var fnAnchor = '<a href="#fn-' + ++fnCount + '"><sup>' + fnCount + '</sup></a>&nbsp'
    $('.edit').execCommand('inserthtml', fnAnchor);
}


// Initialise editor

$(document).ready(
    function()
    {       
        $('.edit').redactor({
            focus: true, 
            buttonsAdd: ['|', 'footnote', 'reference'], 
            buttonsCustom: {
                footnote: {
                    title: 'Insert footnote', 
                    callback: insertFootnote 
                },

            }
        });
    }
);

I've stuck an example up here: http://fclty.org/redactor/ the black button is the one which adds in the useless footnote. The white button is an unrelated, but equally useless, function so that can be ignored.

I realise that all I'm doing at the moment is inserting an anchor which goes nowhere, but one step at a time, eh? ;-)

score 1 · Accepted Answer · answered Aug 01 '12 at 21:27

If I'm understanding the question correctly, you just need to move the variable to an outer scope:

var fnCount = 0

insertFootnote = function(){    
    var fnAnchor = '<a href="#fn-' + ++fnCount + '"><sup>' + fnCount + '</sup></a>&nbsp'
    $('.edit').execCommand('inserthtml', fnAnchor);
}

Now the variable is not set to 0 each time it is called, it is instead set to 0 initially and then incremented on each call.

If the value should be tied to the element it is called on you can store it using data instead.

how to increment a number using jQuery for a footnote plugin in redactor.js

1 Answers1