We Keep Coding

how to replace a single choice with a select my cart

For now I have a cart in javascript that works
But when I click the add to cart button
there is only one product added
I would like to replace this with a select so that the user can choose the number of articles to add
I tried to modify the code but when I select a quantity and I click on add to cart
It's always two that adds up
var MonPanier = (function() {
panier = [];
function Item(nom, prix, quantite) {
this.nom = nom;
this.prix = prix;
this.quantite = quantite;
}
function savepanier() {
console.log("saving",panier)
// sessionStorage.setItem('MonPanier', JSON.stringify(panier));
}
function loadpanier() {
// panier = JSON.parse(sessionStorage.getItem('MonPanier'));
panier = []
}
// if (sessionStorage.getItem("MonPanier") != null) {
// loadpanier();
// }
//variable objet
var obj = {};
obj.ajouter_produit_dans_panier = function(nom, prix, quantite) {
for (var item in panier) {
if (panier[item].nom === nom) {
//panier[item].quantite ++ ; ancien code
panier[item].quantite;
savepanier();
return;
}
}
var item = new Item(nom, prix, quantite);
panier.push(item);
savepanier();
}
obj.setquantiteForItem = function(nom, quantite) {
for (var i in panier) {
if (panier[i].nom === nom) {
panier[i].quantite = quantite;
break;
}
}
};
obj.enlever_produit_de_panier = function(nom) {
for (var item in panier) {
if (panier[item].nom === nom) {
panier[item].quantite--;
if (panier[item].quantite === 0) {
panier.splice(item, 1);
}
break;
}
}
savepanier();
}
obj.enlever_produit_de_panier_tous = function(nom) {
for (var item in panier) {
if (panier[item].nom === nom) {
panier.splice(item, 1);
break;
}
}
savepanier();
}
obj.clearpanier = function() {
panier = [];
savepanier();
}
obj.totalquantite = function() {
var totalquantite = 0;
for (var item in panier) {
totalquantite += panier[item].quantite;
}
return totalquantite;
}
obj.totalpanier = function() {
var totalpanier = 0;
for (var item in panier) {
totalpanier += panier[item].prix * panier[item].quantite;
}
return Number(totalpanier.toFixed(2));
}
obj.listpanier = function() {
var panierCopy = [];
for (i in panier) {
item = panier[i];
itemCopy = {};
for (p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = Number(item.prix * item.quantite).toFixed(2);
panierCopy.push(itemCopy)
}
return panierCopy;
}
return obj;
})();
$('.ajouter-panier').click(function(event) {
event.preventDefault();
var nom_option = "";
var prix_option = 0;
var nom = $(this).data('nom');
var prix = Number($(this).data('prix')) + prix_option;
var quantite = $(this).data('select');
MonPanier.ajouter_produit_dans_panier(nom, prix, quantite);
//MonPanier.ajouter_produit_dans_panier(nom, prix,1); ancien code
afficherpanier();
});
$('.clear-panier').click(function() {
MonPanier.clearpanier();
afficherpanier();
});
$('.choix_livraison').click(function() {
const cases = document.querySelectorAll('input[name="choix_livraison"]');
for (const x of cases) {
if (x.checked) {
afficherpanier();
}}
});
function afficherpanier() {
var panierArray = MonPanier.listpanier();
var output = "";
var countart=0;
var countart2=0;
var count=0;
for(var i in panierArray) {
output += "<div class='row' style='border-style: ridge; border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
+ "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
+ "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>"
+ "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + " euro</div>"
+ "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
+ "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
+ "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
//+ ' = '
+ "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>"
+ "</div>";
count++;
countart += panierArray[i].quantite; // somme des unités d'articles
countart2 = countart
}
$('.show-panier').html(output);
if (Livraison == 3)
{
// % du prix total total correspondant au prix de la livraison
const cases = document.querySelectorAll('input[name="choix_livraison"]');
//const cases = document.querySelectorAll('input[name="ajout");
for (const x of cases) {
if (x.checked) {
let nom_choix_livraison = x.dataset.nom;
let prix_choix_livraison = x.value;
//console.log(panierArray[i] );
let prix_et_livraison = (( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
document.getElementById('amount').value = prix_et_livraison ;
$('.total-panier').html(prix_et_livraison.toFixed(2));
document.getElementById('livraison-detail').innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;visibility:hidden;'> (" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)</div>";
document.getElementById('remise').innerHTML =MonPanier.totalpanier()*Poucentage_Livraison_opposse ;
document.getElementById('nouveau_prix').innerHTML =(MonPanier.totalpanier()- (MonPanier.totalpanier()*Poucentage_Livraison_opposse));
document.getElementById('frais-fixe').innerHTML =Forfait_Livraison ;
document.getElementById("prix_depart").innerHTML = MonPanier.totalpanier();
document.getElementById("countart_bas").innerHTML = countart;
document.getElementById("countart_haut").innerHTML = countart;
break;
}
}
}
$('.total-panier-modal').html(MonPanier.totalpanier());
$('.total-quantite').html(MonPanier.totalquantite());
if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == false) && (MonPanier.totalquantite() != 0))
{
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
}
else if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == true) && (MonPanier.totalquantite() != 0))
{
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok;
}
else if (Qte_Minimum == 1)
{
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut;
}
else if (Qte_Minimum == 0)
{
document.getElementById('qte_minimum_report').innerHTML = "";
}
}
$('.show-panier').on("click", ".effacer-item", function(event) {
var nom = $(this).data('nom')
MonPanier.enlever_produit_de_panier_tous(nom);
afficherpanier();
})
$('.show-panier').on("click", ".moins-item", function(event) {
var nom = $(this).data('nom')
MonPanier.enlever_produit_de_panier(nom);
afficherpanier();
})
$('.show-panier').on("click", ".plus-item", function(event) {
var nom = $(this).data('nom')
MonPanier.ajouter_produit_dans_panier(nom);
afficherpanier();
})
$('.show-panier').on("change", ".item-quantite", function(event) {
var nom = $(this).data('nom');
var quantite = Number($(this).val());
MonPanier.setquantiteForItem(nom, quantite);
afficherpanier();
});
afficherpanier();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mt-3">
<div class="col-md-4">
<p>Produit 02 (15.00 €)</p>
</div>
<div class="col-md-2">
<select class="form-control" id="02">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="col-md-6 text-end">
<a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">Add to Cart</a>
</div>
</div>

