Develop Reference

Cannot append localStorage data to an existing div class

Currently making a quick journal entry app in HTML, CSS, and JS. User inputs and submits text data along with the time and date. I'm trying to take that data from the localStorage to put inside an existing div class. Any advice?
This is the HTML code.
<div class="background-journal">
<button class="button-journal" onclick="openPopup()" id="entrybtn">New Entry</button>
<br><br><br><br><br><br><br>
<button class="show-journal" onclick="recallEntries()" id="showbtn">View Previous Entries</button>
<div class="journal-visual" id="data-viz">
</div>
<div id="popup" class="popup">
<form id="form" class="form">
<br>
<label for="journal-entry">何を勉強していますか？</label><br><br>
<textarea class="add-entry" id="journal-entry" rows="6" cols="150"></textarea><br>
<button type="submit" onclick="submitJournalEntry()">Submit</button>
<button type="button" onclick="closePopup()">Close</button>
</form>
</div>
This is the CSS code.
.background-journal{
position:absolute;
top: 35%;
left: 9.6%;
background-color:rgba(255,255,255,0);
z-index:1001;
width: 80%;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
.button-journal {
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.show-journal{
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.journal-visual{
background-color: #fff;
z-index:1003;
width: 70%;
height: 450px;
overflow-y: auto;
overflow-x: hidden;
margin-left: auto;
margin-right: auto;
display: none;
position: relative;
color: #000;
text-align: center;
}
.button-popup-journal{
position: relative;
}
.popup {
display: none;
position: absolute;
z-index: 1;
width: 100%;
height: 200px;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
box-shadow: 3px 5px #000;
}
.popup form{
margin: auto;
}
.add-entry{
margin: auto;
overflow: auto;
position:inherit;
left: 5%;
}
.background-journal label{
color: white;
opacity: 70%;
}
and this is the JS code.
// Journal Function
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("entrybtn").style.display = "block";
document.getElementById("showbtn").style.display = "block";
}
function submitJournalEntry() {
var journalEntry = document.getElementById("journal-entry").value;
var date = new Date();
var timestamp = date.toString();
localStorage.setItem(timestamp, journalEntry);
closePopup();
}
function recallEntries() {
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
document.getElementById("data-viz").style.display = "block";
var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var journalEntry = localStorage.getItem(key);
var viz = document.getElementById('data-viz');
div.innerHTML = '<p><strong>' + key + '</strong>: ' + journalEntry + '</p>';
document.body.appendChild(viz);
}
}
I was expecting the text to show up in the div class="journal-entry" id="data-viz" but nothing is there. Any ideas?

How to change the border color of a div when clicking a radio button inside the same div?

So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}

function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.

This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>

Not refreshing second select dropdown list

