Creating Bootstrap Slider Inside JS For Loop

Question

I have a JS feature in my app that allows the user to create a list one item at a time. I am trying now to give each item a bootstrap slider, but am encountering difficulties. I'm new to JS, so there might be some bad ideas in here (ones I would love help correcting). As it stands currently, if I take everything outside the <p> tags inside the for loop's added html out it works as intended, but with everything in it it renders a console error stating Uncaught TypeError: Cannot read property 'getAttribute' of null.

var proArray = [];
	function addPro() {
		proArray.push(document.getElementById("proInput").value);
		document.getElementById("proForm").reset();
		console.log(proArray);
	  	for (var i = 0; i < proArray.length; i++) {
	       	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>";
	  	}
       	var slider = new Slider('#proInput0', {
			formatter: function(value) {
				return 'Current value: ' + value;
			}
		});
       	document.getElementById("proList").innerHTML += newItem;
	}

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

<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>

Can anyone help figure out where I'm going wrong and/or how to do this better?

Your example does not include bootstrap so it isn't a good example of the problem you're having. For me it is working fine, just giving a bootstrap slider error. — Tricky12
– Tricky12, Commented Apr 11, 2017 at 14:28
@Tricky12, I updated the snippet. I think that is what you meant... — Liz
– Liz, Commented Apr 11, 2017 at 14:37

gaetanoM · Accepted Answer · 2017-04-11 17:30:46Z

The main issue is related on how you create on the fly the new elements:

In the for loop you create a variable, after create the slider but only after you append to the dom the new elements.

You never test if an element with the same id already exists.

Mainly, you never save the slider objects for future usage.

Every time you create a new slider you need to destroy and recreate it after a few milliseconds in order to make it works.

The snippet:

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>

Oh sweet lord I would never have figured that out. Thank you!
Okay, I think I might have messed something up with the implementation. Care to save my neck again? stackoverflow.com/questions/43353164/…

Collectives™ on Stack Overflow

Creating Bootstrap Slider Inside JS For Loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related