javascript - 根据输入范围更新显示的文本量

Question

我正在编写一个简单的 JavaScript 库，以根据 HTML5 输入范围 slider 更新元素中显示的文本量(即字数)。

我有两个执行算法的函数，但它们没有显示在 DOM 上。

HTML

<p>Text example:</p>

<section data-range="true">
  <input type="range" value="90">
  <p>This is some sample text that you can reduce. User Account Control (UAC) is a feature that can help you stay in control of your computer by informing you when a programs makes a change that requires administrator permissions. This can be helpful for several reasons, as it allows the user to view program changes and detect system corruption at a faster time.</p>
</section>

JS

/*  getInnerText
 *  Get inner text of range section
 *  @param nested child <p> element(s) of range section x
 *  @return array of words in the paragraph
*/
function getInnerText(el) {
    var p  = el;
    var innerText = p.innerText;
    return innerText.split(' ');
}

/*  updateInnerText
*   Update inner text based on range section
*/
function updateInnerText(el) {
    var rangeValue = el.srcElement.value;
    var arrayOfWords = getInnerText(el.srcElement.parentNode.children[1]);

    // update words to range value
    arrayOfWords.splice(arrayOfWords.length, arrayOfWords.length - rangeValue);

    // update values on DOM
    el.srcElement.parentNode.children[1].innerText = arrayOfWords.join(" ");
}

这是一个JSbin .

Answer 1

这是一个工作 JS Bin

// get all DOM elements with data-range attribute
var rangeElements = document.querySelectorAll("[data-range]");

// for each range element on DOM
for (var i = 0; i < rangeElements.length; i++) {

    // get x DOM element with [data-range] attribute
    var el = rangeElements[i];

    // get inputRange element
    var inputRange = el.children[0];

    // attach event listener
    eventListener(inputRange);

    // Text
    if (el.children[1].nodeName == "P") {
        var origText = el.children[1].innerHTML;
        el.children[1].setAttribute("data-text", origText);
        initilzeInputRange(0, origText.length, origText.length, 1);
    }

    // List
    else if (el.children[1].nodeName == "UL") {

    }

    // Image
    else if (el.children[1].nodeName == "IMG") {

    }
}

/*  initilzeInputRange
 *  Setup the default initial values for input range
 *  @param minimum value, maximum value, default value, step
 */
function initilzeInputRange(min, max, value, step) {
    inputRange.min = min;
    inputRange.max = max;
    inputRange.value = value;
    inputRange.step = step;
}

/*  getInnerText
 *   Get inner text of range section
 *  @param nested child <p> element(s) of range section x
 *  @return array of words in the paragraph
 */
function getInnerText(el) {
    var p  = el;
    var innerText = p.innerText;
    return innerText.split(' ');
}

/*  updateInnerText
 *   Update inner text based on range section
 */
 function updateInnerText(el, len) {
    el.srcElement.nextSibling.nextElementSibling.innerHTML = el.srcElement.nextSibling.nextElementSibling.getAttribute("data-text").substring(0, len);

    // var rangeValue = el.srcElement.value;
    // var arrayOfWords = getInnerText(el.srcElement.parentNode.children[1]);

    // update words to range value
    //arrayOfWords.splice(arrayOfWords.length, arrayOfWords.length - rangeValue);

    // update values on DOM
    //el.srcElement.parentNode.children[1].innerText = arrayOfWords.join(" ");
}

/*  eventListener */
function eventListener(el) {
    el.addEventListener('change', function(e) {
        updateInnerText(e, el.value);
        console.log('change~');
    });
}

基于您的代码的问题: 1.您没有在更改时绑定(bind)事件 2.您没有保存原文