We Keep Coding

javascript on a webpage displaying text wrongly

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.
This seems to be the code where it displays the text.
For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.
How do i fix this?
var questions = <?=$questions;?>;
// Initialize variables
//------------------------------------------------------------------
var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;
var currentIndex = 0;
var currentQuestion = questions[currentIndex];
var prevousQuestion;
var previousIndex = 0;
var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';
// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
if (currentIndex != 0) {
// create again submit button only for next pages
ulTag.innerHTML ='';
button.innerHTML = 'Submit';
button.className = 'submit';
button.id = 'submit';
if(quizPage<=questions.length){
//update the number of questions displayed
document.getElementById('quizNumber').innerHTML = quizPage;
}
}
//Display Results in the final page
if (currentIndex == (questions.length)) {
ulTag.innerHTML = '';
document.getElementById('question').innerHTML = '';
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
showResults();
return
}
questionTitle.innerHTML = "Question No:" + quizPage + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
if(currentQuestion.question.filename !== ''){
var br = document.createElement('br');
questionTitle .appendChild(br);
var img = document.createElement('img');
img.src = currentQuestion.question.filename;
img.className = 'imagecenter';
img.width = 750;
img.height = 350;
questionTitle .appendChild(img);
}
// create a for loop to generate the options and display them in the page
for (var i = 0; i < currentQuestion.options.length; i++) {
// creating options
var newAns = document.createElement('li');
newAns.id = 'ans'+ (i+1);
newAns.className = "notSelected listyle";
var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
newAns.appendChild(textAns);
if(currentQuestion.options[i].file !== ''){
var br = document.createElement('br');
newAns .appendChild(br);
var img1 = document.createElement('img');
img1.src = currentQuestion.options[i].file;
img1.className = 'optionimg';
img1.width = 250;
img1.height = 250;
newAns .appendChild(img1);
newAns .appendChild(br);
}
var addNewAnsHere = document.getElementById('options');
addNewAnsHere.appendChild(newAns);
}
//.click() will return the result of $('.notSelected')
var $liTags = $('.notSelected').click(function(list) {
list.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.notSelected')
//instead of the saved $litTags
$liTags.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
//get id name of clicked answer
for (var i = 0; i < currentQuestion.options.length ; i++) {
// console.log(liTagsid[i]);
if($liTags[i].className == "notSelected listyle selected"){
//store information to check answer
tags = $liTags[i].id;
// tagsClass = $LiTags.className;
tagsClassName = $liTags[i];
}
}
});
//check answer once it has been submitted
button.onclick = function (){
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
setTimeout(function() { checkAnswer(); }, 100);
};
}
//self calling function
showQuestions();
The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?
edit: here is html/css code
<style>
/*========================================================
Quiz Section
========================================================*/
/*styling quiz area*/
.main {
background-color: white;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
/*white-space: nowrap;*/
}
/*Editing the number of questions*/
.spanclass {
font-size: x-large;
}
#pages{
border: 3px solid;
display: inline-flex;
border-radius: 0.5em;
float: right;
}
#question{
word-break: break-all;
}
/*format text*/
p {
text-align: left;
font-size: x-large;
padding: 10px 10px 0;
}
.optionimg{
border: 2px solid black;
border-radius: 1.5em;
}
/*Form area width*/
/*formatting answers*/
.listyle {
list-style-type: none;
text-align: left;
background-color: transparent;
margin: 10px 5px;
padding: 5px 10px;
border: 1px solid lightgray;
border-radius: 0.5em;
font-weight: normal;
font-size: x-large;
display: inline-grid;
width: 48%;
height: 300px;
overflow: auto;
}
.listyle:hover {
background: #ECEEF0;
cursor: pointer;
}
/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
background: #FFDEAD;
}
/*change correct answer background*/
.correct, .correct:hover {
background: #9ACD32;
color: white;
}
/*change wrong answer background*/
.wrong, .wrong:hover {
background: #db3c3c;
color: white;
}
/*========================================================
Submit Button
========================================================*/
.main button {
text-transform: uppercase;
width: 20%;
border: none;
padding: 15px;
color: #FFFFFF;
}
.submit:hover, .submit:active, .submit:focus {
background: #43A047;
}
.submit {
background: #4CAF50;
min-width: 120px;
}
/*next question button*/
.next {
background: #fa994a;
min-width: 120px;
}
.next:hover, .next:active, .next:focus {
background: #e38a42;
}
.restart {
background-color:
}
/*========================================================
Results
========================================================*/
.circle{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #31a2ac;
}
.score {
position: absolute;
width: 100%;
top: 1.7em;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}
.circle p {
margin: 400px;
}
/*========================================================
Confeeti Effect
========================================================*/
canvas{
position:absolute;
left:0;
top:11em;
z-index:0;
border:0px solid #000;
}
.imagecenter{
display: block;
margin: 0 auto;
}
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
#media only screen and (max-width: 900px){
.listyle {
width: 100% !important;
height: auto !important;
}
.imagecenter {
width: 100% !important;
}
.listyle img{
width: inherit !important;
height: unset !important;
}
.ulclass
{
padding:0px !important;
}
}
</style>
<!-- Main page -->
<div class="main">
<!-- Number of Question -->
<div class="wrapper" id="pages">
<span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
</div>
<!-- Quiz Question -->
<div class="quiz-questions" id="display-area">
<p id="question"></p>
<ul class="ulclass" id="options">
</ul>
<div id="quiz-results" class="text-center">
<button type="button" name="button" class="submit" id="submit">Submit</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