Cannot read property : style of Null

I am working on a Trello Board using Vanilla Javascript and I am receiving an error on making my Cards . I have used Local and Session Storage to store the cards and lists respectively but I can't figure out why this error persists after I click on the Add Card Board Button
function newTask(x){
card_index= parseInt(localStorage.getItem("card_indices")) ;
//card_index = parseInt(sessionStorage.getItem("card_indices"));
list_index = parseInt(sessionStorage.getItem("index"));
document.getElementById('myTasks').innerHTML +=
'<div id = "list_' + list_index + ' " class="list-item animated zoomIn" > <h2 id = "title_' + list_index +'" onClick = "modifyObj.titleEdit('+ list_index +')" class="list-item__h2">'+x+'</h2><span id = "span_del_' + list_index + '" class ="btn title-delete" onClick ="modifyObj.titleDelete(' + list_index + ')">\u00D7</span><hr>'+
'<input id = "card_del_' + card_index + '" type="text" class="myInput" placeholder="Title...">' +
'<div class="btn add-items " id = "div_add_list_" onClick = "myCard.titleForm(' + list_index + ',' + card_index + ')" >Add List Item</div>'
'</div>'
sessionStorage.setItem("index", parseInt(sessionStorage.getItem("index"))+1);
}
var myCard = {
card:function(index, card_index){
var enteredElement = document.getElementById('card_del_' + card_index).value;
var textNode = document.getElementsByClassName('text_' + card_index);
textNode.innerText = enteredElement;
if (enteredElement === ""){
alert("You must write something ");
}
else{
document.getElementById("text_").style.display = "block";
}
},
titleForm: function(index,card_index){
element = document.getElementById('card_del_' + card_index);
text = '<li style="display:none" class="text_'+ card_index +'"> <span class = "btn items" onClick = "myCard.cardClose()">u00D7</span></li>'
element.insertAdjacentHTML('beforeend', text);
myCard.card(index,card_index);
localStorage.setItem("card_indices", parseInt(localStorage.getItem("card_indices"))+1);
// card_index+=1;
}};

Block cut from contextmenu using JavaScript