I am new in web development, I appreciate your help with this problem. I am trying to build and HTML form using Apps Script, materialize CSS and JavaScript. I have two dependent selects, the first one with id "tipo" and the second with id "nov". These two are dependent, if i choose in the first select an option, only for the second select must appears only the options that belongs to that category. for example, when i select in the first dropdown the option calls "servicios publicos" the second select only must show the options: agua, luz, energia, gas and telef/internet. The problem is in the second select with id "nov" its not refreshing, only appears the option calls "agua", but the select its not working, when you clicked it.
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
google.script.run.withSuccessHandler(populateWords).getWords();
document.getElementById("frmRegister").addEventListener("submit", empres);
document.getElementById('nov').addEventListener("click", 'select');
});
function populateWords(words) {
var autocomplete = document.getElementById('pto');
var instances2 = M.Autocomplete.init(autocomplete, {
data: words
});
}
function empres(e) {
// prevenir un evento por defecto
e.preventDefault();
var userInfo = {};
userInfo.punto = document.getElementById("pto").value;
userInfo.tiponov = document.getElementById("tipo").value;
userInfo.novedad = document.getElementById("nov").value;
userInfo.check = document.getElementById("ch").value;
userInfo.detalle = document.getElementById("textarea1").value;
google.script.run.registroEmp(userInfo);
document.getElementById("pto").value = "";
document.getElementById("tipo").value = "";
document.getElementById("nov").value = "";
document.getElementById("ch").value = "";
document.getElementById("textarea1").value = "";
var selectList = document.getElementById("tipo");
selectList.selectedIndex = 0;
M.FormSelect.init(selectList);
var selectList2 = document.getElementById("nov");
selectList2.selectedIndex = 0;
M.FormSelect.init(selectList2);
var selectList3 = document.getElementById("ch");
selectList3.selectedIndex = 0;
M.FormSelect.init(selectList3);
//var datePicker =document.getElementById("fecha");
//datePicker.value ="";
//M.Datepicker.init(datePicker);
}
* {
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.form-row {
margin-bottom: 0px;
}
.row1 {
display: inline-block;
margin-right: auto;
margin-left: auto;
padding: 2px;
}
.warning-bar {
visibility: hidden;
}
img {
width: 250px;
height: auto;
margin: 10px;
margin-top: 8px;
padding-top: 15px;
}
.page-footer {
background: black;
border-top: 1px solid #e4e4e4;
}
.container-footer {
color: black;
background-color: #FFFFFF;
margin-left:
}
.page-footer.footer-copyright {
background-color: #FFFFFF;
}
.div.footer-copyright {
color: black;
background-color: #FFFFFF;
}
.footer.page-footer {
background-color: black;
}
.page-footer .footer-copyright {
background-color: #FFFFFF;
border-top: 1px solid #e4e4e4;
}
p.black-text-copyright {
padding-left: 15px;
text-align: left;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #FFFFFF;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #17202A;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
h3 {
text-align: center;
}
btn {
float: none;
text-align: center;
margin-bottom: 20px;
padding-left: 30px;
padding-top: 10px;
}
h5 {
text-align: center;
}
.title {
color: red;
text-align: center;
}
h4 {
text-align: center;
}
}
body {
background-image: url("https://images.pexels.com/photos/3717291/pexels-photo-3717291.jpeg");
width: 100%;
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
}
button {
margin-bottom: 20px;
}
html {
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
position: relative;
}
}
.frmHome {
margin-left: auto;
margin-right: auto;
}
.select-wrapper .caret {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
z-index: 0;
fill: rgba(0, 0, 0, 0.0);
}
.login-triangle {
width: 0;
margin-right: auto;
margin-left: auto;
border: 12px solid transparent;
border-bottom-color: #1ABC9C;
margin-top: 60px;
}
.login-header {
background: #1ABC9C;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
border-radius: 4px;
color: #fff;
margin-bottom: 0;
margin-top: 0px;
}
.login-container {
background: #FDFEFE;
padding: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #D5D8DC;
border-radius: 6px;
margin-top: 0px;
}
.textarea.materialize-textarea {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<base target="_Self">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<?!= include("page-css"); ?>
</head>
<body>
<img style="position:absolute; width:100%; height:auto; margin:0; padding:0; background:https://images.pexels.com/photos/3717291/pexels-photo-3717291.jpeg"
src="https://images.pexels.com/photos/3717291/pexels-photo-3717291.jpeg">
<div class="login">
<div class="login-triangle"></div>
<h2 class="login-header">Registro Novedades</h2>
<form id="frmRegister" class="login-container">
<div class="row">
<div class="input-field col s12">
<i style="color:#1ABC9C" class="material-icons prefix">search</i>
<input type="text" id="pto" class="autocomplete">
<label for="pto">Consulta el punto de servicio</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<select id="tipo" onchange="ChangeCarList()">
<option value=""></option>
<option value="SP">Servicios Públicos</option>
<option value="SG">Seguridad</option>
<option value="AD">Administración</option>
<option value="CV">Convivencia</option>
</select>
<label for="tipo">Selecciona el tipo de novedad</label>
</div>
<div class="input-field col s12">
<select id="nov"></select>
<label>Novedad</label>
</div>
</div>
<script>
var carsAndModels = {};
carsAndModels['SP'] = ['Agua', 'Aseo', 'Energia', 'Gas', 'Telef/Internet'];
carsAndModels['SG'] = ['Hurto a residencias', 'Intervención Policia Nal', 'Orden Público',
'Lesiones Personales', 'Alarma', 'Daños Infraestruc/Bienes'
];
carsAndModels['AD'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("tipo");
var modelList = document.getElementById("nov");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
</script>
<div class="row">
<div class="input-field col s12">
<select id="ch">
<option value="" disabled selected>Generar Alerta</option>
<option>Si</option>
<option>No</option>
</select>
<label>¿Desea generar alerta de pánico?</label>
</div>
</div>
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Ingrese el detalle del evento</label>
</div>
<button style="width:100%; margin-top:20px;" class="waves-effect waves-light btn-small" type="submit"
name="action">Enviar
<i class="material-icons right">send</i>
</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<?!= include("page-js"); ?>
</body>
</html>

The problem is: the select input is rendered with Materialize on page load, it adds HTML elements to you're initial code to make the UI looks the way it looks,
All you have to do is to trigger this after you add the select options, so I moved this code from Javascript file ( which triggers only once at the beginning ) into the ChangeCarList() so that the Materialize can create the proper dropdown with new options.
var selectList2 = document.getElementById("nov");
selectList2.selectedIndex = 0;
M.FormSelect.init(selectList2);
Since you already have the variable modelList contains the nov, I just used it instead of re-selecting it.
I hope this is the result you were looking for, Good Luck.
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
//google.script.run.withSuccessHandler(populateWords).getWords();
document.getElementById("frmRegister").addEventListener("submit", empres);
// document.getElementById('nov').addEventListener("click", 'select');
});
function populateWords(words) {
var autocomplete = document.getElementById('pto');
var instances2 = M.Autocomplete.init(autocomplete, {
data: words
});
}
function empres(e) {
e.preventDefault();
var userInfo = {};
userInfo.punto = document.getElementById("pto").value;
userInfo.tiponov = document.getElementById("tipo").value;
userInfo.novedad = document.getElementById("nov").value;
userInfo.check = document.getElementById("ch").value;
userInfo.detalle = document.getElementById("textarea1").value;
google.script.run.registroEmp(userInfo);
document.getElementById("pto").value = "";
document.getElementById("tipo").value = "";
document.getElementById("nov").value = "";
document.getElementById("ch").value = "";
document.getElementById("textarea1").value = "";
var selectList = document.getElementById("tipo");
selectList.selectedIndex = 0;
M.FormSelect.init(selectList);
var selectList3 = document.getElementById("ch");
selectList3.selectedIndex = 0;
M.FormSelect.init(selectList3);
//var datePicker =document.getElementById("fecha");
//datePicker.value ="";
//M.Datepicker.init(datePicker);
}
* {
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.form-row {
margin-bottom: 0px;
}
.row1 {
display: inline-block;
margin-right: auto;
margin-left: auto;
padding: 2px;
}
.warning-bar {
visibility: hidden;
}
img {
width: 250px;
height: auto;
margin: 10px;
margin-top: 8px;
padding-top: 15px;
}
.page-footer {
background: black;
border-top: 1px solid #e4e4e4;
}
.container-footer {
color: black;
background-color: #FFFFFF;
margin-left:
}
.page-footer.footer-copyright {
background-color: #FFFFFF;
}
.div.footer-copyright {
color: black;
background-color: #FFFFFF;
}
.footer.page-footer {
background-color: black;
}
.page-footer .footer-copyright {
background-color: #FFFFFF;
border-top: 1px solid #e4e4e4;
}
p.black-text-copyright {
padding-left: 15px;
text-align: left;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #FFFFFF;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #17202A;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
h3 {
text-align: center;
}
btn {
float: none;
text-align: center;
margin-bottom: 20px;
padding-left: 30px;
padding-top: 10px;
}
h5 {
text-align: center;
}
.title {
color: red;
text-align: center;
}
h4 {
text-align: center;
}
}
body {
background-image: url("https://images.pexels.com/photos/3717291/pexels-photo-3717291.jpeg");
width: 100%;
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
}
button {
margin-bottom: 20px;
}
html {
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
position: relative;
}
}
.frmHome {
margin-left: auto;
margin-right: auto;
}
.select-wrapper .caret {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
z-index: 0;
fill: rgba(0, 0, 0, 0.0);
}
.login-triangle {
width: 0;
margin-right: auto;
margin-left: auto;
border: 12px solid transparent;
border-bottom-color: #1ABC9C;
margin-top: 60px;
}
.login-header {
background: #1ABC9C;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
border-radius: 4px;
color: #fff;
margin-bottom: 0;
margin-top: 0px;
}
.login-container {
background: #FDFEFE;
padding: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #D5D8DC;
border-radius: 6px;
margin-top: 0px;
}
.textarea.materialize-textarea {
margin-left: auto;
margin-right: auto;
}
.input-field input {
padding-left: 10px
}
.select-wrapper input.select-dropdown {
text-indent: 25px
}
<!DOCTYPE html>
<html>
<head>
<base target="_Self">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img style="position:absolute; width:100%; height:auto; margin:0; padding:0; background:https://images.pexels.com/photos/3717291/pexels-photo-3717291.jpeg"
src="https://images.pexels.com/photos/3717291/pexels-photo-3717291.jpeg">
<div class="login">
<div class="login-triangle"></div>
<h2 class="login-header">Registro Novedades</h2>
<form id="frmRegister" class="login-container">
<div class="row">
<div class="input-field col s12">
<i style="color:#1ABC9C" class="material-icons prefix">search</i>
<input type="text" id="pto" class="autocomplete">
<label for="pto">Consulta el punto de servicio</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<select id="tipo" onchange="ChangeCarList()">
<option value=""></option>
<option value="SP">Servicios Públicos</option>
<option value="SG">Seguridad</option>
<option value="AD">Administración</option>
<option value="CV">Convivencia</option>
</select>
<label for="tipo">Selecciona el tipo de novedad</label>
</div>
<div class="input-field col s12 nov-select">
<select id="nov">
</select>
<label>Novedad</label>
</div>
</div>
<script>
var carsAndModels = {};
carsAndModels['SP'] = ['Agua', 'Aseo', 'Energia', 'Gas', 'Telef/Internet'];
carsAndModels['SG'] = ['Hurto a residencias', 'Intervención Policia Nal', 'Orden Público',
'Lesiones Personales', 'Alarma', 'Daños Infraestruc/Bienes'
];
carsAndModels['AD'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("tipo");
var modelList = document.getElementById("nov");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
for (var i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car)
}
}
modelList.selectedIndex = 0;
M.FormSelect.init(modelList);
}
</script>
<div class="row">
<div class="input-field col s12">
<select id="ch">
<option value="" disabled selected>Generar Alerta</option>
<option>Si</option>
<option>No</option>
</select>
<label>¿Desea generar alerta de pánico?</label>
</div>
</div>
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Ingrese el detalle del evento</label>
</div>
<button style="width:100%; margin-top:20px;" class="waves-effect waves-light btn-small" type="submit"
name="action">Enviar
<i class="material-icons right">send</i>
</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="index.js"></script>
</body>
</html>
<div class="input-field col s12">
<div class="select-wrapper">
<select id="tipo" onchange="ChangeCarList()" tabindex="-1">
<option value=""></option>
<option value="SP">Servicios Públicos</option>
<option value="SG">Seguridad</option>
<option value="AD">Administración</option>
<option value="CV">Convivencia</option>
</select>
</div>
<label for="tipo">Selecciona el tipo de novedad</label>
</div>