I'm guessing that #question{ word-break: break-all; } is probably the culprit then? –
CB..yes that fixed it:)

How to hide DIV scrollbar while being able to view the whole div

I am dynamically adding new div's to a div container, the problem i'm facing is that the div is probably just a few pixels too big and therefore spawns a scrollbar that is pretty much useless, but with overflow: hidden; a little bit of the div gets cut off. I'm looking to make the div little bit larger in height, applying height: 100%; didn't work. This is how I'm creating the divs
function layerCreatorX(submission) { // creator for normal layers
let unique_id = uuidv4() // created unique IDs
let wrapDiv = document.createElement("div")
wrapDiv.id = "wrapDiv" + unique_id
let activeLayerIcon = document.createElement("IMG")
activeLayerIcon.setAttribute("class", "activeLayerOff")
activeLayerIcon.setAttribute("name", "activeLayerIcon")
let invisibilityIcon = document.createElement("IMG")
invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
invisibilityIcon.setAttribute("name", "invisibilityIcon")
let visibilityIcon = document.createElement("IMG")
visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
visibilityIcon.setAttribute("name", "visibilityIcon")
let line = document.createElement("hr")
line.setAttribute("style", "margin-top: 0px;")
line.className = "greyLine" //grey line will go underneath the div
let x = document.createElement("span")
let t = document.createTextNode(submission)
layerArray.push(unique_id)
layerNamesForComparison.push(submission) //new name comparator
x.className = "item item-layer"
x.id = unique_id
t.className = "noselect"
x.appendChild(activeLayerIcon)
x.appendChild(t)
x.appendChild(invisibilityIcon)
x.appendChild(visibilityIcon)
wrapDiv.appendChild(x)
wrapDiv.className = "LayerListDiv"
document.querySelector('.LayerList').appendChild(wrapDiv)
document.querySelector('.LayerList').appendChild(line)
}
and this is how they look when I create them:
I want to get rid of the vertical scrollbar on the right but still be able to view the whole div, if I use overflow hidden, the <hr> line from the bottom gets cut off and I can't see it anymore.
.LayerList CSS:
.LayerList {
user-select: none;
overflow: auto;
right: -15px;
width: 100%;
max-height: calc(93% - 60px); /*This height has to stay*/
}
Edit: added snippet
//modals
let modal = document.getElementById("myModal")
let btn = document.getElementById("btnCreate")
let span = document.getElementsByClassName("close")[0]
const div = document.getElementById('layerList')
//layer variables
let layerName
let layerId
let layerVisible
let layerLock
let layerNote
let layerActive
let layerJSObject = []
//other vars
let files //stores json file
let data //stores json file data
let layerArray = [] //stores all layer id's in array for comparison purposes
let layerNamesForComparison = [] //stores names of layers, so that duplicates are not created
//miro vars
let widgetName
let selectedWidgets = []// listener var to store all widget info in
let selectedWidgetIDs = []
// will store id's of widgets currently selected until they are saved into a layer
let superObjectID
//DB vras
let globalToken
let responseToken
let boardId
let availableBoards
let recordId
//timestamp
let timeStamp
let account
let availableResults
let onlineMode
let activeLayer = 0
let activeLayerState
//widgetDisplayer()
//CSS vars
let xDiv
let DeleteLayerButton = document.getElementById("btnDelete").disabled = true
let AddObjectsButton = document.getElementById("btnMove").disabled = true
let RemoveObjectsButton = document.getElementById("btnRemove").disabled = true
//------------------------------------------------------ Modal handling ---------------------------------------------------------
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block"
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none"
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none"
}
}
function success() {
if(document.getElementById("newLayerName").value === "") {
document.getElementById('submitNewLayer').disabled = true;
}
else {
document.getElementById('submitNewLayer').disabled = false;
}
}
//--------------------------------------------------Layer naming/validating/creating/deleting/etc... functions--------------------
function validateNewLayerName() { // validates for empty input from input field
let input = document.forms["newLayerForm"]["newLayerName"].value
let lengthLayers = layerArray.length
for(i = 0; i < lengthLayers; i++){ //checks if input is already used as layer name
if(input == layerNamesForComparison[i]){ //fixed?
alert("This layer name is already used, please either delete it or use a different name")
return false
}
else{
continue
}
}
if (input == "" || input == null || input == 0 || input == "0") { // check if submitted input is empty or 0
alert("Cannot submit empty field, please try again!")
return false
}
else {
//if everything adds up appends layer list with new layer
layerCreatorX(input)
modal.style.display = "none"
}
return false
}
function uuidv4() { //random uuidv4 generator for layer id
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
)
}
function layerCreatorX(submission) { // creator for normal layers
let unique_id = uuidv4() // created unique IDs
let wrapDiv = document.createElement("div")
wrapDiv.id = "wrapDiv" + unique_id
let activeLayerIcon = document.createElement("IMG")
activeLayerIcon.setAttribute("class", "activeLayerOff")
activeLayerIcon.setAttribute("name", "activeLayerIcon")
let invisibilityIcon = document.createElement("IMG")
invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
invisibilityIcon.setAttribute("name", "invisibilityIcon")
let visibilityIcon = document.createElement("IMG")
visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
visibilityIcon.setAttribute("name", "visibilityIcon")
let line = document.createElement("hr")
line.setAttribute("style", "margin-top: 0px;")
line.className = "greyLine" //grey line will go underneath the div
let x = document.createElement("span")
let t = document.createTextNode(submission)
layerArray.push(unique_id)
layerNamesForComparison.push(submission) //new name comparator
x.className = "item item-layer"
x.id = unique_id
t.className = "noselect"
x.appendChild(activeLayerIcon)
x.appendChild(t)
x.appendChild(invisibilityIcon)
x.appendChild(visibilityIcon)
wrapDiv.appendChild(x)
wrapDiv.className = "LayerListDiv"
document.querySelector('.LayerList').appendChild(wrapDiv)
document.querySelector('.LayerList').appendChild(line)
}
html, body {
height: 91.5%;
margin: 0;
padding: 0;
overflow: hidden;
}
.scrollable-container {
height: 100%;
overflow-y: auto;
}
.scrollable-content {
height: 100%;
overflow-y: auto;
background-color: #2a79ff;
}
.rtb-sidebar-caption {
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.8);
padding: 24px 0 0 24px;
margin-bottom: 20px;
}
.miro-btn, button {
width: 120px;
margin: 3px 0 0 14px;
padding: 5px;
}
.delete-btn {
width: 120px;
margin: 3px 0 0 14px;
padding: 5px;
background-color: rgb(216, 24, 24);
}
.item {
align-items: center;
height: 48px;
line-height: 48px;
cursor: pointer;
padding-left: 24px;
padding-top: 1px;
padding-bottom: 1px;
font-size: 20px;
}
/* css for modal popup */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 15px;
border: 1px solid #888;
width: auto;
display: inline-block;
border-radius: 8px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(23, 9, 75);
text-decoration: none;
cursor: pointer;
}
input[type=text] {
width: 230px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 4px;
}
.LayerList {
user-select: none;
overflow: auto;
right: -15px;
width: 100%;
max-height: calc(93% - 60px); /*Has to be 95 so that the last element of span is visible unlike at 100%*/
}
.LayerListDiv {
height: 100%;
}
.LayerList > .items-container {
border-top: 1px solid #e7e7e7;
}
span:last-child {
height: 100%;
}
.LayerList span {
user-select: inherit;
}
.labelWrap {
margin: 0px;
display: flex;
padding: 0;
}
.btn {
background-color: white;
border: none; /* Remove borders */
padding: 12px 16px;
cursor: pointer;
}
.btn:hover {
background-color: grey;
}
.wrapLabel {
padding: 0;
}
hr.greyLine {
border-top: 1px solid #C3C2CF;
opacity: 1;
margin: 20px;
padding: 0;
margin-bottom: -3px;
}
.activeLayerOn {
float: left;
margin-left: 20px;
margin-top: 12px;
position: relative;
margin-right: 15px;
background: url(icons/edit-2-on-2.svg);
height: 0;
width: 0;
padding: 12px 12px 12px 12px;
border-style: 0;
}
.activeLayerOff {
float: left;
margin-left: 20px;
margin-top: 12px;
position: relative;
margin-right: 15px;
background: url(icons/edit-2.svg);
height: 0;
width: 0;
padding: 12px 12px 12px 12px;
}
.visibilityButtonPos {
float: right;
margin-left: 15px;
margin-top: 12px;
position: relative;
margin-right: 15px;
height: 0;
width: 0;
padding: 12px 12px 12px 12px;
}
.visibilityButton {
background: url(icons/eye-off.svg);
}
.invisibilityButton {
background: url(icons/eye.svg);
}
.visibilityButtonOff {
display: none;
}
.activeDiv {
background: #EBEAEF;
color: #4568FB;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.whiteIcon {
filter: invert(98%) sepia(5%) saturate(8%) hue-rotate(101deg) brightness(102%) contrast(101%);
}
.lefticon {
user-select: none;
width: 150px;
height: 75px;
position: absolute;
position: absolute;
bottom: 20px;
left: 0;
}
.rightIcon {
user-select: none;
width: 150px;
height: 75px;
position: absolute;
position: absolute;
bottom: 20px;
left: 160px;
}
.topIcons {
display: inline-block;
vertical-align: middle;
height: 24px;
width: 24px;
}
.addButton {
user-select: none;
width: 150px;
vertical-align: middle;
padding: 0;
}
.deleteButton {
user-select: none;
width: 150px;
padding: 0;
}
<link rel="stylesheet" href="https://miro.com/app/static/styles.1.0.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://miro.com/app/static/sdk.1.1.js"></script>
<div class="miro-h1" style= "padding-left: 20px; padding-top: 15px; user-select: none;">Layers</div>
<form>
<button id="btnCreate" type="button" title="Create Layer" class="miro-btn miro-btn--secondary miro-btn--medium addButton">
<img src="icons/plus.svg" class="topIcons">
Add new Layer
</button>
<button onclick="deleteLayerById(activeLayer)" id="btnDelete" type="button" title="delete a layer" class="miro-btn miro-btn--secondary miro-btn--medium deleteButton">
<img src="icons/trash-2.svg" class="topIcons">
Delete Layer</button>
<hr class="greyLine">
</form>
<div class="container"></div>
<!------------------------------------------------------------- Modal Create------------------------------------------------------------------->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<form name="newLayerForm" onsubmit="return validateNewLayerName()" method="post" required>
<span class="close">×</span>
<p class="miro-h3" style="text-align: left;">Create Layer </p>
<input placeholder="Layer Name" type="text" name="newLayerName" id="newLayerName" onkeyup="success()" class="miro-input" style="width: 300px;">
<br>
<button type="submit" value="submit" id="submitNewLayer" class="miro-btn miro-btn--primary miro-btn--medium" style="float: right;" disabled>Create Layer</button>
</form>
</div>
</div>
<!----------------------------------------------------------------End of modal ------------------------------------------------------------------>
<div id="layerList" class="LayerList" style="font-size: 0px;">
</div>
<form>
<button onclick="getSelectedWidgets()" id="btnMove" type="button" class="miro-btn miro-btn--primary miro-btn--medium lefticon" >
<img src="icons/arrow-left.svg" class="whiteIcon" alt="arrow-left"> <br> Add selected <br>objects to layer</button>
<button onclick="removeSelectedWidgetsFromLayer()" id="btnRemove" type="button" class="miro-btn miro-btn--secondary miro-btn--medium rightIcon" >
<img src="icons/arrow-right.svg" alt="arrow-right"> <br> Remove selected <br>objects from layer</button>
</form>

