We Keep Coding

Javascript filled unsorted list auto scroll

I'm struggling to make this idea of mine work..
The idea is to auto-scroll the dynamically filled unsorted list.
This is how I've build the Unsorted List with List Items in JavaScript
$.getJSON(sportlink_url + 'programma?gebruiklokaleteamgegevens=NEE&aantaldagen=' + programma_dagen + '&eigenwedstrijden=JA&thuis=JA&uit=JA&' + sportlink_clientID, function (uitslag) {
for (let i = 0; i < Object.keys(uitslag).length; i++) {
//for (let i = 0; i < 1; i++) {
var aanvangstijd = uitslag[i].aanvangstijd;
var thuisteam = uitslag[i].thuisteam;
var uitteam = uitslag[i].uitteam;
var accommodatie = uitslag[i].accommodatie;
var competitiesoort = uitslag[i].competitiesoort;
var datumNumber = uitslag[i].datum.substring(0,2);
var datumMonth = uitslag[i].datum.slice(-4);
var datumMonthClean = datumMonth.substring(0,3);
//Fetch the DIV
var el = document.getElementById("match_program");
//Create new list item
var node = document.createElement("li");
node.setAttribute('role', 'presentation');
//Create ticketDiv
var ticketDiv = document.createElement("div");
ticketDiv.setAttribute('class', 'tg-ticket');
//Create timeBox
var timeBox = document.createElement("time");
timeBox.setAttribute('class', 'tg-matchdate');
timeBox.innerHTML = (datumNumber + " <span>" + datumMonthClean + "</span>");
//Create matchdetail
var matchDetail = document.createElement("div");
matchDetail.setAttribute('class', 'tg-matchdetail');
matchDetail.innerHTML = ("<h4>" + thuisteam + "<span> - </span>" + uitteam + "   |   " + aanvangstijd + ", " + accommodatie);
//Create themeTag
var themeTag = document.createElement("span");
themeTag.setAttribute('class', 'tg-theme-tag');
themeTag.innerHTML = (competitiesoort);
//Build the hole thing
ticketDiv.appendChild(timeBox);
matchDetail.appendChild(themeTag);
ticketDiv.appendChild(matchDetail)
node.appendChild(ticketDiv);
el.appendChild(node);
This is the Unsorted List in HTML
<ul id="match_program" class="tg-tickets tg-tabnav" role="tablist" data-autoscroll="">
</ul>
This is the function i'm currently using for auto-scroll, but it has .ulContent').height() > $('.ulContainer').height() and because my ulContent doesn't have a prefix height in CSS it's not going to work..
And I can't put a height prefix in CSS for the ulContent cause I don't know on forehand if it's going to be 500px of 800px, the unsorted list is being filled from a JSON string.
$(document).ready(function() {
if($('.ulContent').height() > $('.ulContainer').height()) {
setInterval(function () {
start();
}, 3000);
}
});
function animateContent(direction) {
var animationOffset = $('.ulContainer').height() - $('.ulContent').height();
if(direction == 'up') {
animationOffset = 0;
}
}
The animatie function is being called at the bottom of the HTML file just before the closing tags of the body

I manged to figure it out;
var amountGames = Object.keys(uitslag).length
var calulContent = amountGames * 116 + 500;
var setulContent = calulContent + "px";
document.getElementById('ulContent').style.height= setulContent;
That way the ulContent is always filled and the container uses a fixed number of 500px;

Uncaught ReferenceError: addFields is not defined

I hope someone will help me to solve this little problem with javascript. I did create a javascript function to render automatically 2 different forms according to the value selected by the user from a selectbox. The function is triggered when the user click on a button. The problem is that the forms are not generated instead i'm getting an error message: "Uncaught ReferenceError: addFields is not defined".
Html Code:
<div class="form-group " style="margin-left: 80%">
<div class="col-sm-10">
<button type="button" class="btn btn-success btn-lg" onclick="addFields()">Formular erstellen</button>
</div>
</div>
Javascript code:
<script type="text/javascript">
function addFields() {
// Number of inputs to create
var number = document.getElementById("anzahlFragen").value;
// Type of Quiz
var type = document.getElementById("quizTyp");
var selectedType = type.options[type.selectedIndex].text;
// Container <div> where dynamic content will be placed
var myContainer = document.getElementById("myContainer");
// Clear previous contents of the container
while (myContainer.hasChildNodes()) {
myContainer.removeChild(myContainer.lastChild);
}
if (selectedType === "Multiple choices") {
for (i = 1; i <= number; i++) {
var div1 = document.createElement("div");
div1.className = "form-group";
var div2 = document.createElement("div");
div2.className = "col-sm-9";
var labelFr = document.createElement("label");
var tFr = document.createTextNode("Frage Nr " + i);
labelFr.appendChild(tFr);
labelFr.className = "col-sm-2 control-label";
div1.appendChild(labelFr);
var inputFr = document.createElement("input");
inputFr.type = "text";
inputFr.name = "frage" + i;
inputFr.className = "form-control round-form";
div2.appendChild(inputFr);
div2.appendChild(document.createElement("br"));
for (j = 1; j <= 4; j++) {
var labelAn = document.createElement("label");
var tAn = document.createTextNode("Antwort Nr " + i + j);
labelAn.appendChild(tAn);
div2.appendChild(labelAn);
var inputAn = document.createElement("input");
inputAn.type = "text";
inputAn.name = "antwort" + i + j;
inputAn.className = "form-control round-form";
div2.appendChild(inputAn);
var labelRichtig = document.createElement("label");
var tRichtig = document.createTextNode("Richtig " + i + j);
labelRichtig.appendChild(tRichtig);
div2.appendChild(labelRichtig);
var richtigAn = document.createElement("input");
richtigAn.type = "radio";
richtigAn.name = "Richtig" + i;
div2.appendChild(richtigAn);
div2.appendChild(document.createElement("br"));
div2.appendChild(document.createElement("br"));
}
div1.appendChild(div2);
myContainer.appendChild(div1);
myContainer.appendChild(document.createElement("br"));
}
} else {
for (i = 1; i <= number; i++) {
var div1 = document.createElement("div");
div1.className = "form-group";
var div2 = document.createElement("div");
div2.className = "col-sm-9";
var labelFr = document.createElement("label");
var tFr = document.createTextNode("Frage Nr " + i);
labelFr.appendChild(tFr);
labelFr.className = "col-sm-2 control-label";
div1.appendChild(labelFr);
var inputFr = document.createElement("input");
inputFr.type = "text";
inputFr.name = "frage" + i;
inputFr.className = "form-control round-form";
div2.appendChild(inputFr);
div2.appendChild(document.createElement("br"));
for (j = 1; j <= 4; j++) {
var labelAn = document.createElement("label");
var tAn = document.createTextNode("Antwort Nr " + i + j);
labelAn.appendChild(tAn);
div2.appendChild(labelAn);
var inputAn = document.createElement("input");
inputAn.type = "text";
inputAn.name = "antwort" + i + j;
inputAn.className = "form-control round-form";
div2.appendChild(inputAn);
var profilAn = document.createElement("select");
profilAn.name = "profil" + i + j;
div2.appendChild(profilAn);
optionAn1 = document.createElement("option");
optionAn1.setAttribute("value", "1"),
var optionT1 = document.createTextNode("Profil 1");
optionAn1.appendChild(optionT1);
optionAn2 = document.createElement("option");
optionAn2.setAttribute("value", "2"),
var optionT2 = document.createTextNode("Profil 2");
optionAn2.appendChild(optionT2);
optionAn3 = document.createElement("option");
optionAn3.setAttribute("value", "3"),
var optionT3 = document.createTextNode("Profil 3");
optionAn3.appendChild(optionT3);
optionAn4 = document.createElement("option");
optionAn4.setAttribute("value", "4"),
var optionT4 = document.createTextNode("Profil 4");
optionAn4.appendChild(optionT4);
document.getElementsByTagName("select").appendChild(optionAn1);
document.getElementsByTagName("select").appendChild(optionAn2);
document.getElementsByTagName("select").appendChild(optionAn3);
document.getElementsByTagName("select").appendChild(optionAn4);
div2.appendChild(document.createElement("br"));
div2.appendChild(document.createElement("br"));
}
div1.appendChild(div2);
myContainer.appendChild(div1);
myContainer.appendChild(document.createElement("br"));
}
}
}
</script>

You have placed commas instead of semicolon at the end of the lines above the declaration of the variables optionT1, optionT2, optionT3and optionT4.

Jquery UI Sortable not working in Dynamic container

I have a container where I dynamically add sections, I create items inside the section , that should be sortable, But Jquery sortable does not work inside dynamically created containers, while if I give the containers static it works,
Can anyone please share a solution.Thanks
https://jsfiddle.net/anubala/7ut5wk3j/1/
HTML:
<div class='row page-layout'>
<div class='col-md-10 col-md-offset-1' >
<div class="add_section_div">
<p>Add section</p>
</div>
<div id="contents">
</div>
</div>
</div>
JavaScript:
$(".wrap_body").sortable();
$(".add_section_div").on("click", function() {
var $section = "<div class='section_div'><div class='div_header clearfix'><p class='pull-left'>Add Wrap</p></div><div class='section_body div_body'></div></div>";
$("#contents").append($section);
})
$("body").on("click", ".section_div>.div_header", function() {
var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
$(this).parent().find('.section_body').append($wrap);
})
const regex = /^.*-\s*(.*)$/;
$("body").on("click", ".wrap_div>.div_header", function() {
var $item1 = "<div class='drag col-sm-";
var $item2 = "'><div class='item_div'><div class='div_header clearfix'><p class='pull-left'><span class='minus'><i class='fa fa-minus'></i></span><span class='plus'><i class='fa fa-plus'></i></span></p><p class='pull-left header_text'>";
var $item3 = "</p></div><div class='div_body'></div></div></div>";
var length_item = $(this).parent().find(".wrap_body .item_div").length;
var count = 0;
for (i = 0; i < length_item; i++) {
if ($(this).parent().find(".wrap_body>div:eq('" + i + "')")) {
console.log($(this).parent().find(".wrap_body>div:eq('" + i + "')"))
var col_count_text = $(this).parent().find(".wrap_body>div:eq('" + i + "')").attr('class');
count += parseInt(find_col_count(col_count_text));
}
}
var current_col_count = 12 - (count % 12);
if (count < 12) {
$(this).parent().find('.wrap_body').append($item1 + current_col_count + $item2 + "col-sm-" + current_col_count + $item3);
}
})
function find_col_count(col_text) {
var col_count = regex.exec(col_text);
col_count.forEach((match, groupIndex) => {
count1 = match;
});
return count1;
}
$("body").on("click", ".plus", function() {
var $parent = $(this).parent().parent().parent().parent();
var col_count_text = $parent.attr('class');
var length_item = $parent.parent().find(".item_div").length;
var count = 0;
for (i = 0; i < length_item; i++) {
if ($parent.parent().find(".item_div:eq('" + i + "')").parent()) {
var col_count_text = $parent.parent().find(".item_div:eq('" + i + "')").parent().attr('class');
count += parseInt(find_col_count(col_count_text));
}
}
var col_count_text = $parent.attr('class');
var col_count = find_col_count(col_count_text);
if (count < 12) {
var col_count_new = "col-sm-" + (++col_count);
var col_count_drag = "drag " + col_count_new;
$parent.attr("class", col_count_drag);
$parent.find(".header_text").html(col_count_new);
}
});
$("body").on("click", ".minus", function() {
var $parent = $(this).parent().parent().parent().parent();
var col_count_text = $parent.attr('class');
var col_count = find_col_count(col_count_text);
if (col_count > 1) {
var col_count_new = "col-sm-" + (--col_count);
var col_count_drag = "drag " + col_count_new;
$parent.attr("class", col_count_drag);
$parent.find(".header_text").html(col_count_new);
}
});

You probably may have found the solution already but to solve this issue you only need to move this line
$(".wrap_body").sortable();
To where you actually append the .wrapper_body to the body as following:
$("body").on("click", ".section_div>.div_header", function() {
var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
$(this).parent().find('.section_body').append($wrap);
$(".wrap_body").sortable();
});
This should solve your problem. See JsFiddle

Get the text from textarea line by line?

HTML Code
<textarea id="test"></textarea>
<button id="button_test">Ok</button>
Javascript
$(document).ready(function()
{
$("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");
});
$("#button_test").on("click",function()
{
var as=document.getElementById("test").value;
console.log(as);
});
We can get the values from textarea line by line using val and split functions. But
Is it possible to get the value from textarea line by line for very long word?.In the example i need to get the output as 123e2oierhqwpoiefdhqwo and pidfhjcospid as separate values.
Jsfiddle link here

You can use something like this. This will insert line breaks into into the textarea.
Credits: https://stackoverflow.com/a/4722395/4645728
$(document).ready(function() {
$("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");
});
$("#button_test").on("click", function() {
ApplyLineBreaks("test");
var as = document.getElementById("test").value;
console.log(as);
});
//https://stackoverflow.com/a/4722395/4645728
function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
oTextarea.setAttribute("wrap", "off");
} else {
oTextarea.setAttribute("wrap", "off");
var newArea = oTextarea.cloneNode(true);
newArea.value = oTextarea.value;
oTextarea.parentNode.replaceChild(newArea, oTextarea);
oTextarea = newArea;
}
var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;
for (var i = 0; i < strRawValue.length; i++) {
var curChar = strRawValue.charAt(i);
if (curChar == ' ' || curChar == '-' || curChar == '+')
nLastWrappingIndex = i;
oTextarea.value += curChar;
if (oTextarea.scrollWidth > nEmptyWidth) {
var buffer = "";
if (nLastWrappingIndex >= 0) {
for (var j = nLastWrappingIndex + 1; j < i; j++)
buffer += strRawValue.charAt(j);
nLastWrappingIndex = -1;
}
buffer += curChar;
oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
oTextarea.value += "\n" + buffer;
}
}
oTextarea.setAttribute("wrap", "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="test"></textarea>
<button id="button_test">Ok</button>

Use .match(/pattern/g). As your OP ,pattern should start \w (Find a word character) and match string sequence {start,end}
$("#button_test").on("click",function()
{
var as=document.getElementById("test").value;
console.log(as.match(/(\w{1,22})/g));
});

If you made the textarea width fixed using css you could do this:
css
textarea { resize: vertical; }
javascript
$("#button_test").on("click",function(){
var as=document.getElementById("test").value;
var len = document.getElementById("test").cols;
var chunks = [];
for (var i = 0, charsLength = as.length; i < charsLength; i += len) {
chunks.push(as.substring(i, i + len));
}
console.log(chunks);
});

This is probly not the best way, but it works and i hope it could help you.
First thing, i found the textarea allow 8px for default fontsize charactere.
Exemple :
Textarea with 80px
=> Allow line with 10 char maximum, all other are overflow on new line.
From this you can do a simple function like this :
$("#button_test").on("click",function()
{
console.clear();
var length_area = $("#test").width();
var length_value = $("#test").val().length;
var index = Math.trunc(length_area/8);
var finalstr = $("#test").val().substring(0, index) + " " + $("#test").val().substring(index);
console.log(finalstr);
});
Here the JSFiddle

The <textarea> element has built in functionality to control where words wrap. The cols attribute can be set (either harded coded in the HTML or set with the .attr() method using jQuery). The attribute extends the text area horizontally and it also automatically wraps text at the set value.
Example jsFiddle
$("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");
var newString = $("#test").val().toString();
var splitString = parseInt($("#test").attr("cols"), 10) + 1;
var stringArray = [];
stringArray.push(newString);
var lineOne = stringArray[0].slice(0, splitString);
var lineTwo = stringArray[0].slice(splitString);
var lineBreakString = lineOne + "\n" + lineTwo;
console.log(lineTwo);
$('#test').after("<pre>" + lineBreakString + "</pre>");
$("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");
var newString = $("#test").val().toString();
var splitString = parseInt($("#test").attr("cols"), 10) + 1;
var stringArray = [];
stringArray.push(newString);
var lineOne = stringArray[0].slice(0, splitString);
var lineTwo = stringArray[0].slice(splitString);
var lineBreakString = lineOne + "\n" + lineTwo;
$('#test').after("<pre>" + lineBreakString + "</pre>");
//console.log(lineBreakString);
pre {
color: green;
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea id="test" cols='21'></textarea>
<button id="button_test">Ok</button>
The example addresses the specific question asked. If you want to deal with larger blocks of text, you should use the .each() method and for loops to iterate over each line break.
Documentation:
.slice()
textarea
.push()
.parseInt()
.attr()

how to display the previous user input along with the new input

I am new to Html and I am trying to create a script to display user input back to the user.whenever i am entering a new input,the new user input over rides the previous input. but i need to display all the user inputs? how to do it using Javascript.
my code
<html><head></head><body>
<input id="title" type="text" >
<input type="submit" value="Save/Show" onclick="clearAndShow()" />
<div id="display2letter"></div>
<div id="display3letter"></div>
<div id="display4letter"></div>
<script type="text/javascript">
var titleInput = document.getElementById("title");
var display2letter = document.getElementById("display2letter");
var display3letter = document.getElementById("display3letter");
var display4letter = document.getElementById("display4letter");
function clearAndShow () {
// Split input box value by comma
titles = titleInput.value.split(",");
// Reset display divs
display2letter.innerHTML = "";
display3letter.innerHTML = "";
display4letter.innerHTML = "";
// Cache length so it's not recalculated on each iteration.
var len = titles.length;
var twoletter = [];
var threeletter = [];
var fourletter =[];
for (i = 0; i < len; i++) {
// Check for a-z, A-Z,
if (!titles[i].match(/^[a-zA-Z]/)) {
throw error("Please use only alphabet letters");
}
// Dump into storage arrays.
if(titles[i].length == 2) {
twoletter.push(titles[i]);
}
else if(titles[i].length == 3){
threeletter.push(titles[i]);
}
else if(titles[i].length == 4){
fourletter.push(titles[i]);
}
}
display2letter.innerHTML += " 2 letters: " + twoletter.join(", ") + "<br/>";
display3letter.innerHTML += " 3 letters: " + threeletter.join(", ") + "<br/>";
display4letter.innerHTML += " 4 letters: " + fourletter.join(", ") + "<br/>";
}
</script>
</body>
</html>

Try declaring these variables -
var twoletter = [];
var threeletter = [];
var fourletter =[];
before the clearAndShow () function, ie,
<script type="text/javascript">
var titleInput = document.getElementById("title");
var display2letter = document.getElementById("display2letter");
var display3letter = document.getElementById("display3letter");
var display4letter = document.getElementById("display4letter");
var twoletter = [];
var threeletter = [];
var fourletter =[];
function clearAndShow () {