Advice on flawed logic per JavaScript calculator - javascript

How do I improve my logic for building my calculator? I cannot figure out how to integrate sin/cos/tan/percents correctly. This is my first real java script assignment and I am not sure how to go about handling all the errors I get. I frequently get not a number as the result. I know I cannot read everything into a variable to handle the calculations. But I don't know where to go from here.
function in1() {
document.calc.txt.value += '1'
}
function in2() {
document.calc.txt.value += '2'
}
function in3() {
document.calc.txt.value += '3'
}
function in4() {
document.calc.txt.value += '4'
}
function in5() {
document.calc.txt.value += '5'
}
function in6() {
document.calc.txt.value += '6'
}
function in7() {
document.calc.txt.value += '7'
}
function in8() {
document.calc.txt.value += '8'
}
function in9() {
document.calc.txt.value += '9'
}
function inAdd() {
document.calc.txt.value += '+'
}
function inSub() {
document.calc.txt.value += '-'
}
function inMult() {
document.calc.txt.value += '*'
}
function inDiv() {
document.calc.txt.value += '/'
}
function inDecimal() {
document.calc.txt.value += '.'
}
flag = 0;
function inSin() {
document.calc.txt.value += 'Sin('
flag = 1
}
function inCos() {
document.calc.txt.value += 'Cos('
flag = 2
}
function inTan() {
document.calc.txt.value += 'Tan('
flag = 3
}
function inPercent() {
document.calc.txt.value = calc.txt.value / 100;
}
var inputTest = document.getElementById("").value;
function equals() {
if (flag == 1) {
var input = calc.txt.value;
var newNumber = input.substring(4);
document.calc.txt.value = Math.sin(newNumber);
flag = 0
}
if (flag == 2) {
var input = calc.txt.value;
var newNumber = input.substring(4);
document.calc.txt.value = Math.cos(newNumber);
flag = 0
}
if (flag == 3) {
var input = calc.txt.value;
var newNumber = input.substring(4);
document.calc.txt.value = Math.tan(newNumber);
flag = 0
} else if (flag == 0) {
document.calc.txt.value = (eval(calc.txt.value))
}
}
.flexBoxContainer {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.title {
border: black 5px solid;
color: red;
padding: 2px;
font-size: 21;
width: 310px;
text-align: center;
}
.calculator {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
box-sizing: border-box;
}
.calculator .keys {
border: white 3px ridge;
height: 60px;
width: 75px;
}
.input-box {
border: white 3px ridge;
height: 60px;
width: 236px;
flex-basis: 66%;
}
.input-display {
border: black 3px solid;
background-color: white;
height: 45px;
width: 233x;
flex-basis: 66%;
text-align: right;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
;
}
.container1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
#media (min-width: 381px) {
.calculator {
width: 380px;
}
}
/* button formatting below */
.button1 {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 19px;
text-align: center;
display: inline-block;
font-size: 36px;
cursor: pointer;
}
.button2 {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 20px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonSin {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 7px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonCos {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 3px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonTan {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 2px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.button3 {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 17px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonMinus {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 22px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonDiv {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 21px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonDec {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 23px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonPer {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 12px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
<html>
<title>JavaScript Calculator Assignment</title>
<head>
<link rel="stylesheet" href="calculator.css">
<script type="text/javascript" src="calculator.js"></script>
</head>
<div class="flexBoxContainer">
<form class="calculator" name="calc">
<div class="title">JavaScript Calculator</div>
<div class="container1">
<div class="input-box center">
<input class="value input-box center" type="text" name="txt" readonly="">
<!--<span class ="" onclick="document.calc.txt.value +=''"></span> <!--do we need this?-->
</div>
<div class="keys">
<span class="button1" onclick="document.calc.txt.value =''">c</span>
</div>
</div>
<div class="keys">
<span class="button2" onclick="in1()">1</span>
</div>
<div class="keys">
<span class="button2" onclick="in2()">2</span>
</div>
<div class="keys">
<span class="button2" onclick="in3()">3</span>
</div>
<div class="keys">
<span class="buttonSin" onclick="inSin()">Sin</span>
</div>
<div class="keys">
<span class="button2" onclick="in4()">4</span>
</div>
<div class="keys">
<span class="button2" onclick="in5()">5</span>
</div>
<div class="keys">
<span class="button2" onclick="in6()">6</span>
</div>
<div class="keys">
<span class="buttonCos" onclick="inCos()">Cos</span>
</div>
<div class="keys">
<span class="button2" onclick="in7()">7</span>
</div>
<div class="keys">
<span class="button2" onclick="in8()">8</span>
</div>
<div class="keys">
<span class="button2" onclick="in9()">9</span>
</div>
<div class="keys">
<span class="buttonTan" onclick="inTan()">Tan</span>
</div>
<div class="keys">
<span class="button3" onclick="inAdd()">+</span>
</div>
<div class="keys">
<span class="buttonMinus" onclick="inSub()">-</span>
</div>
<div class="keys">
<span class="button2" onclick="inMult()">*</span>
</div>
<div class="keys">
<span class="buttonDiv" onclick="inDiv()">/</span>
</div>
<div class="keys">
<span class="buttonDec" onclick="inDecimal()">.</span>
</div>
<div class="keys">
<span class="button2" onclick="document.calc.txt.value +='0'">0</span>
</div>
<div class="keys">
<span class="button3" onclick="equals()"> = </span>
</div>
<div class="keys">
<span class="buttonPer" onclick="inPercent()">%</span>
</div>
</form>
</div>
</html>

Related

Problem with displaying number in inner text

newbie here...
I am working on some simple project where I am trying to simulate bank app.
Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.
Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.
Here it is javascript file, if you can see from this why I get error.
Also here it is html and css if you don't understand what I am talking about.
////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;
allcards.forEach((kartica) => {
let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
novacNaKartici = parseInt(novacNaKartici);
totalMoneyAccount += novacNaKartici;
totalMoney.innerText = ` ${replika2} $`;
});
//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
function updateProfile(totalMoneyAccount) {
totalMoney.innerHTML = totalMoneyAccount;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="style.css" />
<title>Bank app</title>
</head>
<body>
<div class="container">
<div class="profile">
<div class="header">
<span class="material-symbols-outlined"> notifications </span>
<span class="material-symbols-outlined"> search </span>
</div>
<div class="person">
<img src="/img/cost1.jpg" alt="" />
<p>Random user</p>
<span class="totalMoney" style="font-size: 20px;"></span>
</div>
<div class="menu">
<div class="account flex">
<span class="material-symbols-outlined"> manage_accounts </span>
<p>Accounts</p>
</div>
<div class="transactions flex">
<span class="material-symbols-outlined"> receipt_long </span>
<p>Transactions</p>
</div>
<div class="bonus flex">
<span class="material-symbols-outlined"> star </span>
<p>Bonus</p>
</div>
<div class="invest flex">
<span class="material-symbols-outlined"> trending_up </span>
<p>Investments</p>
</div>
<div class="logOut flex">
<span class="material-symbols-outlined"> logout </span>
<p>Log Out</p>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="naslov">
<p>Cards</p>
<span class="material-symbols-outlined">
add_circle
</span>
</div>
<div class="allCards">
<div class="cards changeJustify">
<div class="singleCard">
<img src="/img/visa.png" alt="" class="changeImg"/>
</div>
<div class="opis">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance">
<span class="material-symbols-outlined changeSpan dots">
more_vert
</span>
<span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
</div>
</div>
<div class="cards changeJustify">
<div class="singleCard ">
<img src="/img/american.jpg" alt="" class="changeImg"/>
</div>
<div class="opis ">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance ">
<span class="material-symbols-outlined changeSpan dots" >
more_vert
</span>
<span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
</div>
</div>
</div>
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transactions</p>
<div class="transakcije">
</div>
</div>
</div>
<div class="right">
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transfer money</p>
<div class="transfer">
<label for="recivier">Transfer to</label>
<input type="text" placeholder="antonio3101" name="recivier">
<label for="amount">Amount</label>
<input type="number" placeholder="$300..." name="amount">
<button class="sendBtn">Send</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
background-color: #f1f2f6;
}
.profile {
height: 100vh;
width: 20%;
background-color: #1d1c57;
display: flex;
flex-direction: column;
color: white;
}
.profile .header {
display: flex;
padding: 30px;
align-items: center;
justify-content: space-between;
color: #7979a6;
}
.profile .header span {
font-size: 26px;
}
.profile .header span:hover {
color: white;
}
.profile .person {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.profile .person img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile .person p {
font-size: 26px;
color: #c6c5d8;
}
.profile .menu {
margin-top: 100px;
padding: 20px;
background-color: #262467;
border-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
position: relative;
font-size: 22px;
color: #7c7eaa;
}
.profile .flex {
margin-left: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.profile .flex:hover {
margin-left: 40px;
color: white;
transition: ease-in-out;
}
.logOut {
position: absolute;
bottom: 50px;
}
/*-------------------------- KARTICE ----------------------------------------- */
.main .naslov {
color: grey;
font-size: 30px;
font-weight: bold;
}
.naslov {
display: flex;
align-items: center;
justify-content: space-between;
}
.naslov span {
font-size: 32px;
}
.naslov span:hover {
color: black;
}
.main .left {
display: flex;
flex-direction: column;
margin-left: 30px;
}
.main .left .cards {
background-color: #ffffff;
padding: 20px;
display: flex;
padding: 20px;
border-radius: 20px;
}
.cards {
margin-top: 10px;
}
.cards .singleCard {
display: flex;
width: 100%;
}
.allCards {
display: flex;
flex-direction: column;
}
.cards .singleCard img {
width: 250px;
padding-right: 10px;
}
.cards .opis p {
margin: 0;
padding: 0;
margin-left: 10px;
}
.cards .opis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.cards .balance {
margin-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/*------------------------------- CHANGE CARD -------------------------------- */
.changeImg {
height: 50px;
object-fit: cover;
}
.changeSpan {
display: none;
}
.changeJustify {
display: flex;
align-items: center;
}
.changeBalance {
display: none;
}
/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
background-color: white;
display: flex;
flex-direction: column;
padding: 10px;
}
.single-transaction {
display: flex;
margin-left: 10px;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid grey;
}
.single-transaction img {
height: 60px;
width: 60px;
border-radius: 50%;
object-fit: cover;
}
.single-transaction .destination {
font-size: 16px;
color: rgb(73, 73, 73);
font-weight: bold;
}
.single-transaction .amount {
color: rgb(30, 149, 30);
font-weight: bold;
font-size: 16px;
}
.single-transaction:last-child {
border-bottom: 0;
}
/*-------------------------- RIGHT SECTIONS ----------------------------------------- */
/*-------------------------- TRANSFER MONEY ----------------------------------------- */
.right {
display: flex;
flex-direction: column;
margin-left: 100px;
}
.right .transfer {
background-color: #1d1c57;
padding: 50px 20px;
border-radius: 10px;
margin-left: 10px;
margin-right: 20px;
}
.right .transfer input {
height: 30px;
font: 24px;
margin-left: 10px;
}
.right .transfer label {
margin-left: 20px;
color: white;
}
.right .transfer button {
padding: 10px 15px;
color: black;
background-color: white;
border-radius: 5px;
border: 0;
margin-left: 20px;
margin-right: 20px;
}

You are overwriting your amount variable (which points to an input element) with the value inputted into said input.
Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction. This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN.
Change this code:
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
to something like this:
sendMoneyBtn.addEventListener(`click`, () => {
const amountValue = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amountValue;
updateProfile(totalMoneyAccount);
});
Credit to #JohnnyMopp for noticing it first.

javascript calculator works for the first time but if i enter other values she works only after refreshing the page. Why?

I tried to build this calculator, but she's works only for the first time but if i enter other values she works only after refreshing the page.
For exemple if (coutJour = 5) and (nbrJour = 30) the result will to be : (slrBase = 150), (prime = 200) & (slrNet = 350). But the problem is if I enter an other values, the result will be the same she's don't change.
Why?
var
coutJour = Number(document.querySelector('#coutJour-input').value),
nbrJour = Number(document.querySelector('#nbrJour-input').value);
var
slrBase,
slrNet;
var
calcBtn = document.querySelector('#calc-btn'),
resetBtn = document.querySelector('#reset-btn');
if(nbrJour >= 25){
var prime = 200;
}
else{
var prime = 0;
}
calcBtn.addEventListener('click', calcResult);
function calcResult(){
slrBase = parseFloat(coutJour) * parseInt(nbrJour);
slrNet = parseFloat(slrBase) + parseInt(prime);
document.getElementById('sb-result').innerHTML = slrBase
document.getElementById('prime-result').innerHTML = prime;
document.getElementById('snet-result').innerHTML = slrNet;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#container{
width: 100%;
height: 100vh;
display: grid;
grid-template-rows: 10% auto 5%;
}
#header{
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #636363;
box-shadow: 0 3px 6px #636363;
cursor: pointer;
}
#header-title{
text-transform: uppercase;
letter-spacing: .3rem;
}
#main{
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
#main-container{
width: 350px;
padding: 20px;
border: 2px solid;
}
.input__container{
margin-bottom: 15px;
}
.input__title{
font-size: 1.2rem;
font-weight: 600;
}
input{
width: 100%;
display: block;
margin-top: 5px;
padding: 8px 5px;
border: 1px solid;
background-color: transparent;
}
#btns{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 15px;
}
button{
margin-bottom: 10px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1rem;
outline: none;
cursor: pointer;
}
#calc-btn{
height: 42px;
border: none;
background-color: #636363;
}
#reset-btn{
padding: 5px 0;
border: 1px solid;
background-color: transparent;
}
#result{
width: 100%;
margin-top: 20px;
padding: 5px;
}
.result__container{
width: 100%;
display: flex;
justify-content: space-between;
padding: 5px;
}
.result__title, .result__output{
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05rem;
}
<div id="container">
<header id="header">
<h1 id="header-title">calcule le prime</h1>
</header>
<main id="main">
<div id="main-container">
<form id="form">
<!-- ===== inputs ===== -->
<div id="inputs">
<div class="coutJour__input input__container">
<span class="coutJour__title input__title">Cout Journalier</span>
<input type="number" placeholder="Entrer votre cout journalier ici" id="coutJour-input">
</div>
<div class="coutJour__input input__container">
<span class="nbrJour__title input__title">Nombre des jours</span>
<input type="number" placeholder="Entrer votre nombre des jours ici" id="nbrJour-input">
</div>
</div>
<!-- ===== buttons ===== -->
<div id="btns">
<button type="button" id="calc-btn">calcul</button>
<button type="reset" id="reset-btn">reset</button>
</div>
</form>
<!-- ===== result output ===== -->
<div id="result">
<!-- ===== salaire de base output ===== -->
<div id="sb-container" class="result__container">
<span class="result__title">Salaire de base :</span>
<span id="sb-result" class="result__output">0</span>
</div>
<!-- ===== prime output ===== -->
<div id="prime-container" class="result__container">
<span class="result__title">Prime :</span>
<span id="prime-result" class="result__output">0</span>
</div>
<!-- ===== salaire net output ===== -->
<div id="snet-container" class="result__container">
<span class="result__title">Salaire net :</span>
<span id="snet-result" class="result__output">0</span>
</div>
</div>
</div>
</main>
</div>

I think you need o coutJour and nbrJour on calcBtn click. Try this below code.
calcBtn = document.querySelector('#calc-btn'),
calcBtn.addEventListener('click', calcResult);
function calcResult(){
var
coutJour = Number(document.querySelector('#coutJour-input').value),
nbrJour = Number(document.querySelector('#nbrJour-input').value);
var
slrBase,
slrNet;
var
resetBtn = document.querySelector('#reset-btn');
if(nbrJour >= 25){
var prime = 200;
}
else{
var prime = 0;
}
slrBase = parseFloat(coutJour) * parseInt(nbrJour);
slrNet = parseFloat(slrBase) + parseInt(prime);
document.getElementById('sb-result').innerHTML = slrBase
document.getElementById('prime-result').innerHTML = prime;
document.getElementById('snet-result').innerHTML = slrNet;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#container{
width: 100%;
height: 100vh;
display: grid;
grid-template-rows: 10% auto 5%;
}
#header{
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #636363;
box-shadow: 0 3px 6px #636363;
cursor: pointer;
}
#header-title{
text-transform: uppercase;
letter-spacing: .3rem;
}
#main{
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
#main-container{
width: 350px;
padding: 20px;
border: 2px solid;
}
.input__container{
margin-bottom: 15px;
}
.input__title{
font-size: 1.2rem;
font-weight: 600;
}
input{
width: 100%;
display: block;
margin-top: 5px;
padding: 8px 5px;
border: 1px solid;
background-color: transparent;
}
#btns{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 15px;
}
button{
margin-bottom: 10px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1rem;
outline: none;
cursor: pointer;
}
#calc-btn{
height: 42px;
border: none;
background-color: #636363;
}
#reset-btn{
padding: 5px 0;
border: 1px solid;
background-color: transparent;
}
#result{
width: 100%;
margin-top: 20px;
padding: 5px;
}
.result__container{
width: 100%;
display: flex;
justify-content: space-between;
padding: 5px;
}
.result__title, .result__output{
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05rem;
}
<div id="container">
<header id="header">
<h1 id="header-title">calcule le prime</h1>
</header>
<main id="main">
<div id="main-container">
<form id="form">
<!-- ===== inputs ===== -->
<div id="inputs">
<div class="coutJour__input input__container">
<span class="coutJour__title input__title">Cout Journalier</span>
<input type="number" placeholder="Entrer votre cout journalier ici" id="coutJour-input">
</div>
<div class="coutJour__input input__container">
<span class="nbrJour__title input__title">Nombre des jours</span>
<input type="number" placeholder="Entrer votre nombre des jours ici" id="nbrJour-input">
</div>
</div>
<!-- ===== buttons ===== -->
<div id="btns">
<button type="button" id="calc-btn">calcul</button>
<button type="reset" id="reset-btn">reset</button>
</div>
</form>
<!-- ===== result output ===== -->
<div id="result">
<!-- ===== salaire de base output ===== -->
<div id="sb-container" class="result__container">
<span class="result__title">Salaire de base :</span>
<span id="sb-result" class="result__output">0</span>
</div>
<!-- ===== prime output ===== -->
<div id="prime-container" class="result__container">
<span class="result__title">Prime :</span>
<span id="prime-result" class="result__output">0</span>
</div>
<!-- ===== salaire net output ===== -->
<div id="snet-container" class="result__container">
<span class="result__title">Salaire net :</span>
<span id="snet-result" class="result__output">0</span>
</div>
</div>
</div>
</main>
</div>

