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

API images not displayed within modal

I am a beginner and I am using several tutorials to learn and create a project. I am using the NASA APOD API to display images. However, I want to display the image when clicked within a modal. For some reason the image when clicked is displaying the modal, but without the image. How do I click on the image and display it within the modal.
const resultsNav = document.getElementById("resultsNav");
const favoritesNav = document.getElementById("favoritesNav");
const imagesContainer = document.querySelector(".images-container");
const saveConfirmed = document.querySelector(".save-confirmed");
const loader = document.querySelector(".loader");
// NASA API
const count = 3;
const apiKey = 'DEMO_KEY';
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;
let resultsArray = [];
let favorites = {};
// Show Content
function showContent(page) {
window.scrollTo({ top: 0, behavior: "instant" });
if (page === "results") {
resultsNav.classList.remove("hidden");
favoritesNav.classList.add("hidden");
} else {
resultsNav.classList.add("hidden");
favoritesNav.classList.remove("hidden");
}
loader.classList.add("hidden");
}
// Create DOM Nodes
function createDOMNodes(page) {
const currentArray =
page === "results" ? resultsArray : Object.values(favorites);
currentArray.forEach((result) => {
// Card Container
const card = document.createElement("div");
card.classList.add("card");
// Link that wraps the image
const link = document.createElement("a");
// link.href = result.hdurl; -- full size image display when clicked
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// Image
const image = document.createElement("img");
image.src = result.url;
image.alt = "NASA Picture of the Day";
image.loading = "lazy";
image.classList.add("card-img-top");
// Card Body
const cardBody = document.createElement("div");
cardBody.classList.add("card-body");
// Card Title
const cardTitle = document.createElement("h5");
cardTitle.classList.add("card-title");
cardTitle.textContent = result.title;
// Save Text
const saveText = document.createElement("p");
saveText.classList.add("clickable");
if (page === "results") {
saveText.textContent = "Add To Favorites";
saveText.setAttribute("onclick", `saveFavorite('${result.url}')`);
} else {
saveText.textContent = "Remove Favorite";
saveText.setAttribute("onclick", `removeFavorite('${result.url}')`);
}
// Card Text
const cardText = document.createElement("p");
cardText.textContent = result.explanation;
// Footer Conatiner
const footer = document.createElement("small");
footer.classList.add("text-muted");
// Date
const date = document.createElement("strong");
date.textContent = result.date;
// Copyright
const copyrightResult =
result.copyright === undefined ? "" : result.copyright;
const copyright = document.createElement("span");
copyright.textContent = ` ${copyrightResult}`;
// Append everything together
footer.append(date, copyright);
cardBody.append(cardTitle, saveText, cardText, footer); //hide to make image display
link.appendChild(image);
card.append(link); // hide cardBody
// Append to image container
imagesContainer.appendChild(card);
});
}
// Update the DOM
function updateDOM(page) {
// Get favorites from local storage
if (localStorage.getItem("nasaFavorites")) {
favorites = JSON.parse(localStorage.getItem("nasaFavorites"));
}
imagesContainer.textContent = "";
createDOMNodes(page);
showContent(page);
}
// Get 10 images from NASA API
async function getNasaPictures() {
// Show Loader
loader.classList.remove("hidden");
try {
const response = await fetch(apiUrl);
resultsArray = await response.json();
updateDOM("results");
} catch (error) {
// Catch Error Here
}
}
// Add result to favorites
function saveFavorite(itemUrl) {
// Loop through the results array to select favorite
resultsArray.forEach((item) => {
if (item.url.includes(itemUrl) && !favorites[itemUrl]) {
favorites[itemUrl] = item;
// Show save confirmation for 2 seconds
saveConfirmed.hidden = false;
setTimeout(() => {
saveConfirmed.hidden = true;
}, 2000);
// Set Favorites in Local Storage
localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
}
});
}
// Remove item from favorites
function removeFavorite(itemUrl) {
if (favorites[itemUrl]) {
delete favorites[itemUrl];
localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
updateDOM("favorites");
}
}
// On Load
getNasaPictures();
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 3% 1fr 0.1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header"
"content"
}
.hero {
grid-area: hero;
background-color: blue;
}
.content {
grid-area: content;
background-color: orange;
align-self: center;
justify-self: center;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
background: whitesmoke;
overflow-x: hidden;
font-family: Verdana, sans-serif;
font-size: 1rem;
line-height: 1.8rem;
}
.loader {
position: fixed;
z-index: 40;
background: whitesmoke;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
/* Navigation */
.navigation-container {
position: fixed;
top: 0;
}
.navigation-items {
display: flex;
justify-content: center;
}
.background {
background: whitesmoke;
position: fixed;
right: 0;
width: 100%;
height: 60px;
z-index: -1;
}
.clickable {
color: #0b3d91;
cursor: pointer;
user-select: none;
}
.clickable:hover {
color: #fc3d21;
}
/* Images Container */
.images-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
margin: 10px 10px 10px;
width: 300px;
height: 300px;
}
.card-img-top {
width: 300px;
height: 300px;
}
.card-body {
padding: 20px;
}
.card-title {
margin: 10px auto;
font-size: 24px;
}
/* Save Confirmation */
.save-confirmed {
background: white;
padding: 8px 16px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
position: fixed;
bottom: 25px;
right: 50px;
z-index: 500;
}
/* Hidden */
.hidden {
display: none;
}
.brand {
float: right;
}
.fave {
margin-right: 50%;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
/* #myImg:hover {opacity: 0.7;} */
/* The Modal (background) */
.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.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<!-- Loader -->
<div class="loader hidden">
<img src="rocket.svg" alt="Rocket Icon" />
</div>
<!-- Container -->
<div class="container">
<div class="header">
<div class="navigation-container">
<span class="background"></span>
<!-- Results Nav -->
<span class="navigation-items" id="resultsNav">
</span>
<!-- Favorites Nav -->
<span class="navigation-items hidden" id="favoritesNav">
</span>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="column">
<div id="myImg" alt="Snow" class="images-container"></div>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>

In your img.onclick function/event listener (at line 51 of your JS), your this points to the parent instead of the image itself.
For a quick fix, try replacing your this with event.target (Basically, event.target.src in place of this.src and event.target.alt in place of this.alt at lines 56 and 57 of your current JS Fiddle)

Javascript Blur background when div is block?

I'm having a problem with bluring the background when my menu is open. I tried writing something on my own but it's not working.
function backgroundBlur() {
var menuBox = document.getElementById("mobile-menu");
var blur = document.getElementById("body");
if (menuBox.style.dsiplay = "block") {
blur.style.filter = "blur(3px)";
}
}

I think the problem can be caused by three reasons:
Typo noted by #RyanWalls
The backgroundBlur() method is not called
The display property of the menuBox is not block
I made a run to simulate this event:
let button = document.getElementById('setBlur');
let control = false;
function backgroundBlur(control) {
var menuBox = document.getElementById("mobile-menu");
var blur = document.getElementById("body");
if (menuBox.style.display === "block")
{
if(!control)
{
blur.style.filter = "blur(3px)";
button.innerHTML = 'Remove Blur';
}
else
{
blur.style.filter = "blur(0px)";
button.innerHTML = 'Add Blur';
}
}
}
button.addEventListener('click', function() {
backgroundBlur(control);
control = !control;
});
*{
margin: 0;
}
#body{
background-color: black;
}
button{
margin-top: 25px;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 100%;
}
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
<div id="body">
<div id="mobile-menu" style="display: block;">
<div class="vertical-menu">
Home
Link 1
</div>
</div>
</div>
<button id="setBlur">Add Blur</button>

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.

