Develop Reference

how to save the data and the rows in a table with localStorage in html

What i want to save the rows with the data of this code, i know u can use localStorage but i can't figure out how to do it.do i need to add another button to save the data or can i make it to save when i click "save" button or automatically.
this code has some bugs, like if u try to add the same pic twice it won't work.
it has to be a bit cleaned of but i will fix them later
var r = 1;
var nrr = 1;
var img = 0;
var y;
var nr;
var z;
var i;
var image;
var imgUrl;
var x = document.getElementById("myTable").insertRow(r);
function fileChange(event) {
imgUrl = URL.createObjectURL(event.target.files[0]);
}
var loadFile = function (event) {
image = document.getElementById(di);
image.src = imgUrl;
}
function insRow(id) {
//if (imgUrl !== undefined && document.getElementById("Kodi").value !== "" && document.getElementById("Kodi").value !== "") {
r += 1;
x = document.getElementById(id).insertRow(r);
nr = x.insertCell(0);
y = x.insertCell(1);
z = x.insertCell(2);
i = x.insertCell(3);
y.width = 200;
z.width = 200;
i.width = 100;
nr.width = 50;
z.height = 240;
i.height = 240;
nr.height = 240;
nr.style = "text-align : center;font-size : 20px;";
z.class = "z";
i.class = "i";
nrr += 1;
nr.innerHTML = nrr - 1;
y.append = "img";
x.id = "r" + nrr;
var di = "y" + nrr;
y.innerHTML = "<img id=y1 src=''>";
z.innerHTML = "<p id='zp'></p>"
i.innerHTML = "<p id='ip'></p>"
document.getElementById("y1").id = di;
document.getElementById(di).src = imgUrl;
document.getElementById(di).class = "yy";
imgUrl = undefined;
document.getElementById(di).title = "";
document.getElementById("zp").innerHTML = document.getElementById("Kodi").value;
document.getElementById("ip").innerHTML = document.getElementById("sh").value;
document.getElementById("sh").value = "";
document.getElementById("Kodi").value = "";
// }
}
function delRow() {
if (r != 0) {
document.getElementById("myTable").deleteRow(-1);
r -= 1;
nrr -= 1;
}
}
function save() {
document.getElementById('y1').src = imgUrl;
}
.file {
height: 100px;
}
p {
text-align: top-left;
padding-left: 10px;
font-size: 25px;
}
.kodii {
width: 185px;
}
.shh {
width: 90px;
}
.delete {
position: absolute;
left: 550px;
}
#myTable {
width: 523px;
height: 60px;
}
img {
max-height: 300px;
max-width: 200px;
}
.save {
position: absolute;
left: 500px;
}
div {
width: 700px;
height: 1000px;
overflow-y: auto;
}
<input type="file" accept="image/*" name="image" style="color:transparent; width:90px;" title=""
onchange="fileChange(event)"><label for="price">Kodi:</label>
<input type="label" maxlength="25" id="Kodi" value=""
onchange="if (this.value == '') {border-color: red;}else{border-color : green};" class="kodii" name="price">
<label for="desc">Shtesë:</label>
<input type="text" maxlength="12" id="sh" class="shh" value="" name="desc">
<button type="button" class="save" onclick="insRow('myTable'); loadFile(event)">Save</button>
<input type="button" class="delete" onclick="delRow('myTable')" value="Delete row"></br></br></br></br></br></br>
<div>
<table border="1" class="tablee" style="height: 20px;" id="myTable">
<th width="50px">Nr</th>
<th width="200px" border="2">Image</th>
<th width="200px">Kodi</th>
<th width="100px">Shtesë</th></br>
</table>
</div>

Find the smallest common multiple

