Session Storage not working - javascript

I am getting session values and trying to store it in html using Id. When I alert the value in javascript function, it shows the value in session but it does not set it in HTML.
function result() {
var quantScore = sessionStorage.getItem('quantData');
var quantAns = sessionStorage.getItem('mathQuestion');
var readingCorrectAns = sessionStorage.getItem('readcorrect');
var readingAns = sessionStorage.getItem('readans');
var audvidScore = sessionStorage.getItem('audiovideoData');
var audvidAns = sessionStorage.getItem('audiovideoQuestion');
document.getElementById("quantque").innerHTML = quantAns;
document.getElementById("quantscore").innerHTML = quantScore;
document.getElementById("readque").innerHTML = readingAns;
document.getElementById("readans").innerHTML = readingCorrectAns;
document.getElementById("audvidque").innerHTML = audvidAns;
document.getElementById("audvidscore").innerHTML = audvidScore
}
<body onload="result()">
<div class="outer">
<div class="top">Score Card</div>
<section class="section1">
<div class="border">
<details>
<summary>Quantitative Section</summary>
<p><b>Number of Questions Answered: <span id = "quantque"> </span><br>
Number of Correct Answered: <span id = "quantans"> </span><br>
Score: <span id = "qunatscore"> </span><br></b></p>
</details>
<details>
<summary>Reading Section</summary>
<p><b>Number of Questions Answered: <span id = "readque"> </span><br>
Number of Correct Answered: <span id = "readans"> </span><br>
Score: <span id = "readscore"> </span><br></b></p>
</details>
<details>
<summary>Audio/Video Section</summary>
<p><b>Number of Questions Answered: <span id = "audvidque"> </span><br>
Number of Correct Answered: <span id = "audvidans"> </span><br>
Score: <span id = "audvidscore"> </span></b></p>
</details> <br>
</div>
<h2 style="text-align : center;"> Thank You !</h2>
<input type="submit" name="submit" value="Finish" />
</div>
</div>
</body>

Related

Trying to calculate discount from two spans

