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
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>
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>
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)
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));
});
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>