Adding an inner script inside of a dynamic number of elements in Javascript?

[Remixt]

I'm working on a project at my university using Javascript. I'm new to web development, but a fairly seasoned OO programmer. (Java and C++)

 

I'm trying to use a library called jscolor to bring a pop up color changing picker for a bar graph, and there can be up to a thousand separate bars depending on what kind of data the user wants to represent.

 

My problem here is that I can't get the script to work from within another Javascript file, even though it works fine for changing the website background color when placed in the index.html file.

 

Here is what my code looks like for changing the background of the whole website: (This functions correctly)

 

<script src="libs/jscolor/jscolor.js"></script>
<label>Site Background:</label>
<input class="jscolor" id="siteColorInput" type="text" onInput="changeSiteBg()" onchange="changeSiteBg()" title="Change Site Background Color">

Here is the JavaScript code that I'm trying to use in order to allow changing the colors of each individual bar on the graph: (Doesn't work)

 

var newColor = lineColors[i-1];
		var entry = document.createElement('li');
		var script = document.createElement('script');
		var textInput = document.createElement('input');
		var toggleBox = document.createElement('input');
		var inputDiv = document.createElement('div');
		var inputLabel = document.createElement('label');
		var keyValue = document.createElement('p');

    if(type === "line"){
			var keyLabel = document.createTextNode(shapes[(i-1)%6]);
		}
		else if(type === "scatter"){
			var keyLabel = document.createTextNode(shapes[0]);
		}
    else if(type === "bar"){
			var keyLabel = document.createElement('canvas');
			keyLabel.setAttribute("style","padding:0px; height:24px; width:65px;")
			var ctx = keyLabel.getContext("2d");
			ctx.fillStyle = newColor;
			ctx.fillRect(0,0,9999,9999);
			keyLabel.style.border = "2px solid " + findContrastor(convertRGBtoHex(newColor));
			//keyLabel.setAttribute("style", "background:" + newColor);
			keyLabel.setAttribute("class", "colorblock");
		}
		if(hidden.length<= i-1){
			hidden.push(true);
		}
		inputBoxArray.push(textInput);
		script.setAttribute("src","libs/jscolor/jscolor.js");
		toggleBox.setAttribute("id", "lineToggleBox" + i);
		textInput.setAttribute("class", "jscolor");
		textInput.setAttribute("type", "text");
		textInput.setAttribute("title", "Enter Color");
		textInput.setAttribute("aria-label", "Enter Color");
		inputDiv.setAttribute("class","squaredTwo");
		inputDiv.style.marginTop = "3%";
		inputLabel.setAttribute("for","lineToggleBox" + i);
		toggleBox.setAttribute("type", "checkbox");
		textInput.setAttribute("style","width:120px; font-size:20px;margin:3% 2% 0% 2%;");
		if(hidden[i-1]===true)
			toggleBox.setAttribute("checked", "checked");
		toggleBox.setAttribute("title", "Display Data Set " + i);
		inputLabel.setAttribute("title", "Display Data Set " + i);
		inputDiv.appendChild(toggleBox);
		inputDiv.appendChild(inputLabel);
		var conColor = lineColors[i-1];
		conColor = convertRGBtoHex(conColor);
		keyValue.setAttribute("style", "color:" + newColor +"; display: inline;");
		if(type != "bar"){
			keyValue.style.background=findContrastor(conColor);
		}
		else{
			keyValue.style.borderColor = findContrastor(conColor);
		}

 

[Mr_KoKa]

The working and the not functional one snippets differ a lot, do you appendChild those elements you create? Because only creating them means that they exists only in memory but not on page, you would need to append them.

[Remixt]

6 minutes ago, Mr_KoKa said:

The working and the not functional one snippets differ a lot, do you appendChild those elements you create? Because only creating them means that they exists only in memory but not on page, you would need to append them.

I just got it figured out. It required adding a line of code that reinitializes the library. 

 

	document.getElementById("myChart").setAttribute("title","image of graph"); // by setting the attribute we can make the chart accessible
    $(document).ready(function () {
        jscolor.installByClassName("jscolor");
    });