Reset all buttons inner.text and background.color with Reset button

I'm trying to reset all the buttons inner.text back to original value (1,2,3) and background.color back to grey with a reset button.
I think something wrong with the for loop because when i place i=0 i < 3, it works. I need it to be btns.length, because i will be adding more buttons later.
What i did wrong with the "YES" button code ?
// Get the Reset that opens the ResetModal
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset');
rst.onclick = function() {
reset.style.display = "block";
}
//Hit "NO" to turn off modal window
var rstno = document.getElementById('resetno');
rstno.onclick = function() {
reset.style.display = "none";
}
// Hit "YES" to reset all button to initial value
var rstyes = document.getElementById('resetyes');
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
for (var i = 0; i < btns.length; i++) {
rstyes.onclick = function() {
var btn = document.getElementById("b"+i);
btn.innerText=i;
btn.style.background="#D3D3D3";
reset.style.display = "none";
}
}
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
reset.style.display = "none";
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
// target value
var TV = document.getElementById('inputtarget');
// Each button click => open modal
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function() {
TV.setAttribute('startbtn', this.id );
modal.style.display = "block";
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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() {
if (event.target == modal) {
modal.style.display = "none";
}
}
//Arithematic Operator Control
function checkValue(){
var inputvalue = document.getElementById('modal');
var buttonsubmit = document.getElementById( TV.getAttribute('startbtn') );
var value = parseInt(inputvalue.value);
var targetValue = parseInt(TV.value);
if (value < targetValue){
buttonsubmit.style.background = 'red' ;
buttonsubmit.innerText = value ;
}
else if (value >= targetValue){
buttonsubmit.style.background = 'green';
buttonsubmit.innerText = value ;
}
else{
buttonsubmit.style.background = '';
buttonsubmit.innerText = ''
}
modal.style.display = "none" ;
return false;
}
#b1,
#b2,
#b3 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 50px;
font-family: Arial;
font-weight: bold;
box-shadow: 0 1px #999;
}
#b30,
#b31 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 25px;
font-family: Arial;
font-weight: bold;
font-size: 0.5rem;
box-shadow: 0 1px #999;
}
#inputtarget {
height: 60px;
width: 100px;
font-size: 1.5rem;
text-align: center;
border: 1;
}
#trigger {
height: 0 auto;
width: 100px;
font-size: 0.5rem;
text-align: center;
}
#b1:hover,
#b2:hover,
#b3:hover {
background-color: grey;
}
#b1:active,
#b2:active,
#b3:active {
background-color: silver;
box-shadow: 1px #666;
transform: translateY(2px);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#modal1 {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Reset (background) */
.reset {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Reset Content/Box */
.reset-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#resetyes,
#resetno {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close1 {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close1:hover,
.close1:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div>
<!-- All Buttons in Matrix Form Production -->
<button id="b1" style="position:absolute; left:30px; top:100px">1</button>
<button id="b2" style="position:absolute; left:80px; top:100px">2</button>
<button id="b3" style="position:absolute; left:130px; top:100px">3</button>
<input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:160px"><br>
<input id="reset" type=button value=Reset style="position:absolute; left:170px; top: 180px">
<input id="trigger" type=button value="Change Target Value" onclick="return CheckBVWithTV()" style="position:absolute; left:165px; top: 530px">
</div>
<!-- The Modal Box 1-->
<div id="myModal" class="modal" >
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>PLEASE INPUT QUANTITY</p>
<input id="modal" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px><br>
<br>
<button id="submit" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
</div>
</div>
<!-- The Reset Box -->
<div id="ResetModal" class="reset">
<!-- Reset content -->
<div class="reset-content">
<span class="close1">×</span>
<p>Are you sure ? <br> This Action cannot be undone.</p>
<input id=resetyes type="button" value="YES">
<input id=resetno type="button" value="NO">
</div>
</div>

You need to move your for loop inside your rstyes.onclick function. You only have one reset yes button, therefore you would not need 3 click functions for that one button. Then in your for loop start from 1 and set it to end at btns.length + 1 since your btns array index starts at 0 and your buttons ids start at 1.
// Get the Reset that opens the ResetModal
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset');
rst.onclick = function() {
reset.style.display = "block";
}
//Hit "NO" to turn off modal window
var rstno = document.getElementById('resetno');
rstno.onclick = function() {
reset.style.display = "none";
}
// Hit "YES" to reset all button to initial value
var rstyes = document.getElementById('resetyes');
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
rstyes.onclick = function() {
for (var i = 1; i < btns.length + 1; i++) {
var btn = document.getElementById("b" + i);
btn.innerText = i;
btn.style.background = "#D3D3D3";
reset.style.display = "none";
}
};
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
reset.style.display = "none";
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
// target value
var TV = document.getElementById('inputtarget');
// Each button click => open modal
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
TV.setAttribute('startbtn', this.id);
modal.style.display = "block";
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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() {
if (event.target == modal) {
modal.style.display = "none";
}
}
//Arithematic Operator Control
function checkValue() {
var inputvalue = document.getElementById('modal');
var buttonsubmit = document.getElementById(TV.getAttribute('startbtn'));
var value = parseInt(inputvalue.value);
var targetValue = parseInt(TV.value);
if (value < targetValue) {
buttonsubmit.style.background = 'red';
buttonsubmit.innerText = value;
} else if (value >= targetValue) {
buttonsubmit.style.background = 'green';
buttonsubmit.innerText = value;
} else {
buttonsubmit.style.background = '';
buttonsubmit.innerText = ''
}
modal.style.display = "none";
return false;
}
#b1,
#b2,
#b3 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 50px;
font-family: Arial;
font-weight: bold;
box-shadow: 0 1px #999;
}
#b30,
#b31 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 25px;
font-family: Arial;
font-weight: bold;
font-size: 0.5rem;
box-shadow: 0 1px #999;
}
#inputtarget {
height: 60px;
width: 100px;
font-size: 1.5rem;
text-align: center;
border: 1;
}
#trigger {
height: 0 auto;
width: 100px;
font-size: 0.5rem;
text-align: center;
}
#b1:hover,
#b2:hover,
#b3:hover {
background-color: grey;
}
#b1:active,
#b2:active,
#b3:active {
background-color: silver;
box-shadow: 1px #666;
transform: translateY(2px);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#modal1 {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Reset (background) */
.reset {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Reset Content/Box */
.reset-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#resetyes,
#resetno {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close1 {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close1:hover,
.close1:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div>
<!-- All Buttons in Matrix Form Production -->
<button id="b1" style="position:absolute; left:30px; top:100px">1</button>
<button id="b2" style="position:absolute; left:80px; top:100px">2</button>
<button id="b3" style="position:absolute; left:130px; top:100px">3</button>
<input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:160px">
<br>
<input id="reset" type=button value=Reset style="position:absolute; left:170px; top: 180px">
<input id="trigger" type=button value="Change Target Value" onclick="return CheckBVWithTV()" style="position:absolute; left:165px; top: 530px">
</div>
<!-- The Modal Box 1-->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>PLEASE INPUT QUANTITY</p>
<input id="modal" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px>
<br>
<br>
<button id="submit" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
</div>
</div>
<!-- The Reset Box -->
<div id="ResetModal" class="reset">
<!-- Reset content -->
<div class="reset-content">
<span class="close1">×</span>
<p>Are you sure ?
<br> This Action cannot be undone.</p>
<input id=resetyes type="button" value="YES">
<input id=resetno type="button" value="NO">
</div>
</div>

Mark,
Length begins at 1, and the loop you are using begins at zero. you either need to modify the use of i in your loop or begin the button IDs at b0. The way your html and js is currently written, the loop does nothing during the first iteration. I would recommend changing the ids to begin at b0 and use the updated for loop above.
If you change the button IDs to begin at zero, you should be able to keep using the condition i < btns.length in the loop.
Happy programming!