well i hope you can understand me. I want to get the the smallest common multiple between the range of number i give to the function, for example if i put looker(1,3) the function will look for the smallest common multiple in 1,2,3 that's the range, and the answer it's 6, i dunno if get it.
this is a challenge from freecodecamp, the problem it's that when i run function with the with the range (1,3) it works, (1,5) it works, but with other ranges the google console says "rende process gone".
const looker = (arra) => {
var nume = [];
var status = "no";
var statusN = 0;
var array = [];
var mul = [];
var contador = arra[1];
var aumentador = 2;
while(contador > arra[0] - 1) {
array.push(contador);
mul.push(contador);
nume.push(contador);
contador--;
}
// console.log(nume);
// console.log(array);
// console.log(mul);
// console.log(contador);
while(contador != arra[1]) {
for(let x of nume) {
array.push(x*aumentador);
mul.push(x*aumentador);
}
aumentador++;
for(let a of mul) {
for(let i of array) {
if(a == i) {
contador++;
}
}
if(contador == arra[1]) {
status = "si"
statusN = a;
break;
} else {
status = "no";
contador = 0;
}
}
}
if(status == "si") {
console.log(`el numero que se repite es ${statusN}`);
} else {
console.log(`ningun numero se repite ${arra[1]} veces`);
}
}

I think you want something like this ..
function findGCD() {
if($("#first").val() != null && $("#second").val() != null ){
let fn = parseInt($("#first").val());
let sn = parseInt($("#second").val());
let gcd = lcm_two_numbers(fn, sn);
$("#answer").html("Smallest common multiple : " + gcd)
}
}
function lcm_two_numbers(x, y) {
if ((typeof x !== 'number') || (typeof y !== 'number'))
return false;
return (!x || !y) ? 0 : Math.abs((x * y) / gcd_two_numbers(x, y));
}
function gcd_two_numbers(x, y) {
x = Math.abs(x);
y = Math.abs(y);
while(y) {
var t = y;
y = x % y;
x = t;
}
return x;
}
button {
background: #0095ff;
padding: 8px;
border-radius: 3px;
border: none;
color: white;
width: 80px;
margin-left: 20px;
cursor: pointer;
}
p {
font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="first">First number:</label>
<input type="number" id="first" name="first" min="1" max="5">
<label for="second">Second number:</label>
<input type="number" id="second" name="second" min="1" max="5">
<button onclick="findGCD()">GCD</button>
<p id="answer"></p>

JS lotto simulator - how to display the established amount of numbers [duplicate]

This question already has an answer here:
How can I display all guessed numbers in this lottery function?
(1 answer)
Closed 3 years ago.
I've created simple lotto simulator and I want to set it to display numbers only when particular conditions are made. Let's say, to display numbers at least two or more must be covered (chosen and rolled) I'm the beginner so apologizes for any obvious mistakes, I'm still learning.
var attempt = 0;
function losowanie1() {
var available = 6;
var guessed = new Array();
r = new Array(available);
var xd0 = document.getElementById("pole1").value
var xd1 = document.getElementById("pole2").value
var xd2 = document.getElementById("pole3").value
var xd3 = document.getElementById("pole4").value
var xd4 = document.getElementById("pole5").value
var xd5 = document.getElementById("pole6").value
y = new Array(6)
y[0] = xd0
y[1] = xd1
y[2] = xd2
y[3] = xd3
y[4] = xd4
y[5] = xd5
z = new Array(6)
for (var i = 0; i <= available - 1; i++) {
r[i] = Math.floor((Math.random() * (49 - 1)) + 1);
if ((y[i] == r[0]) || (y[i] == r[1]) || (y[i] == r[2]) || (y[i] == r[3]) || (y[i] == r[4]) || (y[i] == r[5])) {
guessed.push(y[i]);
}
}
atempt++
document.getElementById("wysw").innerHTML = r;
document.getElementById("zatw").innerHTML = guessed;
document.getElementById("zatw2").innerHTML = attempt;
}
#wysw {
color: yellow;
background-color: black;
height: 200px;
text-align: center;
font-size: 40px;
}
}
#zatw {
margin-top: 40px;
height: 200px;
background-color: pink;
text-align: center;
}
#dupa {
height: 200px;
background-color: brown;
text-align: center
}
#tak {
width: 200px;
height: 100px;
text-align: center;
margin-left: 850px;
}
#zatw2 {
margin-top: 40px;
height: 200px;
background-color: orange;
text-align: center;
}
<main>
<div id="main">
<h1>Totolotek</h1>
<div id="blokada">
<br>
<div id="wysw"></div>
<div id="dupa">
<input type="text" id="pole1" /><input type="text" id="pole2" /><input type="text" id="pole3" /><input type="text" id="pole4" /><input type="text" id="pole5" /><input type="text" id="pole6" />
<input type="reset" id="tak" value="zatwierdz" onclick="losowanie1();" />
<div id="zatw"></div>
<div id="zatw2"></div>
</div>
</div>
</div>
</main>