From W3Schools (https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp):
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Where .example is the class of the div's with no scrollbar.

How to make my tags inside the input element

The tag items are appearing above the input element but I'd like them to be inside the input element. I've included the jQuery code and CSS. Can someone give me advice?
[].forEach.call(document.getElementsByClassName('tags-input'), function(el) {
let hiddenInput = document.createElement('input'),
mainInput = document.createElement('input');
tags = [];
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', el.getAttribute('data-name'));
mainInput.setAttribute('name', 'tag');
mainInput.setAttribute('id', 'tag2');
mainInput.setAttribute('placeholder', 'Contoh: akreditasi, banding, TUK mandiri')
mainInput.setAttribute('type', 'text');
mainInput.classList.add('main-input');
mainInput.addEventListener('input', function() {
let enteredTags = mainInput.value.split(',');
if (enteredTags.length > 1) {
enteredTags.forEach(function(t) {
let filteredTag = filterTag(t);
if (filteredTag.length > 0)
addTag(filteredTag);
});
mainInput.value = '';
}
});
...
.tags-input {}
.main-input {}
.tags-input .tag {
font-size: 85%;
padding: 0.5em 0.75em;
margin: 0.25em 0.1em;
display: inline-block;
background-color: #ddd;
border-radius: 10%;
}
.tags-input .tag .close::after {
content: 'x';
font-weight: bold;
margin-left: 0.75em;
display: inline-block;
transform: (1.2);
cursor: pointer;
}
.tags-input .main-input {
border: 0;
outline: 0;
}
...
<div class="field">
<label>Tag</label>
<div class="tags-input" data-name="tags-input">
</div>
...

Update an array with data from inputs

I have several inputs, which I am copying n times and I am trying to add numeric values from inputs in the array. I marked word "add" because an array may be already filled by other numbers.
I'm trying to apply method from UncleDave's answer here:
JavaScript - Add Value from input box to array
Example:
I have an array:
var exampleArray = [[1, 1.5], [1, 1], [0, 25.5]];
What I have done:
Wrote value 25 in first input. Wrote value 1.5 in the second input.
Create two new inputs.
Wrote value 25.4 in first input. Wrote value 1 in the second input.
Pressed button for adding into an array.
What I am trying to reach:
var exampleArray = [[1, 1.5], [1, 1], [0, 25.5], [25, 1.5], [25.4, 1]];
What I have reached:
"Udefined" in the console log.
Here Is jsfiddle link with my code: https://jsfiddle.net/aectann/k3qwoz0g/12/
updated with snippet (ok, it was not hard at this time, MTCoster, thank you for advice):
var totalInputs;
var myInputs;
var tmpARR = [];
var count = 0,
types = ['t', 'C' /*, 'Q'*/ ],
button = document.getElementById('button');
button.addEventListener("click", createInputs, false);
function createInputs() {
if (!validInput()) {
return;
}
count += 1;
createInput(count);
}
function createInput(count) {
totalInputs = document.getElementsByClassName('myInput').length;
var existingNode = document.getElementsByClassName('myInput')[totalInputs - 1];
types.forEach(function(type) {
var newNode = existingNode.cloneNode();
newNode.value = null;
newNode.id = type + +count;
newNode.placeholder = 'Placeholder ' + type;
newNode.dataset.id = 'id' + count;
appendNode(newNode);
})
}
function appendNode(node) {
document.querySelector('#div').appendChild(node);
}
function validInput() {
myInputs = document.getElementsByClassName('myInput');
var valid = true;
Array.prototype.slice.call(myInputs).forEach(function(input) {
input.classList.remove('error');
if (!input.value) {
input.classList.add('error');
valid = false;
}
});
return valid;
}
function removeError(event) {
event.classList.remove('error');
}
function guardarNumeros() {
boxvalue = document.getElementsByClassName('myInput').value;
tmpARR.push(boxvalue);
console.log(tmpARR);
return false;
}
#title {
font-family: 'Times New Roman', Times, serif;
font-size: 200%;
}
#step {
font-size: 15pt;
clear: both;
}
#step2 {
font-size: 15pt;
clear: both;
}
#step3 {
font-size: 15pt;
clear: both;
}
summary {
background: #009688;
color: #fff;
padding: 5px;
margin-bottom: 3px;
text-align: left;
cursor: pointer;
padding: 5px;
width: 250px;
/*background-color: #4CAF50;*/
}
summary:hover {
background: #008999;
}
.displayBlockInline-Flex {
display: inline-flex;
}
#margin20 {
margin-left: 20px;
vertical-align: middle;
}
#container {
width: auto;
height: auto;
margin: 0 auto;
display: none;
}
a.myButton {
color: #fff;
/* цвет текста */
text-decoration: none;
/* убирать подчёркивание у ссылок */
user-select: none;
/* убирать выделение текста */
background: rgb(212, 75, 56);
/* фон кнопки */
outline: none;
/* убирать контур в Mozilla */
text-align: center;
cursor: pointer;
width: 150px;
padding-bottom: 11px;
}
a.myButton:hover {
background: rgb(232, 95, 76);
}
/* при наведении курсора мышки */
a.myButton:active {
background: rgb(152, 15, 0);
}
/* при нажатии */
.button1 {
/* background-color: #fc0; /* Цвет фона слоя */
/* padding: 5px; /* Поля вокруг текста */
float: left;
/* Обтекание по правому краю */
width: 450px;
/* Ширина слоя */
}
.button2 {
/* background-color: #c0c0c0; /* Цвет фона слоя */
/* padding: 5px; /* Поля вокруг текста */
width: 650px;
/* Ширина слоя */
float: right;
/* Обтекание по правому краю */
}
.clear {
clear: left;
/* Отмена обтекания */
}
.wrapper {
width: 1100px;
margin-left: 20px;
}
/*inputs*/
#div {
text-align: center;
}
.myInput {
height: 40px;
outline: none;
width: auto;
border: 1px solid #999;
border-radius: 4px;
padding: 5px 10px;
margin: 5px;
display: inline-block;
}
.myInput.error {
border: 1px solid red;
}
#action {
margin: 10px 0;
text-align: center;
}
#button {
width: 190px;
height: 40px;
background: #009688;
color: #fff;
font-weight: 600;
font-size: 13px;
border-radius: 4px;
border: none;
/* text-transform: uppercase;*/
outline: none;
cursor: pointer;
}
#button:hover {
background: #008999;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<center>
<input type="text" class="myInput" name="nameAlloy" placeholder="Name">
</center>
<div id="div">
<!--<form onsubmit="return guardarNumeros()">-->
<div id="action">
<button type="button" id="button">Add more inputs</button>
</div>
<input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Enter value 1">
<input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Enter value 2">
<div id="action">
<input type="submit" id="button" value="Add to array">
</div>
<!--</form>-->
</div>