I need block the option "cut" (only this option) from contextmenu.
I only found how to block all the contextmenu using oncontextmenu="return false" but not a single option.
HTML:
<input id="origenInput" name="origen" list="origen" placeholder="Seleccione origen"
oncontextmenu="return false">
<datalist id="origen">
</datalist>
<input id="destinoInput" name="destino" list="destino" placeholder="Seleccione destino"
disabled>
<datalist id="destino">
</datalist>
<br><br>
<span id="textoPrecio"></span>
<br><br>
JavaScript:
ejecutarMultiplesEventos(document.getElementById("destinoInput"), 'change keyup', mostrarInfoPasaje);
(function cargarListadoOrigen() { let origenOption = "";
let origen = ["Amarillo", "Río Alfa"];
for (let i = 0; i < origen.length; ++i) {
origenOption += '<option value="' + origen[i] + '" />';
}
let origenLista = document.getElementById("origen");
origenLista.innerHTML = origenOption;})();
function cargarListadoDestino() {
document.getElementById("textoPrecio").innerHTML = "";
document.getElementById("destinoInput").value = "";
document.getElementById("destinoInput").disabled = true;
let destinoOption = "";
let destino = null;
let destinoLista = null;
let origenSeleccionado = obtenerOrigenIngresado();
if (origenSeleccionado.length >= 3) {
switch (origenSeleccionado) {
case "Amarillo":
destino = ["Barrio Nuevo"];
for (let i = 0; i < destino.length; ++i) {
destinoOption += '<option value="' + destino[i] + '" />';
}
destinoLista = document.getElementById("destino");
destinoLista.innerHTML = destinoOption;
document.getElementById("destinoInput").disabled = false;
break;
case "Río Alfa":
destino = ["El Valle", "Tucute"];
for (let i = 0; i < destino.length; ++i) {
destinoOption += '<option value="' + destino[i] + '" />';
}
destinoLista = document.getElementById("destino");
destinoLista.innerHTML = destinoOption;
document.getElementById("destinoInput").disabled = false;
break;
default:
document.getElementById("textoPrecio").innerHTML = "El origen ingresado es inválido."
document.getElementById("destinoInput").value = "";
document.getElementById("destinoInput").disabled = true;
break;
}
}}
function mostrarInfoPasaje() {
document.getElementById("textoPrecio").innerHTML = "";
let origenSeleccionado = document.getElementById("origenInput").value;
let destinoSeleccionado = document.getElementById("destinoInput").value;
let texto = "El viaje de " + origenSeleccionado + " a " + destinoSeleccionado + " tiene un costo de $";
let valor = obtenerPrecio();
if (destinoSeleccionado.length >= 3) {
switch (origenSeleccionado) {
case "Amarillo":
if (destinoSeleccionado === "Barrio Nuevo") {
document.getElementById("textoPrecio").innerHTML += texto + valor + ".";
} else if (destinoSeleccionado === "") {
document.getElementById("textoPrecio").innerHTML = "";
} else {
document.getElementById("textoPrecio").innerHTML = "El destino ingresado es inválido."
}
break;
case "Río Alfa":
if (destinoSeleccionado === "El Valle") {
document.getElementById("textoPrecio").innerHTML += texto + valor + ".";
} else if (destinoSeleccionado === "Tucute") {
document.getElementById("textoPrecio").innerHTML += texto + valor + ".";
} else if (destinoSeleccionado === "") {
document.getElementById("textoPrecio").innerHTML = "";
} else {
document.getElementById("textoPrecio").innerHTML = "El destino ingresado es inválido."
}
break;
default:
try {
console.error("mostrarInfoPasaje > default");
} catch (e) {
console.log("Catch: ");
console.log(e);
}
break;
}
}
}
The original problem I want to solve is the following (perhaps there is another easier solution): I have two datalists, the second datalist shows the options depending on what is selected in the first, and according to the combination entered I show a text in a <span>, in case the user selects the text entered in the second datalist and press CTRL + X, the <span> is updated correctly, but if the user selects the text entered in the second datalist, right click and select CUT, the <span> is not updated.

How can I get the value pair of a specific key?