How do I increment data attributes(int) using jquery?

I want to add somethin y input in my ol, i do it,
when i write something in input filed and click add
i create li, then i want to add to li data attribute
which will increment, when will create new li in the picture there is a code[1]: https://i.stack.imgur.com/oAr6V.png
this is what i tried so far (data-id is not adding to newlt created li's):-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li>' + value + '</li>');
$('.toDo ol').append((newLi));
/*newLi.each(function() {
$(this).attr("data-id", i++);
console.log(i++);
$('.toDo ol').append((newLi));
});
$('.toDo ol').append((newLi)); */
}
})
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>

You can do it like below:-
check pre-existing li length and add 1 to it and add it as data-id of newly created li
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`
Working snippet:-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');
$('.toDo ol').append((newLi));
}
});
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>

Change CSS of nth class in Jquery or Javascript

I am trying to change the text color of the 5th infobox (class) in my code below. The text color changes but for all the infoboxes.
//INFOBOX5
var json_data = {"headers":["Platform","Value1","value1","valueP1","valueP2"],"rows":[["platform2","xxx",404.07000000000005,1634,6364],["platform5","xxx",404.07000000000005,1634,6364],["platform1","xxx",352.8,1634,6364],["platform3","xxx",352.8,1634,6364],
["platform3","xxx",352.8,1634,6364],["platform4","xxx",352.8,1634,6364]]};
var platform_data = json_data.rows;
var platform1_element = document.getElementById("platform1");
var platform5_element = document.getElementById("platform5");
var platform6_element = document.getElementById("platform6");
var platform2_element = document.getElementById("platform2");
var platform3_element = document.getElementById("platform3");
var platform4_element = document.getElementById("platform4");
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
var platforms = [];
for (var i in platform_data) {
if (platform_data[i][0] != null){
platforms[i] = platform_data[i][0].toLowerCase();
}
}
var unique_platforms = platforms.filter( onlyUnique );
var target_width = 100/(unique_platforms.length-2);
var width_str=target_width+"%";
platform1_element.classList.add("hidden");
platform5_element.classList.add("hidden");
platform6_element.classList.add("hidden");
platform3_element.classList.add("hidden");
platform2_element.classList.add("hidden");
platform4_element.classList.add("hidden");
var total_value1 = 0;
var total_value2 = 0;
var total_display_value1 = 0;
var total_video_value1 = 0;
var total_mixed_value1 = 0;
var total_other_value1 = 0;
var total_display_value2 = 0;
var total_video_value2 = 0;
var total_mixed_value2 = 0;
var value2_numbers = [];
for (var i in unique_platforms) {
var platform_name = unique_platforms[i].toLowerCase();
var display_value1_total = 0;
var display_value2_total = 0;
var video_value1_total = 0;
var video_value2_total = 0;
var mixed_value1_total = 0;
var mixed_value2_total = 0;
var other_value1_total = 0;
for (var x in platform_data){
if (platform_data[x][0] != null){
if(platform_data[x][0].toLowerCase() == platform_name){
switch(platform_data[x][1]) {
case "display":
// Red Dot
display_value1_total = display_value1_total + platform_data[x][2];
total_value1 = total_value1 + display_value1_total;
break;
case "video":
video_value1_total = video_value1_total + platform_data[x][2];
total_value1 = total_value1 + video_value1_total;
break;
case "mixed":
mixed_value1_total = mixed_value1_total + platform_data[x][2];
total_value1 = total_value1 + mixed_value1_total;
break;
case "Other":
other_value1_total = other_value1_total + platform_data[x][2];
total_value1 = total_value1 + other_value1_total;
break;
default:
doNothing = "";
}
}
}else {
value2_numbers = platform_data[x];
}
}
var platform_value1 = display_value1_total + video_value1_total + mixed_value1_total + other_value1_total;
var generic_element = document.getElementById(platform_name);
var element_value1_name = platform_name+"_value1";
var fl_value1 = parseFloat(platform_value1).toFixed(0);
var curr_flag = "€"+formatNumber(fl_value1);
document.getElementById(element_value1_name).innerHTML = curr_flag;
total_display_value1 = total_display_value1 + display_value1_total;
total_video_value1 = total_video_value1 + video_value1_total;
total_mixed_value1 = total_mixed_value1 + mixed_value1_total;
}
var total_value1_string = "<h1>€" + formatNumber(Number(total_value1).toFixed(0)) + "</h1>";
//document.getElementById("total_value1").innerHTML = total_value1_string;
if (value2_numbers.length == 0){
value2_numbers = platform_data[0];
}
var fl_value2 = 0;
var curr_flag_bud = '';
var element_value2_name = '';
for (var i in json_data.headers){
switch(json_data.headers[i]) {
case "valueP1":
element_value2_name = "platform1_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€"+formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
case "valueP2":
element_value2_name = "platform2_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€" +formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
case "valueP1":
element_value2_name = "platform1_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€" +formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
default:
}
}
var statBox = Array.from(document.querySelectorAll('.infobox'));
var element_id;
var parentBoxlist = Array.from(document.querySelectorAll('.parentbox'));
var channel_value1_check = 0;
var value1_channels = [];
// if (total_mixed_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[0] = 'mixed';};
// if (total_video_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[1] = 'video';};
// if (total_display_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[2] = 'display';};
statBox.forEach(function(box) {
switch(unique_platforms.length) {
case 1:
// 1 box
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox1');
box.classList.remove('hidden');
}
break;
case 2:
// 2 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox2');
box.classList.remove('hidden');
}
break;
case 3:
// 3 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox3');
box.classList.remove('hidden');
}
break;
case 4:
// 4 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox4');
box.classList.remove('hidden');
}
break;
case 5:
// 5 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox5');
box.classList.remove('hidden');
}
break;
default:
}
});
$(".boxbox:nth-of-type(1)").css("color", "#fff");
#import url('https://fonts.googleapis.com/css?family=Roboto');
body{
color: #fff;
font-family: Roboto;
margin:0;
overflow:hidden;
}
h1{
font-size: 1.2vw;
}
h3{
font-size: 1.1vw!important;
font-weight: 100;
margin: 0;
padding: 5px;
}
.redSq{
background-color: #ff000a;
width: 117px;
height: 241px;
float:left;
}
.row {
display: table;
width: 99.8%;
height: 180px;
color: #454545;
background-color:#dee9f3;
//border: solid 1px #454545;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
margin-bottom: 10px;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
p{
font-size: 1.2vw;
}
.boxes{
padding-top: 40px;
padding-left: 30px;
padding-right: 5%;
min-width: 200px;
float:left;
display: inline-block;
}
#line{
border-bottom: solid 1px #CCC;
margin-top: 0px;
padding-top: 15px;
}
.infobox {
float:left;
margin: 0;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: #454545;
}
.infobox1 {
float:left;
min-height:150px;
min-width: 100%;
margin: 0;
}
.infobox2 {
float:left;
min-height:150px;
min-width: 49%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox3 {
float:left;
min-height:150px;
min-width: 32.33%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox4 {
float:left;
//min-height:150px;
min-width: 23.9%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox5 {
float:left;
min-height:150px;
min-width: 32.33%;
margin: 0 0.5% 0.7%;
//padding: 18px 0;
}
div.leftBox{
float:left;
width:60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
div.rightBox{
float:left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
.infocontentheader {
//text-align: center;
line-height: 2.8;
//color: #fff;
vertical-align: middle;
height: 100%;
float:left;
width:25%;
}
.infocontent{
text-align: center;
color: #fff;
width: 50%;
float: left;
}
div#platform1.infocontentheader{
background-color: #3c5999;
}
div#platform1.infobox img{
display: block;
margin: 0 auto 0 auto;
}
p#sTitle {
font-weight: 900;
font-size: 1.5vw;
}
p#bTitle {
//font-weight: 900;
font-size: 1.2vw;
}
p#platform1_value1, p#platform5_value1, p#platform4_value1 ,p#platform3_value1,
p#platform2_value1, p#twitter_value1 {
font-weight: 900;
font-size: 1.3em;
margin: 10px 0 0 20px;
}
p#platform1_budget, p#platform5_budget, p#platform4_budget, p#platform3_budget,
p#platform2_budget, p#twitter_budget{
font-size: 1.2em;
margin: 10px 0 0 20px;
}
div#twitter.infocontentheader{
background-color: #1da1f2;
}
div#twitter.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform3.infocontentheader{
background-color: #a15aa0;
}
div#display.parentbox{
background-color: #b3b3b3;
color: #fff;
}
div#video.parentbox{
background-color: #999999;
color: #fff;
}
div#mixed.parentbox{
background-color: #c1c1c1;
color: #fff;
}
#platform3 div.infocontentheader{
color: #fff;
}
div#platform3.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform3_value.infocontent{
color: #000;
}
div#platform5.infocontentheader{
background-color: #ff0102;
}
div#platform5.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform4.infocontentheader{
background-color: #cac9c2;
}
div#platform4.infobox img{
display: block;
margin: 10% auto 0 auto;
}
div#platform2.infobox{
background-color: #fff;
}
div#platform2.infobox img{
display: block;
margin: 10% auto 0 auto;
}
.hidden{
display:none;
}
#parent_div_1{
width:50%;
min-height: 150px;
background-color: #757476;
margin-right:0px;
float:left;
}
#parent_div_2{
width:50%;
min-height: 150px;
background-color: #8D8D8D;
margin-right:0px;
float:left;
}
.parentbox{
width:33.33%;
min-height: 150px;
/*background-color: #8D8D8D;*/
margin-right:0px;
float:left;
}
.parentbox1{
width:100%;
min-height: 150px;
margin-right:0px;
float:left;
}
.parentbox2{
width:50%;
min-height: 150px;
margin-right:0px;
float:left;
}
.parentbox3{
width:33.33%;
min-height: 150px;
margin-right:0px;
float:left;
}
.child_div_1{
margin-top: 50px;
margin-left: 15%;
margin-bottom: 0px;
text-align: left;
}
.child_div_2{
margin-left: 15%;
margin-top: 10px;
margin-bottom: 40px;
text-align: left;
}
.child_budget{
margin-top: 10px;
margin-bottom: 40px;
padding-left:15%;
text-align: left;
float: left;
}
.child_value1{
margin-top: 10px;
margin-bottom: 40px;
padding-right: 15%;
text-align: left;
float:right;
}
.child_title{
margin-top: 50px;
margin-bottom: 0px;
text-align: center;
}
.child_budget_number{
padding-right: 20%;
}
.child_value1_number{
padding-left: 20%;
}
.boxbox {
display: table;
width: 99.8%;
height: 160px;
color: #454545;
font-size:1.1vw;
}
.boxbox {
float:left;
display: table;
width: 99.8%;
height: 180px;
color: #454545;
}
.boxbox > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper2" style="height:160px;">
<div class="infobox" id="platform1">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform1_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform1_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform6">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform6_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform6_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform3">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform3_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform3_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform5">
<div class="boxbox" id="platform5">
<div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform5_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform5_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform4">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform4_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform4_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform2">
<div class="boxbox" id="platform2">
<div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform2_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform2_value2"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Your direct child of class container infobox5 is overwriting the CSS color for your Jquery method. You have to remove it first and then use it as demonstrated below:
Note- .eq(index) is better suited for your query in contrast to :nth-of-type(index). You can try them both and see it for yourself.
Pointer:
Clean up your CSS, a lot of unecessary styles have been implemented but for this query, as mentioned by the other answer as well .boxbox class is implementing its own color style and as mentioned the child of div with class infobox5 is also implementing its own color style which overrides the JQuery css being implemented on the parent container.
$(".infobox5").eq(4).css("color", "green"); //Index starts from 0 for 1st element, 1 for 2nd and so on 4 for 5th element of type .infobox5
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
color: #fff;
font-family: Roboto;
margin: 0;
overflow: hidden;
}
h1 {
font-size: 1.2vw;
}
h3 {
font-size: 1.1vw!important;
font-weight: 100;
margin: 0;
padding: 5px;
}
.redSq {
background-color: #ff000a;
width: 117px;
height: 241px;
float: left;
}
.row {
display: table;
width: 99.8%;
height: 180px;
color: #454545;
background-color: #dee9f3;
//border: solid 1px #454545;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
margin-bottom: 10px;
}
.row>.col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
td {
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table {
width: 100%;
background-color: #454545;
font-weight: 500;
border-collapse: separate;
border-spacing: 0.3em 1.1em;
color: #fff;
border: 0;
}
p {
font-size: 1.2vw;
}
.boxes {
padding-top: 40px;
padding-left: 30px;
padding-right: 5%;
min-width: 200px;
float: left;
display: inline-block;
}
#line {
border-bottom: solid 1px #CCC;
margin-top: 0px;
padding-top: 15px;
}
.infobox {
float: left;
margin: 0;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: #454545;
}
.infobox1 {
float: left;
min-height: 150px;
min-width: 100%;
margin: 0;
}
.infobox2 {
float: left;
min-height: 150px;
min-width: 49%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox3 {
float: left;
min-height: 150px;
min-width: 32.33%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox4 {
float: left;
//min-height:150px;
min-width: 23.9%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox5 {
float: left;
min-height: 150px;
min-width: 32.33%;
margin: 0 0.5% 0.7%;
//padding: 18px 0;
}
div.leftBox {
float: left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
div.rightBox {
float: left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
.infocontentheader {
//text-align: center;
line-height: 2.8;
//color: #fff;
vertical-align: middle;
height: 100%;
float: left;
width: 25%;
}
.infocontent {
text-align: center;
color: #fff;
width: 50%;
float: left;
}
div#facebook.infocontentheader {
background-color: #3c5999;
}
div#facebook.infobox img {
display: block;
margin: 0 auto 0 auto;
}
p#sTitle {
font-weight: 900;
font-size: 1.5vw;
}
p#bTitle {
//font-weight: 900;
font-size: 1.2vw;
}
p#facebook_spend,
p#youtube_spend,
p#search_spend,
p#programmatic_spend,
p#instagram_spend,
p#twitter_spend {
font-weight: 900;
font-size: 1.3em;
margin: 10px 0 0 20px;
}
p#facebook_budget,
p#youtube_budget,
p#search_budget,
p#programmatic_budget,
p#instagram_budget,
p#twitter_budget {
font-size: 1.2em;
margin: 10px 0 0 20px;
}
div#twitter.infocontentheader {
background-color: #1da1f2;
}
div#twitter.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#programmatic.infocontentheader {
background-color: #a15aa0;
}
div#display.parentbox {
background-color: #b3b3b3;
color: #fff;
}
div#video.parentbox {
background-color: #999999;
color: #fff;
}
div#mixed.parentbox {
background-color: #c1c1c1;
color: #fff;
}
#programmatic div.infocontentheader {
color: #fff;
}
div#programmatic.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#programmatic_value.infocontent {
color: #000;
}
div#youtube.infocontentheader {
background-color: #ff0102;
}
div#youtube.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#search.infocontentheader {
background-color: #cac9c2;
}
div#search.infobox img {
display: block;
margin: 10% auto 0 auto;
}
div#instagram.infobox {
background-color: #fff;
}
div#instagram.infobox img {
display: block;
margin: 10% auto 0 auto;
}
.hidden {
display: none;
}
#parent_div_1 {
width: 50%;
min-height: 150px;
background-color: #757476;
margin-right: 0px;
float: left;
}
#parent_div_2 {
width: 50%;
min-height: 150px;
background-color: #8D8D8D;
margin-right: 0px;
float: left;
}
.parentbox {
width: 33.33%;
min-height: 150px;
/*background-color: #8D8D8D;*/
margin-right: 0px;
float: left;
}
.parentbox1 {
width: 100%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.parentbox2 {
width: 50%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.parentbox3 {
width: 33.33%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.child_div_1 {
margin-top: 50px;
margin-left: 15%;
margin-bottom: 0px;
text-align: left;
}
.child_div_2 {
margin-left: 15%;
margin-top: 10px;
margin-bottom: 40px;
text-align: left;
}
.child_budget {
margin-top: 10px;
margin-bottom: 40px;
padding-left: 15%;
text-align: left;
float: left;
}
.child_spend {
margin-top: 10px;
margin-bottom: 40px;
padding-right: 15%;
text-align: left;
float: right;
}
.child_title {
margin-top: 50px;
margin-bottom: 0px;
text-align: center;
}
.child_budget_number {
padding-right: 20%;
}
.child_spend_number {
padding-left: 20%;
}
.boxbox {
display: table;
width: 99.8%;
height: 160px;
font-size: 1.1vw;
}
.boxbox {
float: left;
display: table;
width: 99.8%;
height: 180px;
}
.boxbox>.col-lg-6 {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper2" style="height:160px;">
<div class="infobox infobox5" id="platform1">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform1_value1">353</div>
</div>
<div id="bTitle">value2<br>
<div id="platform1_value2">1,634</div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox hidden" id="platform6">
<div class="boxbox" style="color: rgb(255, 255, 255);">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform6_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform6_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform5">
<div class="boxbox" >
<div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform5_value1">706</div>
</div>
<div id="bTitle">value2<br>
<div id="platform5_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform3">
<div class="boxbox" id="platform3" >
<div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform3_value1">404</div>
</div>
<div id="bTitle">value2<br>
<div id="platform3_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform4">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform4_value1">353</div>
</div>
<div id="bTitle">value2<br>
<div id="platform4_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform2">
<div class="boxbox" id="platform2" >
<div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform2_value1">404</div>
</div>
<div id="bTitle">value2<br>
<div id="platform2_value2">6,364</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use: element.eq(n); where n is the index value of the element

How to reset JavaScript random number generator

I’ve started my first own JS project.
In the end, I would like to have my own slotmachine.
By now, I’ve the problem, that I don’t know how to restart my program or just the function for generating again and again the new random values.
This is my code until now:
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
function randomClickX() {
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>
As you see, I've to reload the HTML file to click the SPIN-button again to have new randoms.
I think the point is to create a big comprehensive function and call it when the SPIN function ends. But I don't now how to do that ...
What is the missing step, to have as many values as the user wishs to have?
Thanks, Jonas

Simply move the random numbers being generated into the click method.
function randomClickX() {
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>

Categories