The getElementsByClassName() method returns a collection of all
elements in the document with the specified class name, as a NodeList
object.
You can iterate over the collections for all the numeric inputs and update your result. But I would suggest is to create another class for numeric inputs, so you wouldn't need to check for the type of the input and would keep your code generic.
You can try this code and feel free to clear your doubts in the comments.
function guardarNumeros() {
boxvalue = document.getElementsByClassName('myInput');
i = 0;
while (i < boxvalue.length) {
if (boxvalue[i].type == "number") {
if (boxvalue[i+1] && boxvalue[i+1].type == "number") {
tmp = [boxvalue[i].value, boxvalue[i+1].value]
tmpARR.push(tmp);
i+=2;
}
} else {
i++;
}
}
console.log(tmpARR);
return false;
}

The error is in "guardarNumeros" function because getElementsByClassName returns a collection and collection does not have a "value" property.
try this code
function guardarNumeros() {
const inputs = [...document.getElementsByClassName('myInput')];
const inputNumberArr = inputs.filter(x => x.type === 'number');
// tmpARR = [];
for (let i = 0; i < inputNumberArr.length; i++) {
const element = inputNumberArr[i];
if (i % 2 === 0) {
tmpARR.push([element.value]);
} else if (tmpARR[tmpARR.length -1] instanceof Array) {
tmpARR[tmpARR.length -1].push(element.value);
} else {
tmpARR.push([element.value]);
}
}
return false;
}

