My selected button does not work on mobile

Hello everyone

I’ve been struggling with my cart in javascript for days again
I just need a detail for the finalization
I am facing a small problem

My shopping cart in javascript works fine on pc

When I click in the select the item number changes to 1 and when I choose a quantity the data-qty takes the value of the value element so it behaves as it should

this is correct

but on my smartphone it does not work properly

When I click in the select the number of article goes to 1
When I choose a quantity the data-qte does NOT take the value of the element value

so I would like that when I click in the select to choose a quantity that it does not indicate 1 but takes the value of the value element

here is a link to an example

https://phil.pecheperle.be/panier/index1.php

So I searched my code to find out where and how it happened.

so I have the html part which allows to select the select

<select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1"   data-checkbox="2001"  >
                  <option selected value="0">0 sachet dans le panier </option>
                  <option value="1"> sachet dans le panier</option>
                  <option value="1">1 sachet dans le panier</option>
            <option value="2">2 sachets dans le panier</option>
                  <option value="3">3 sachets dans le panier</option>
                  <option value="4">4 sachets dans le panier</option>
                  <option value="5">5 sachets dans le panier</option>
                                </select>

what makes me miserable is this data-qte=“1” that I put at data-qte=“0” but that hasn’t changed anything

when clicking in the select this function is called and therefore uses the data-qte

$('.ajouter-panier').click(function(event) {
event.preventDefault();
//on mets des variables a 0
var nom_option = "";
var prix_option = 0;
var option_checkbox = $(this).data('checkbox');
//on regarde si le select est choisi
if ($(this).data('select'))
{
var nom = $(this).data('nom') + " (" + document.getElementById(""+$(this).data('select')+"").value + ")" + nom_option;
}
else var nom = $(this).data('nom');
var prix = Number($(this).data('prix')) + (prix_option);
//on test la date-qte partie qui m intéresse
if ($(this).attr('data-qte'))
{
var qte_option = $(this).attr('data-qte');
MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option);
}
else MonPanier.ajouter_produit_dans_panier(nom, prix, 1);
afficherpanier();
});
$('.clear-panier').click(function(){
MonPanier.clearpanier();
afficherpanier();
});

at this time the console shows me 1
I would like it to be the value element that is taken into account and therefore displays nothing since I haven’t made a choice yet

then I choose the quantity with the select value
at this time on my pc the data-qte value takes the value of the element.value

However on my smartphone it does not happen

and the code is as follows

function changeQte(element){
//on traite la variable qte
var qte = element.value;
var t = $(element);
var label = t.attr("aria-label");
let data_qte = document.querySelector("[data-nom='"+ label +"']");
data_qte.removeAttribute("data-qte");
data_qte.setAttribute("data-qte", ""+qte+"");
//on affiche le pop up
let m;
m = "\ Le panier compte désormais ";
m += "<font color='red'><strong>";
m += event.target.getAttribute("data-qte");
m += "</strong></font>";
m += " sachet(s) de l'article \'";
m += event.target.getAttribute("data-nom");
//m += "\" a bien été ajouté au panier";
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
let e = document.createElement('div');
let s = "";
e.classList.add("maJolieAlert");
s += '<div><p>' + m + '</p>';
s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
e.innerHTML = s;
insertAfter(e, event.target);
}
function fermeMaJolieAlert(event) {
event.target.parentNode.parentNode.remove();
}

Welcome to the forums @flexi2202

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the block of code.

I have done it for you this time.
[/off-topic]

Ah ok I tried but without success

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.