I have this structure:
<div class="gs-item-price">
<span class="gs-old-price">5,00</span><br>
<span class="gs-new-price">1,00</span><br>
</div>
<br>
<span class="value1"></span> %
<br>
<br>
<div class="gs-item-price">
<span class="gs-old-price">10,00</span><br>
<span class="gs-new-price">5,00</span><br>
</div>
<br>
<span class="value1"></span> %
I need to calculate and visualize the discount percentage.
I have written the following code:
var OldPrice=$('.gs-old-price').html().replace(/,/g,'.');
var NewPrice=$('.gs-new-price').html().replace(/,/g,'.');
var oldPriceNum= parseFloat(OldPrice);
var newPriceNum= parseFloat(NewPrice);
var percent= oldPriceNum - newPriceNum;
var percent1= percent/oldPriceNum;
var percent2=percent1*100;
var finalPercent=parseFloat(percent2).toFixed(0);
document.querySelector('.value1').innerHTML = finalPercent;
That visualize only the first value of the percentage.
How can I go through all the divs and get the right percentage? All help will be good
I moved both <span class="value1"></span> % to the appropriate <div class="gs-item-price"> and then I called each. I also changed placing finalPercent. See the snippet:
$('.gs-item-price').each(function() {
var OldPrice=$(this).find('.gs-old-price').html().replace(/,/g,'.');
var NewPrice=$(this).find('.gs-new-price').html().replace(/,/g,'.');
var oldPriceNum= parseFloat(OldPrice);
var newPriceNum= parseFloat(NewPrice);
var percent= oldPriceNum - newPriceNum;
var percent1= percent/oldPriceNum;
var percent2=percent1*100;
var finalPercent=parseFloat(percent2).toFixed(0);
$(this).find('.value1').html(finalPercent)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-item-price">
<span class="gs-old-price">5,00</span><br>
<span class="gs-new-price">1,00</span><br>
<br>
<span class="value1"></span> %
<br>
</div>
<br>
<div class="gs-item-price">
<span class="gs-old-price">10,00</span><br>
<span class="gs-new-price">5,00</span><br>
<br>
<span class="value1"></span> %
</div>

JavaScript unsure how to get querySelectorAll() to connect to div class? [duplicate]

When I click on the checkbox at the top, it puts a '0' in the total box, so I know that it is connected correctly, however I think there is a problem in the logic in the loop. One of the elements in html looks like this.
const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
const checkboxes = document.querySelectorAll('input[data-price][type=checkbox]');
const cbamount = checkboxes.length;
document.getElementsByName('event[]')[0].onclick = function() {
totalPrice()
};
function totalPrice() {
let totalprice = 0;
for (let i = 0; i < cbamount; i++) {
const box = checkboxes[i];
if (box.checked) {
box.dataset.price = totalprice + box.dataset.price;
} //if
} //for
document.getElementsByName("total")[0].value = totalprice;
}
<span class="eventTitle">Carmen </span>
<span class="eventStartDate">2020</span>
<span class="eventEndDate">2020</span>
<span class="catDesc">T</span>
<span class="venueName">Mill </span>
<span class="eventPrice">3</span>
<span class="chosen"><input type="checkbox" name="event[]" value="11" data-price="35.00"></span>
<section id="Cost">
<h3>Total</h3>
Total <input type="text" name="total" size="20" readonly="">
</section>
You have no total in the code you provided.
I would personally use ID when only having one element and if more, use relative addressing and/or delegation
const form = document.getElementById('booking');
const total = document.getElementById('total');
document.getElementById("booking").addEventListener("click", function(e) {
if (e.target.name === "event[]") {
let totalprice = 0;
[...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
if (box.checked) {
totalprice += +box.dataset.price;
} //if
})
document.querySelector("[name=total]").value = totalprice.toFixed(2);
}
})
<form id="booking" method="get">
<section id="book">
<h2>Select Events</h2>
<div class="item">
<span class="eventTitle">Carmen </span>
<span class="eventStartDate">2020</span>
<span class="eventEndDate">2020</span>
<span class="catDesc">T</span>
<span class="venueName">Mill </span>
<span class="eventPrice">3</span>
<span class="chosen"><input name="event[]" type="checkbox" value="11" data-price="35.00"></span>
</div>
<div class="item">
<span class="eventTitle">Ash</span>
<span class="eventStartDate">202</span>
<span class="eventEnd">2020-12-31</span>
<span class="catD">Exhib</span>
<span class="venueNa">The Biy</span>
<span class="eventPr">0.00</span>
<span class="chosen"><input type="checkbox" name="event[]" value="17" data-price="10.00"></span>
</div>
</section>
<section id="Cost">
<h3>Total</h3>
Total <input type="text" name="total" size="20" readonly="">
</section>
</form>

How to save data after refreshing a page

Here is my script of to do list. I wanna add a new note to my ul list.
li > p > i, i, input :
var list = document.querySelector('.list');
document.querySelector('.add-btn').addEventListener('click', function(e){
e.preventDefault();
var input = document.querySelector('.add-input');
if(input.value !== '') {
var li = document.createElement('li');
firstP = document.createElement('p');
secondP = document.createElement('p');
firstIc = document.createElement('i');
secondIc = document.createElement('i');
input1 = document.createElement('input');
firstIc.className = 'fas fa-edit';
secondIc.className = 'fas fa-trash-alt';
input1.className = 'edit-note';
input1.setAttribute('type', 'text');
firstP.textContent = input.value;
secondP.appendChild(firstIc);
secondP.appendChild(secondIc);
li.appendChild(firstP);
li.appendChild(secondP);
li.appendChild(input1);
li.appendChild(li);
}
});
Here is HTML:
<div class='container'>
<h1>Note manager</h1>
<ul class="list">
<li>
<p>First note</p>
<p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
<input type="text" name="" class="edit-note">
</li>
<li>
<p>Second note</p>
<p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
<input type="text" name="" class="edit-note">
</li>
</ul>
<div class="add-notes">
<input type="text" name="" class="add-input" placeholder="Add a note..">
<button type="submit" class="add-btn"> Add</button>
</div>
</div>
And I wanna save added notes when I refresh the page. How can I do this ?
Should I use AJAX >?
Look at this line:
li.appendChild(li);
Here you add element as child of itself (of course it's not possible), looks like you want to do
list.appendChild(li);
instead.
EDIT:
Answer to your updated question: you should post your items to server and save them there or you can use localStorage to keep items in browser (link)

Create an array that saves the quantities of an id and changes when you on click the button option

I have this code, it allows me to pick the quantities for the days and when I click on add to cart and go back to the meal, I can still see my quantities, but as you can see I have different meal options, is there a way to make the quantities consistent with the ids? that if my quantity for beef is 2 2 1, and then I go back to click chicken, it will start with the quantities I have for that meal option ?
<span>
<span class= "prices">
$15.00 - $17.00 </span>
<div class="price-options">
<span id = "price_option-1101" class="none prices">$15.00</span>
</div>
<div class="price-options">
<span id = "price_option-1102" class="none prices">$16.00</span>
</div>
<div class="price-options">
<span id = "price_option-1103" class="none prices">$17.00</span>
</div>
<br>
</span>
<button price=15 label_option= 1101 class="view1 white cbtn1 open_sansbold option protein-option">Tofu <span id="price-difference-for-1101"></span></button><button price=16 label_option= 1102 class="view1 white cbtn1 open_sansbold option protein-option">Chicken <span id="price-difference-for-1102"></span></button><button price=17 label_option= 1103 class="view1 white cbtn1 open_sansbold option protein-option">Beef <span id="price-difference-for-1103"></span></button> </center>
<br>
<div class="textCenter" style="font-weight:700">
Add this meal to the delivery days below:
<br><br>
</div>
<table>
<div class="satin background_option">
<p style="display:inline-block;margin-right:150px">Monday, May 15th</p>
<span style="float:right;">
<i id="qty-minus1" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
<input id="qty1" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
<i id="qty-plus1" class="fa fa-plus-circle controls" style="color: #d7d6d0"></i>
</span>
</div>
<div class="satin background_option" style="margin-top:10px;height:50px;">
<p style="display:inline-block;margin-right:150px">Wednesday, May 17th</p>
<span style="float:right;">
<i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
<input id="qty3" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
<i id="qty-plus3" class="fa fa-plus-circle controls" style="color: #d7d6d0"></i>
</span>
</div>
<div class="satin background_option" style="margin-top:10px;height:50px;">
<p style="display:inline-block;margin-right:150px">Friday, May 19th</p>
<span style="float:right;">
<i id="qty-minus5" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
<input id="qty5" type="number" value="3" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
<i id="qty-plus5" class="fa fa-plus-circle controls" style="color: #d7d6d0"></i>
</span>
</div>
</table>
<center>
<a style="color:white;text-decoration:none;" href="../deliveries"><button class=" view-add white cbtn1 open_sansbold option">Back </button></a>
<button id= "add-to-cart" class=" view-disable white cbtn1 open_sansbold option" disabled> ADD TO CART </button>
</center>
</article>
I already have this JavaScript to do the pricing on the buttons
$(".protein-option").click(function() {
var this_id = $(this).attr("label_option");
var this_price = parseInt($(this).attr("price"), 10);
console.log("this_id" + this_id + "-- " + this_price);
$("#totalprice").val($(this).attr("price"));
$(".protein-option").each(function() {
var loop_id = $(this).attr("label_option");
var loop_price = parseInt($(this).attr("price"), 10);
var difference = loop_price - this_price;
var sign = Math.sign(difference);
difference = Math.abs(difference);
difference = parseFloat(difference).toFixed(2);
if(sign == 0) {
difference = "$0.00";
} else if (sign == 1) {
difference = "+$" + difference;
} else if (sign == -1) {
difference = "-$" + difference;
}
console.log(loop_id + " -- " + loop_price + " -- " + difference + " -- " + sign);
$("#price-difference-for-"+loop_id).html(difference);
});
$("#price-difference-for-"+this_id).html(" ");
});
I put this code after the onclick (I declared my array on the top of the page)
var meal_label_qty = $(this).attr("label_option");
var id_mon_qty = $("#qty1").val();
var id_tues_qty = $("#qty2").val();
var id_wed_qty = $("#qty3").val();
var id_thur_qty = $("#qty4").val();
var id_fri_qty = $("#qty5").val();
//gets meal id and qty
label_options.push(meal_label_qty);
qty_options.push(id_mon_qty,id_tues_qty,id_wed_qty,id_thur_qty,id_fri_qty);
meal_qty.push(label_options,qty_options);
alert(meal_qty);
I get the alerts correct, but how can I make them change depending on the label_option id?
here is how my code looks like
So you may want to store it in an object ( much better then searching an array ) and then restore on every change?
var quantperproduct={};
var meal_label_qty="1011";
$(".protein-option").on("click",function(){
var elements=[1,2,3,4,5].map(el=>$("#qty"+el));
var quantities=elements.map(el=>el.val());
//store them:
quantperproduct[meal_label_qty]=quantities;
//restore the new label ( if possible)
meal_label_qty = $(this).attr("label_option");
elements.forEach((el,i)=>el.val((quantperproduct[meal_label_qty]||[])[i]||0));
});

Change count JavaScript function

Currently, this function seems to count all the way to the higher value. I want it to simply count to the lower value of 30.
This is the script:
$(".circleStatsItemBox").each(function() {
var value = $(this).find(".value > .number").html();
var unit = $(this).find(".value > .unit").html();
var percent = $(this).find("input").val() / 100;
countSpeed = 2300 * percent;
endValue = value;
$(this).find(".count > .unit").html(unit);
$(this).find(".count > .number").countTo({
from: 0,
to: endValue,
speed: countSpeed,
refreshInterval: 50
});
//$(this).find(".count").html(value*percent + unit);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mhuggins/jquery-countTo/master/jquery.countTo.js"></script>
<div class="circleStatsItemBox yellow">
<div class="header">Levels of Interest</div>
<span class="percent">% Increase</span>
<div class="circleStat">
<input value="25" class="whiteCircle" type="text">
</div>
<div class="footer"><span class="count">
<span class="number">30</span>
<span class="unit">Before</span>
</span> <span class="sep"> / </span>
<span class="value">
<span class="number">40</span>
<span class="unit"> During</span>
</span>
</div>
</div>
You need to change a selector in the JavaScript code.
var value = $(this).find(".count > .number").html();
$(".circleStatsItemBox").each(function() {
var value = $(this).find(".count > .number").html();
var unit = $(this).find(".value > .unit").html();
var percent = $(this).find("input").val() / 100;
countSpeed = 2300 * percent;
endValue = value;
$(this).find(".count > .unit").html(unit);
$(this).find(".count > .number").countTo({
from: 0,
to: endValue,
speed: countSpeed,
refreshInterval: 50
});
//$(this).find(".count").html(value*percent + unit);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mhuggins/jquery-countTo/master/jquery.countTo.js"></script>
<div class="circleStatsItemBox yellow">
<div class="header">Levels of Interest</div>
<span class="percent">% Increase</span>
<div class="circleStat">
<input value="25" class="whiteCircle" type="text">
</div>
<div class="footer">
<span class="count">
<span class="number">30</span>
<span class="unit">Before</span>
</span>
<span class="sep"> / </span>
<span class="value">
<span class="number">40</span>
<span class="unit"> During</span>
</span>
</div>
</div>

Categories