JSループ内でブートストラップスライダを作成する

Question

私は、ユーザーが一度に1つのアイテムをリストとして作成できるようにするJS機能をアプリケーションに持っています。私は今、各アイテムにブートストラップスライダを与えようとしていますが、困難に遭遇しています。私はJSには新しいので、ここにはいくつかの悪い考えがあるかもしれません。現在のところ、forループの追加されたhtml内にある<p>タグの外にあるものすべてを取り出すと、意図したとおりに動作しますが、その中にはすべてUncaught TypeError: Cannot read property 'getAttribute' of nullというコンソールエラーがレンダリングされます。

var proArray = []; 
 
\t function addPro() { 
 
\t \t proArray.push(document.getElementById("proInput").value); 
 
\t \t document.getElementById("proForm").reset(); 
 
\t \t console.log(proArray); 
 
\t \t for (var i = 0; i < proArray.length; i++) { 
 
\t   \t newItem = "<li><p>" + proArray[i] + "</p><input class='bootstrap-slider' type='text' id='proInput" + i + "' data-slider-id='proInput" + i + "' data-slider-min='0' data-slider-max='10' data-slider-value='5' /></li>"; 
 
\t \t } 
 
     \t var slider = new Slider('#proInput0', { 
 
\t \t \t formatter: function(value) { 
 
\t \t \t \t return 'Current value: ' + value; 
 
\t \t \t } 
 
\t \t }); 
 
     \t document.getElementById("proList").innerHTML += newItem; 
 
\t } 
 

 
    $('#proInput0').slider({ 
 
\t formatter: function(value) { 
 
\t \t return 'Current value: ' + value; 
 
\t } 
 
    });

<form id="proForm" onkeypress="return event.keyCode != 13;"> 
 
\t  \t \t <input class="form-control text-left pro-con-input" id="proInput" placeholder="Add New Benefit" /> 
 
\t  \t <div onclick="addPro()" class="btn pro-con-btn">Add</div> 
 
    \t \t </form> 
 
\t  \t <h3 class="text-left">Benefits</h3> 
 
\t  \t <ul class="text-left" id="proList"> 
 
\t  \t </ul>

私は間違って行くと/これを行うか、どのようにより良いよどこ誰もが把握助けることができますか？

Answer 1

主な問題は、あなたが飛ぶ新しい要素に作成する方法に関連している：あなたは、変数を作成し、forループで

を、後にいますが、DOMに新しい要素を追加した後にのみスライダを作成します。

同じIDを持つ要素がすでに存在するかどうかはテストしません。

主に、今後の使用のためにスライダオブジェクトを保存しないでください。

新しいスライダを作成するたびに、それを機能させるために数ミリ秒後に破棄して再作成する必要があります。

スニペット：

var proArray = []; 
 
function addPro() { 
 
    var val = document.getElementById("proInput").value.trim(); 
 
    document.getElementById("proForm").reset(); 
 
    if (val.length == 0) { 
 
     return; 
 
    } 
 
    if (document.getElementById('proInput' + val) == null) { 
 
     proArray.push({id: val, slider: null}); 
 
    } else { 
 
     return; 
 
    } 
 
    for (var i = 0; i < proArray.length; i++) { 
 
     var ele = document.getElementById('proInput' + proArray[i].id); 
 
     if (ele == null) { 
 
      var newItem = "<li><p>" + proArray[i].id + "</p><input class='bootstrap-slider' type='text' value='' id='proInput" + 
 
        proArray[i].id + "' data-slider-id='SIDproInput" + proArray[i].id 
 
        + "' data-slider-min='0' data-slider-max='10' data-slider-value='5'/></li>"; 
 
      document.getElementById("proList").innerHTML += newItem; 
 
      proArray[i].slider = new Slider('#proInput' + proArray[i].id, { 
 
       formatter: function(value) { 
 
        return 'Current value: ' + value; 
 
       } 
 
      }); 
 
     } else { 
 
      (function(i) { 
 
       setTimeout(function() { 
 
        var val = proArray[i].slider.getValue(); 
 
        proArray[i].slider.destroy(); 
 
        document.getElementById('SIDproInput' + proArray[i].id).remove(); 
 
        proArray[i].slider = new Slider('#proInput' + proArray[i].id, { 
 
         formatter: function (value) { 
 
          return 'Current value: ' + value; 
 
         } 
 
        }); 
 
        proArray[i].slider.setValue(val); 
 
       }, 100); 
 
      })(i); 
 
     } 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/bootstrap-slider.min.js"></script> 
 

 

 

 
<form id="proForm" onkeypress="return event.keyCode != 13;"> 
 
    <input class="form-control text-left pro-con-input" id="proInput" placeholder="Add New Benefit"/> 
 

 
    <div onclick="addPro()" class="btn pro-con-btn">Add</div> 
 
</form> 
 
<h3 class="text-left">Benefits</h3> 
 
<ul class="text-left" id="proList"> 
 
</ul>