I'm wanting to get the key value pair for a the specific div, and only the div that I click on. Right now it is logging the values for each div. How can I get only the value for the specific div that I am clicking on? I'm wanting to update during an ajax success, but I'm stumped as to how to update only a certain div. Any ideas as to how I can do this?
$('.wrapper').on('click', '.bet-button', function() {
var self = $(this);
var gameId = self.attr('gameid');
var awayVal = $('#' + gameId + ' input[name=betAmountAway]').val();
var homeVal = $('#' + gameId + ' input[name=betAmountHome]').val();
var awayId = $('#' + gameId + ' .bet-input-away').data('away-id');
var homeId = $('#' + gameId + ' .bet-input-home').data('home-id');
var pointTotals = $('#' + gameId + ' .total-points').val();
console.log(pointTotals);
var value = awayVal || homeVal;
var id, value;
if (awayVal) {
id = awayId;
value = awayVal;
}
if (homeVal) {
id = homeId;
value = homeVal;
}
if (!value) {
alert('please enter a value!')
} else {
$.ajax({
url: "---------" + userId + "/"+ gameId +"/"+ id +"/"+ value +"",
type: "get",
success: function(response) {
// Makes the inputs inputable again.
$('.bet-input-home').prop('disabled', false);
$('.bet-input-away').prop('disabled', false);
function update(){
var currentSelection = $('#team-select').val();
getGames().done(function(results){
$.each(results, function (i, gameData){
$.each(gameData, function(key, game){
var gamesHome = game.home_team_conference;
var gamesAway = game.away_team_conference;
if(gamesHome == currentSelection || gamesAway == currentSelection){
var gameId = game.id;
var pointTotal = game.total_points_bet;
var gameTime = game.game_time_hour;
var gameDate = game.game_time_date;
var homeId = game.home_team.id;
var awayId = game.away_team.id;
var homePoints = game.total_points_bet_on_hometeam;
var awayPoints = game.total_points_bet_on_awayteam;
var totalPoints = homePoints + awayPoints;
// $('#point-total').append(homePoints + awayPoints);
}
});
});
})
}
update();
This updates html code that is generated dynamically (or at least it is supposed to)
$('.wrapper').append('\
<div id="'+ gameId +'" class="main-wrapper col-lg-6 col-md-6 col-sm-12">\
<div class="game-cards">\
<div class="chart-container">\
<canvas id="'+ homeTeam +'" width="500" height="500"></canvas>\
</div>\
<div class="right-info">\
<h4>' + awayTeam + '<br>' + " # " + '<br>' + homeTeam +'</h4>\
<h5 id="time-channel">'+ gameDate +' # ' + gameTime + '<br>' + ' On ' + network +'</h5>\
<div class="total-points-live">\
<h5>Total Points Bet</h5>\
<h5 class="total-points" id="point-total">'+ totalPoints +'</h5>\
<p>'+ awayTeam +'</p>\
<input class="bet-input-away" data-away-id="'+ awayId +'" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmountAway" placeholder="Wager Amount">\
<p>'+ homeTeam +'</p>\
<input class="bet-input-home" data-home-id="'+ homeId +'" data-team-type="'+ homeTeam +'" type="number" pattern="[0-9]*" name="betAmountHome" placeholder="Wager Amount">\
<p class="bet-button" gameid="'+ gameId +'">Click To Place Bet</p>\
</div>\
</div>\
</div>\
');

Not work JavaScript function delete

I have the following JavaScript where I get data from a DataBase for my shopping cart. But when I want to delete cart data it does not work my code.
I do not know if I'm getting well into this part of the code
javascript:deleteRow(this).
I leave the complete code of my two functions: listarPedido() and (at the bottom) deleteRow(r).
function listarPedido(){
var articulos = localStorage.getItem("productos");
var productos = articulos.split(";");
var contador = 0;//cuenta numero de articulos en el carrito
for( var i = 0; i < productos.length - 1; i++ ){
var item = productos[i].split(",");
var pedido = "";
for( var j = 0; j < item.length; j++ ){
pedido = '<tr>'+
'<td class="text-center">'+ '<img style="width: 100px; height: 100px" src="' + item[0] + '"/></td>' +
'<td id="celiminar" style="text-align:left;"><b>'+ item[1].toUpperCase() + '<br><br><br><br></b>' +
'<a style="text-decoration:none">Editar</a> | Delete</td>' +
'<td style="text-align:right; color:red"><b>'+ 'S/.'+ item[2] + '</b></td>' +
'<td class="text-center"><b>'
+ '<input type="number" name="txtcant'+i+'" id="txtcant'+i+'" min="1" max="15" value="'+ item[3] +'" class="form-control">' +
'</b></td>'+
'<td style="text-align:right;"><b>'+ 'S/.'+ (item[2]*item[3]).toFixed(2) + '</b></td>';
}
//<i class="fa fa-trash"></i>
$("#detallePedido").append(pedido);
$("#txtcant"+i).change(function(){
resumen();
//al cambiar el numero actualiza el total
$("#detallePedido tr").find("td").eq(4).html('<b>'+ 'S/.'+ (item[2] * $(this).val()).toFixed(2)+ '</b>');
});
contador++;
}
$("#lblnum").text(contador +" ARTÍCULOS");
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById(".table").deleteRow(i);
}

Your code is simply wrong:
document.getElementById(".table").deleteRow(i);
I doubt you have an element with the ID ".table".
Your function, rewritten to get the proper table:
function deleteRow(link) {
var row = link.parentNode.parentNode;
var idx = row.rowIndex;
var table = row.parentNode;
table.deleteRow(idx);
}