How to fit elements at slider container

I work with statick creation elements, and for this i need to have slider.
I just create slider, but elements are not fit in to slider container.
Example:
var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"
function createUserCard() {
htmlElements = `<div class="user-card">
<img src="https://source.unsplash.com/user/erondu" class="userImage" />
<div class="info">
<div class="name">${userName}</div>
<div class="handle">
<div class="idPersone">${id}</div>
</div>
</div>
</div>`
$('.cardsCreation').append(htmlElements);
}
$('#plus-button').on('click', function () {
createUserCard();
});
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
.user-card, userImage {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}
.user-card {
margin: 12px;
padding: 10px 10px 10px 10px;
border-radius: 12px;
width: 160px;
text-align: center;
float: left;
background-color: #fff;
}
.userImage {
border-radius: 50%;
height: 140px;
width: 140px;
border: 5px solid #eee;
}
.name {
font-size: 20px;
margin: 5px;
font-weight: bold;
}
.progress {
color: #25af53;
font-size: 48px;
}
#plus-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #428bca;
position: absolute;
top: 33%;
margin-left: 20px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
border: none;
outline: none;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
#plus-button:hover {
box-shadow: 0 6px 14px 0 #666;
transform: scale(1.05);
}
.wrapper {
position: relative;
}
.arrow {
cursor: pointer;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 50%;
margin-top: 160px;
}
#left-arrow {
border-width: 50px 40px 50px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 25px;
}
#right-arrow {
border-width: 50px 0 50px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 25px;
}
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vertical-align-wrapper {
display: table;
overflow: hidden;
text-align: center;
}
.vertical-align-wrapper span {
display: table-cell;
vertical-align: middle;
font-size: 5rem;
color: #ffffff;
}
#media only screen and (max-width : 992px) {
.vertical-align-wrapper span {
font-size: 2.5rem;
}
#left-arrow {
border-width: 30px 20px 30px 0;
margin-left: 15px;
}
#right-arrow {
border-width: 30px 0 30px 20px;
margin-right: 15px;
}
.arrow {
margin-top: -30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="left-arrow" class="arrow"></div>
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="cardsCreation"></div>
<button id="plus-button">
<p class="plus">+</p>
</button>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<span>Slide 2</span>
</div>
</div>
<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>
</div>
<div id="right-arrow" class="arrow"></div>
</div>
So as u can see affter tapping "+" i add new ellement in to html.
And from two sides i have arrows which are changing slider.
After tapping arrows go down, and this is not good.
And after i will reach limit of adding element in one slider it's add new element to new slider page.
What i want ex:

If you are using toggle of display CSS property that happened because it remove whole element from the DOM so, I suggest you to use visibility or opacity properties to done your task.

Add checkbox to price calculation

Currently my price output gets calculated based on the chosen quantity of an input field. I have been trying to add a checkbox to this calculation that, if checked, adds $5 to the total price. That being said, I haven't been very successful. In my understanding, there are two calculations going on:
I hit the increase/decrease button and it checks if the checkbox has been selected
I select the checkbox and it calculates the total price
This is the code I have so far:
function IncludePrice()
{
var IncludePrice=0;
var include = theForm.elements["include"];
if(include.checked==true)
{
IncludePrice=5;
}
return IncludePrice;
}
$(".incr-btn_mobile").on("click", function(e) {
var $button = $(this);
var oldValue = $button.parent().find('.quantity').val();
$button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
if ($button.data('action') == "increase") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below 1
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
$button.addClass('inactive');
}
}
$button.parent().find('.quantity').val(newVal);
var cakePrice = newVal;
var includep = IncludePrice();
var divobj = document.getElementById($button.attr('data-target'));
divobj.style.display = 'block';
divobj.innerHTML = "= $" + (cakePrice) * 7.99 + (includep);
e.preventDefault();
});
.bg {
width: 100%;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin-top: 10px;
text-align: center;
}
.count-input_mobile input {
width: 100%;
height: 42px;
border: 1px solid #000
border-radius: 2px;
background: none;
text-align: center;
}
.count-input_mobile input:focus {
outline: none;
}
.count-input_mobile .incr-btn_mobile {
display: block;
position: absolute;
width: 30px;
height: 30px;
font-size: 26px;
font-weight: 300;
text-align: center;
line-height: 30px;
top: 50%;
right: 0;
margin-top: -15px;
text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
right: auto;
left: 0;
top: 46%;
}
.count-input_mobile.count-input-sm {
max-width: 125px;
}
.count-input_mobile.count-input-sm input {
height: 36px;
}
.count-input_mobile.count-input-lg {
max-width: 200px;
}
.count-input_mobile.count-input-lg input {
height: 70px;
border-radius: 3px;
}
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.sum_output {
background: none;
padding: 9.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.accordion_img {
width:200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">= $7.99</div>
UPDATE:
I changed made some changes based on the feedback here, but this seems to break the increase/decrease field. Here is the code as is:
$(".incr-btn_mobile").on("click", function(e) {
var $button = $(this);
var oldValue = $button.parent().find('.quantity').val();
$button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
if ($button.data('action') == "increase") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below 1
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
$button.addClass('inactive');
}
}
$button.parent().find('.quantity').val(newVal);
var cakePrice = newVal;
var includep = theForm.elements.include.checked * 5;
var divobj = document.getElementById($button.attr('data-target'));
divobj.style.display = 'block';
divobj.innerHTML = "= $" + (cakePrice) * 7.99 + (includep);
e.preventDefault();
});
.bg {
width: 100%;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin-top: 10px;
text-align: center;
}
.count-input_mobile input {
width: 100%;
height: 42px;
border: 1px solid #000
border-radius: 2px;
background: none;
text-align: center;
}
.count-input_mobile input:focus {
outline: none;
}
.count-input_mobile .incr-btn_mobile {
display: block;
position: absolute;
width: 30px;
height: 30px;
font-size: 26px;
font-weight: 300;
text-align: center;
line-height: 30px;
top: 50%;
right: 0;
margin-top: -15px;
text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
right: auto;
left: 0;
top: 46%;
}
.count-input_mobile.count-input-sm {
max-width: 125px;
}
.count-input_mobile.count-input-sm input {
height: 36px;
}
.count-input_mobile.count-input-lg {
max-width: 200px;
}
.count-input_mobile.count-input-lg input {
height: 70px;
border-radius: 3px;
}
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.sum_output {
background: none;
padding: 9.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.accordion_img {
width:200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">= $7.99</div>

There you go my friend. I only change your js code. There is all the change I made:
Deleted your IncludePrice function since you could do it in only one row. And do never user function name for a variable. It could possibly break your code.
All switched for jQuery use instead of half jQuery and native JS.
Created a function for checkbox onclick to change the prince dynamicly.
I changed the names of your variables to make them more specific.
Added some comments to make the code clearer.
var _EXTRAVAL = 5;
$(".incr-btn_mobile").on("click", function(e) {
// Prevent default action
e.preventDefault();
// Set variable for the method
var button = $(this);
var labelNb = button.parent().find('.quantity');
var labelPrice = $("#" + button.attr('data-target'));
var currentNb = button.parent().find('.quantity').val();
var newNb = 0;
// Remove 'inactive' class
$('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
// Increase or decrease
if (button.attr('data-action') == "increase") {
newNb = parseFloat(currentNb) + 1;
} else {
// Don't allow decrementing below 1
if (currentNb > 1) {
newNb = parseFloat(currentNb) - 1;
} else {
newNb = 1;
button.addClass('inactive');
}
}
var isExtra = $("#include").prop('checked') ? _EXTRAVAL : 0;
$(labelNb).val(newNb);
$(labelPrice).css('display', 'block').html("= $" + String((((newNb) * 7.99) + (isExtra)).toFixed(2)));
});
$("#include").on('click', function(){
// Set variable for method
var checkbox = $(this);
var labelPrice = $("#" + $(".incr-btn_mobile").attr('data-target'));
var labelPriceFloat = parseFloat(labelPrice.html().substring(4));
// If checkbox is check, increse price
if (checkbox.prop('checked')) {
labelPrice.html("= $" + String((labelPriceFloat + _EXTRAVAL).toFixed(2)));
} else {
labelPrice.html("= $" + String((labelPriceFloat - _EXTRAVAL).toFixed(2)));
}
});
.bg {
width: 100%;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin-top: 10px;
text-align: center;
}
.count-input_mobile input {
width: 100%;
height: 42px;
border: 1px solid #000
border-radius: 2px;
background: none;
text-align: center;
}
.count-input_mobile input:focus {
outline: none;
}
.count-input_mobile .incr-btn_mobile {
display: block;
position: absolute;
width: 30px;
height: 30px;
font-size: 26px;
font-weight: 300;
text-align: center;
line-height: 30px;
top: 50%;
right: 0;
margin-top: -15px;
text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
right: auto;
left: 0;
top: 46%;
}
.count-input_mobile.count-input-sm {
max-width: 125px;
}
.count-input_mobile.count-input-sm input {
height: 36px;
}
.count-input_mobile.count-input-lg {
max-width: 200px;
}
.count-input_mobile.count-input-lg input {
height: 70px;
border-radius: 3px;
}
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.sum_output {
background: none;
padding: 9.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.accordion_img {
width:200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">= $7.99</div>