Here's a JSFiddle - I just sort of guessed at what you're doing.
You had a typo: atempt++.
It seems to work after fixing that.
var attempt = 0;
function losowanie1() {
var available = 6;
var guessed = new Array();
r = new Array(available);
var xd0 = document.getElementById("pole1").value
var xd1 = document.getElementById("pole2").value
var xd2 = document.getElementById("pole3").value
var xd3 = document.getElementById("pole4").value
var xd4 = document.getElementById("pole5").value
var xd5 = document.getElementById("pole6").value
y = new Array(6)
y[0] = xd0
y[1] = xd1
y[2] = xd2
y[3] = xd3
y[4] = xd4
y[5] = xd5
z = new Array(6)
for (var i = 0; i <= available - 1; i++) {
r[i] = Math.floor((Math.random() * (49 - 1)) + 1);
if ((y[i] == r[0]) || (y[i] == r[1]) || (y[i] == r[2]) || (y[i] == r[3]) || (y[i] == r[4]) || (y[i] == r[5])) {
guessed.push(y[i]);
}
}
attempt++
document.getElementById("wysw").innerHTML = r;
document.getElementById("zatw").innerHTML = guessed;
document.getElementById("zatw2").innerHTML = attempt;
}

Filter element if checkboxes are check or not JavaScript

