根據輸入範圍更新顯示的文本量

Question

我正在寫一個簡單的JavaScript庫來更新基於HTML5輸入範圍滑塊的元素中顯示的文本數量（即單詞數量）。

我有兩個函數執行算法，但它們不顯示在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.你是不是在變化 2.綁定事件你沒有保存原文

Answer 2

嗨如果我理解你的問題，你想什麼，這可能是幫助你。

我覺得你寫了太多javascript的代碼我完全改變了你的編碼，並以我的方式實現。

$(document).ready(function(){ 

    $("#myValue").val($("#myText").text()); 

    $("input[type=range]").change(function(){ 

     updateInnerText(); 

    }); 



});   
    /* updateInnerText 
    * Update inner text based on range section 
    */ 
    function updateInnerText() { 
     var arrayOfWords = $("#myValue").val().split(" "); 

     var rangeValue=$("input[type=range]").val(); 

     var count=parseInt(arrayOfWords.length*rangeValue/100); 

     // update words to range value 
     arrayOfWords.splice(0, count); 

     // update values on DOM 
     $("#myText").text(arrayOfWords.join(" ")); 
    } 

它幾乎做到了，你要提供現場演示，這裏是什麼樣子採取：demo

如果您還有任何問題隨時問。