Add delay to show loading GIF on button, then close div (to load results)

I would like to have a button, that when clicked shows a pre-loading gif for 1-second, and then closes the div #sidefilter, that the user has open.
I have been able to get both of them working independently, but they are not working as intended, I think I need to add a delay to #dismissiefilter, and then end the loading GIF when executed.
What needs to be added to enable the above to happen?
$('.showloader').button();
$('.showloader').click(function() {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
$('#dismisssidefilter, .overlay').on('click', function() {
$('#sidefilter').removeClass('active');
$('.overlay').removeClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
See results
Working link:
https://clearing.co.uk/dev/universities/
Filter button next to 'search for a university' input field

I've updated my answer with a demo representing your site
$(function() {
var devActions = function(str, clear) {
let output = $('#dev-output');
if (typeof clear === 'boolean' && clear === true) {
output.empty();
}
output.append(' - ' + str + '<br />');
console.log('devActions:', str);
}
$('#sidefilterCollapse').on('click', function() {
var sidebar = $('#sidefilter');
if (!sidebar.hasClass('active')) {
sidebar.addClass('active');
devActions('#sidefilterCollapse clicked', true);
devActions('Adding .active class to #sidefilter');
if ($('#sidefilter').hasClass('active')) {
devActions('#sidefilter now has .active class');
} else {
devActions('somethings went wrong #sidefilter doesn\'t have .active class');
}
} else {
devActions('#sidefilter already has .active class');
}
})
$('.showloader').on('click', function(e) {
e.preventDefault();
var btn = $(this);
// add .loading class so we can prevent spam click
if (!btn.hasClass('loading')) {
btn.addClass('loading');
var saveOriginalText = $(this).html();
var duration = 3000;
btn.html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
if (btn.children('img').length) {
devActions('.showloader clicked and image was added.');
}
btn.stop(true).animate({
opacity: 1
}, {
duration: duration,
start: function() {
devActions('animation started');
},
complete: function() {
devActions('animation done');
// remove .loading class so we can make the button available again
btn.removeClass('loading');
btn.html(saveOriginalText);
if ($(this).html() == saveOriginalText) {
devActions('original button content was added on .showloader');
}
// do custom stuff after 1000ms
$('#sidefilter').removeClass('active');
if (!$('#sidefilter').hasClass('active')) {
devActions('.active class has been removed from #sidefilter');
}
}
})
} else {
devActions('---- don\'t spam click, currently loading ---');
}
});
})
body {
overflow-x: hidden;
font-family: "Segoe UI";
}
#sidefilterCollapse,
.showloader {
padding: 3px 5px;
line-height: 1rem;
width: 100px;
background: red;
color: white;
display: inline-block;
text-align: center;
border-radius: 20px;
cursor: pointer;
text-decoration: none;
}
#sidefilter {
text-align: center;
position: fixed;
right: -200px;
top: 0;
padding: 15px 10px;
box-sizing: border-box;
width: 200px;
height: 100%;
border-left: 1px solid lightgrey;
box-shadow: -2px 0 13px 2px grey;
transition: right 0.2s ease-in-out;
}
#sidefilter.active {
right: 0;
transition: right 0.2s ease-in-out;
}
#sidefilter p {
text-align: left;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidefilterCollapse">
Filter Button
</div>
<div id="sidefilter">
<p>
text text text text text text text text text
</p>
See results
</div>
<div id="dev-output"></div>