I got a problem with my code. I coded a search bar which filter checkboxes by their name and I coded a function which only display the checkboxes selected. But there is a conflict.
Everytime I click on "Selected" everything is passing to a display : none;
So I tried to wrap my search bar into some div but it's not working as I imagined. I know that .parent() is the problem because it impacts the parent of my search bar, but I need it to hide the elements not selected so I don't succeed in solving it.
Here is the snippet to understand what I mean. Update it in your answer to let me see what was wrong.
Hope you guys will be able to help me.
function All() {
$("input").parent().show();
}
function OnlySelecteds() {
$("input:not(:checked)").parent().hide();
}
//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "June";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";
var target = new Array()
target[0] = "9";
target[1] = "8";
target[2] = "11";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
var t = document.getElementById('t');
// the loop is creating the checkboxes with name, value...
for (var i in choices) {
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of choices[i]
var cb = document.createElement('input');
var label = document.createElement("label");
cap = choices[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
cb.addEventListener('click', updateText)
if (target.indexOf(i) >= 0) {
cb.checked = true;
}
}
updateText();
function updateText() {
t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '')
}
function updateCheckboxes(x) {
if ($('#SearchBar').val() == '') {
$('#checkboxes > label').show();
} else {
$('#checkboxes > label').hide();
$('#checkboxes > label:contains(' + $('#SearchBar').val() + ')').show();
}
}
* {
box-sizing: border-box;
}
#data {
padding: 5px;
width: 100vw;
}
.multiselect {
overflow: visible;
padding: 0;
padding-left: 1px;
border: none;
width: 100vw;
white-space: normal;
height: 75px;
}
.checkboxes {
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
margin-left: -1px;
display: inline-block;
}
label {
display: inline-block;
border: 1px grey solid;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<span onclick="All()">All</span> | <span onclick="OnlySelecteds()">Selected</span> | <input id="SearchBar" placeholder="Search for options.." type="text" oninput="updateCheckboxes(this)" autocomplete="off">
<form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes">
</div>
</div>
</div>
</div>
</form>
<textarea id="t" style="display: none;"></textarea>

rather than only hide all your unchecked input, I would prefer to show all input first. that way, even after I searched something, then if I click "selected", it would still show all the selected input
function OnlySelecteds() {
$("input").parent().show();
$("input:not(:checked)").parent('label').hide();
}
demo : https://jsfiddle.net/Lzw1xg2n/1/

Change the function OnlySelecteds() to this:
function OnlySelecteds() {
$("input").closest('label').show();
$("input:not(:checked)").closest('label').hide();
}
function All() {
$("input").parent().show();
}
function OnlySelecteds() {
$("input").closest('label').show();
$("input:not(:checked)").closest('label').hide();
}
//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "June";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";
var target = new Array()
target[0] = "9";
target[1] = "8";
target[2] = "11";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
var t = document.getElementById('t');
// the loop is creating the checkboxes with name, value...
for (var i in choices) {
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of choices[i]
var cb = document.createElement('input');
var label = document.createElement("label");
cap = choices[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
cb.addEventListener('click', updateText)
if (target.indexOf(i) >= 0) {
cb.checked = true;
}
}
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
updateText();
function updateText() {
t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '')
}
function updateCheckboxes(x) {
if ($('#SearchBar').val() == '') {
$('#checkboxes > label').show();
} else {
$('#checkboxes > label').hide();
$('#checkboxes > label:contains(' + $('#SearchBar').val() + ')').show();
}
}
* {
box-sizing: border-box;
}
#data {
padding: 5px;
width: 100vw;
}
.multiselect {
overflow: visible;
padding: 0;
padding-left: 1px;
border: none;
width: 100vw;
white-space: normal;
height: 75px;
}
.checkboxes {
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
margin-left: -1px;
display: inline-block;
}
label {
display: inline-block;
border: 1px grey solid;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<span onclick="All()">All</span> | <span onclick="OnlySelecteds()">Selected</span> | <input id="SearchBar" placeholder="Search for options.." type="text" oninput="updateCheckboxes(this)" autocomplete="off">
<form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes">
</div>
</div>
</div>
</div>
</form>
<textarea id="t" style="display: none;"></textarea>

Javascript calculate function not calculating

I have recently been working on a project that has resulted in countless hours of frustration. The task is to create a Webpage that calculates a user's total cost depending on the different radio buttons / check boxes they select.
So, assuming all my other functions and constants are correct, is there anything wrong with my function or the calling of my function.
HTML
<input type = "button" value = "Submit" onclick="calculate();">
<table>
<tr><td>Workshop Total:</td> <td><div id="divWorkshopTotal"></div></td></tr>
<tr><td>Lodging Total:</td> <td><div id="divLodgingTotal"></div></td></tr>
<tr><td>Discount Amount:</td> <td><div id="divDiscount"></div></td></tr>
<tr><td>Sales Tax Amount:</td> <td><div id="divSalesTaxAmount"></div></td></tr>
<tr><td>Total Due:</td> <td><div id="divTotal"></div></td></tr>
</table>
JavaScript
function $(elementName){
return document.getElementById(elementName);
}
function calculate(){
clearOutput();
if (checkWorkshopSelected() > 3){
$("divWorkshopError").innerHTML = "* Selected workshops exceeds maximum of " + MAXIMUM_WORKSHOPS_SELECTED;
return;
} else if (checkWorkshopSelected() == 0){
$("divWorkshopError").innerHTML = "* No workshop(s) selected";
return;
}
var workshopCost = calculateWorkshopTotalCost();
var lodgingCost = calculateLodgingCost();
var subtotal = workshopCost + lodgingCost;
var discountRate = calculateDiscountRate();
var discountAmount = subtotal * discountRate;
if ($("chkTaxExempt").checked == false){
var salesTaxAmount = (subtotal - discountAmount) * SALES_TAX_RATE;
}
var totalCost = subtotal - discountAmount + salesTaxAmount;
$("divWorkshopTotal").innerHTML = workshopCost;
$("divLodgingTotal").innerHTML = lodgingCost;
$("divDiscount").innerHTML = discountAmount;
$("divSalesTaxAmount").innerHTML = salesTaxAmount;
$("divTotal").innerHTML = totalCost;
}

Please check out the code and only ask small doubts in comments. Otherwise please make a new question.
var SALES_TAX_RATE = 0.1,
MAXIMUM_WORKSHOPS_SELECTED = 3;
var data = {
productA: 10,
productB: 20,
productC: 25,
};
var prod = document.getElementsByClassName('prod'),
tax = $("tax"),
workshopTotal = $("workshopTotal"),
lodgingTotal = $("lodgingTotal"),
discount = $("discount"),
salesTaxAmount = $("salesTaxAmount"),
total = $("total"),
workshopError = $("workshopError"),
out = document.getElementsByClassName('out');
$("inputButton").addEventListener("click", calculate);
clearOutput();
function $(elementName){
return document.getElementById(elementName);
}
function calculate () {
clearOutput();
if (checkWorkshopSelected() >= MAXIMUM_WORKSHOPS_SELECTED) {
workshopError.innerHTML = "* Selected workshops exceeds maximum of " + MAXIMUM_WORKSHOPS_SELECTED;
return;
} else if (checkWorkshopSelected() == 0) {
workshopError.innerHTML = "* No workshop(s) selected";
return;
}
var workshopCost = calculateWorkshopTotalCost();
var lodgingCost = calculateLodgingCost();
var subtotal = workshopCost + lodgingCost;
var discountRate = calculateDiscountRate();
var discountAmount = subtotal * discountRate;
var salesTax = 0;
if (tax.checked == false){
salesTax = (subtotal - discountAmount) * SALES_TAX_RATE;
}
var totalCost = subtotal - discountAmount + salesTax;
outputPrice(workshopTotal, workshopCost);
outputPrice(lodgingTotal, lodgingCost);
outputPrice(discount, discountAmount);
outputPrice(salesTaxAmount, salesTax);
outputPrice(total, totalCost);
}
function clearOutput () {
for (var i=0; i<out.length; i++) {
var o = out[i];
o.innerHTML = "0,00"
}
workshopError.innerHTML = "";
}
function checkWorkshopSelected () {
var s = 0;
for (var i=0; i<prod.length; i++) {
var p = prod[i];
if (p.checked) s += 1;
}
return s;
}
function calculateLodgingCost () {
return 5;
}
function calculateWorkshopTotalCost () {
var t = 0;
for (var i=0; i<prod.length; i++) {
var p = prod[i];
if (p.checked) t += data[p.id];
}
return t;
}
function calculateDiscountRate () {
return 0.05;
}
function outputPrice (e, p) {
e.innerHTML = p.toFixed(2);
}
p {
line-height: 14px;
width: 200px;
}
#inputButton {
height: 32px;
margin-bottom: 10px;
}
#workshopError {
color: red;
float: right;
margin-bottom: 20px;
}
.prod + label {
font-weight: bold;
}
.out {
display: inline-block;
padding: 4px 12px;
margin: -6px 0;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
font-family: monospace;
float: right;
}
.out:before {
content: "$";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p><input type="checkbox" id="productA" class="prod"><label>Workshop A - 10</label></p>
<p><input type="checkbox" id="productB" class="prod"><label>Workshop B - 20</label></p>
<p><input type="checkbox" id="productC" class="prod"><label>Workshop C - 25</label></p>
<p><input type="checkbox" id="tax"><label>Tax 10%</label></p>
<p><input id="inputButton" type="button" value="Submit"><label id="workshopError"></label></p>
<p><label>Workshop Total:</label><span class="out" id="workshopTotal"></span></p>
<p><label>Lodging Total:</label><span class="out" id="lodgingTotal"></span></p>
<p><label>Discount Amount:</label><span class="out" id="discount"></span></p>
<p><label>Sales Tax Amount:</label><span class="out" id="salesTaxAmount"></span></p>
<p><label>Total Due:</label><span class="out" id="total"></span></p>
</body>
</html>