複数のテキストボックスとプログレスバーを使用したJavascript

Question

テキストボックス内の別の文字列を探しながらプログレスバーを埋めるためにjavascriptを書きました。私はそれを1つのプログレスバーのために働かせることができますが、もし私が2番目のプログレスバーを追加すれば、彼らはうまくいきません。

ここでは、1つのプログレスバーしか使用しない場合のコードを示します。

<script> 
    window.onload = function() { 
     load('TbProd1', 'myBar', 'LblProgBar1'); 
     load('TbProd2', 'myBar2', 'LblProgBar2'); 
    } 

    function load(TextboxID, BarID, LblBarID) { 
      var textarea1 = document.getElementById(TextboxID); 

      var word1 = "Vrijgegeven"; 
      var word2 = "Gepicked"; 
      var word3 = "Voltooid"; 

      var textValue = textarea1.value; 
      var elem = document.getElementById(BarID); 

      if (textValue == (word1)) { 

       var width = 10; 
       var id = setInterval(frame, 10); 
       function frame() { 
        if (width >= 25) { 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         document.getElementById(LblBarID).innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
      else if (textValue == (word2)){ 
       var width = 25; 
       var id = setInterval(frame, 10); 
       function frame() { 
        if (width >= 50) { 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         document.getElementById(LblBarID).innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
      else if (textValue == (word3)) { 
       var width = 50; 
       var id = setInterval(frame, 10); 
       function frame() { 
        if (width >= 100) { 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         document.getElementById(LblBarID).innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
} 
</script> 

私の再利用可能なコードに誤りがある：

<script> 
     function move1() { 
      var textarea1 = document.getElementById('TbProd1'); 

      var word1 = "Vrijgegeven"; 
      var word2 = "Gepicked"; 
      var word3 = "Voltooid"; 

      var textValue = textarea1.value; 
      var elem = document.getElementById("myBar"); 

      if (textValue == (word1)) { 

       var width = 10; 
       var id = setInterval(frame, 10); 
       function frame() { 
        if (width >= 25) { 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         document.getElementById("LblProgBar1").innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
      else if (textValue == (word2)){ 
       var width = 25; 
       var id = setInterval(frame, 10); 
       function frame() { 
        if (width >= 50) { 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         document.getElementById("LblProgBar1").innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
      else if (textValue == (word3)) { 
       var width = 50; 
       var id = setInterval(frame, 10); 
       function frame() { 
        if (width >= 100) { 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         document.getElementById("LblProgBar1").innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
} 
</script>  

、ここでは、複数の進捗バーのための私の再利用可能なスクリプトですか？それはwindow.move1とは関係がありますが、ドットは何を知っていますか。

Edit1：私のテキストボックスの値を読み取ることができないようですが、再利用可能なコードでリンクを作成するにはどうすればいいですか？

Answer 1

functionキーワードで宣言するのではなく、 'frame'関数をローカル変数に配置するようにしてください。そのような関数を宣言するだけで、JSエンジンで競合が発生し、変数の範囲が管理できないほど難しい（不可能と見なされます）ようになります。

var id = null, 
frameFunction = function() { 
    if (width >= 25) { 
     clearInterval(id); 
    } else { 
     width++; 
     elem.style.width = width + '%'; 
     document.getElementById(LblBarID).innerHTML = width * 1 + '%'; 
    } 
} 
id = setInterval(frameFunction , 10); 

よう

何かがまた、DOMは、操作のための準備ができる前にイベントがトリガさMIGHT window.onload。これにより、コードがdomオブジェクトと属性にアクセスできなくなります。

これは多くの点で解決できます。

1. jquery $（document）.ready（）;を使用します。
2. は

元を（すべての最新ブラウザで動作するはずです）だけDomReady（https://code.google.com/archive/p/domready/）

使用平野ECMAの実装のためにストリップダウンライブラリを使用してください。あなたは先端のために、最新のここ https://jsfiddle.net/zjhyqrff/1/