Quickly changing range value on multiple text elements

[kylebelanger]

Issue:

There is a known bug when using the text range on p elements that have various lengths.

For example, p1 has 150 characters, p2 has 50 characters, and p3 has 10 characters. Using the range slider on elements in this context is buggy and causes some text within p elements to not show/hide correctly.

---

How to view issue:

Simply change the amount of text within various p elements, and use the input slider. Try moving the slider quickly, and slowly to view the text differences.

---

Possible solutions:

The algorithm in updateInnerText() is not performing quick enough when the range is changed (lines 93-109).

// if less than last paragraph, cut and break
if (cut < paragraphs[numParagraphs - 1]['length']) {
    target.parentNode.children[numParagraphs].innerHTML = paragraphs[numParagraphs - 1]['text'].substring(0, paragraphs[numParagraphs - 1]['length'] - cut);
}
// otherwise backwards loop to remove text in each p
else {
    for (var x = numParagraphs; x > 0; x--) {
        // if less than current p, cut and break
        if (cut < paragraphs[numParagraphs - 1]['length']) {
            target.parentNode.children[x].innerHTML = paragraphs[x - 1]['text'].substring(0, paragraphs[x - 1]['length'] - cut);
            break;
        }
        else {
            // remove this p
            target.parentNode.children[x].innerHTML = paragraphs[x - 1]['text'].substring(0, 0);
            // subtract this p length from cut total
            cut = cut - paragraphs[x - 1]['length'];
        }
    }
}