更改十进制价格 Javascript

Question

Im making a sweetshop project for my apprenticeship and ive done some test runs and have got all my code working but then i get my brief and the prices are changed depending on the weight and have got decimal prices instead of whole EG £0.0.1 i thought this wouldnt make a difference but im not sure whats stopping the plus and minus button from changing the decimal price.

<?php
foreach ($result as $key => $value) { ?>
    <div class="col-md-4 inner-container">
        <div class="card border">

      <div class="column-image" style=" background-image: url(<?php echo ($value['image']); ?>" >
   </div>
            <h2><?= $value['sweet_name'] ;?></h2><br/>

            <p>Price: £<?= $value['price'] ; ?></p>

        <p>Weight: <?= $value['weight'] ; ?>g</p>


    £<span id="prices"><?php echo ( $value['price'] );  ?></span><br/>

    <span id="weight"><?php echo ( $value['weight'] );  ?></span> g<br/>

    <button onclick="minus()"> - </button><span id="quantity"> 1 </span><button onclick="plus()"> + </button><br/>  

    <!-- runs the function addcookie in javascript and passes paramater id  -->
   <a href="/basket.php"><button class="column-button" onclick="addcookie(<?php echo  $value['id']; ?>)">Add to basket</button></a>

    </div>
<?php } ?>



<script>
    // these varibles are to not get [object HTMLSpanElement] 
    var weight = <?php echo ( $value['weight'] );  ?>;
    var price = <?php echo $value['price']; ?>; 
function addcookie(id){

    // element can be anything in HTML
    // innerHTML gets anything inside the html tags E.G quantity = 1

var quantity = document.getElementById('quantity').innerHTML; 



var id = <?php echo $value['id']; ?>;

// creates the cookie with a key and a value and also creates a path to be stored 
// this means i can access it on any page E.G basket.php

    document.cookie = "zzz_"+id+"_id="+id+"; ;path=/";
    document.cookie = "zzz_"+id+"_quantity="+quantity+"; ;path=/";
    document.cookie = "zzz_"+id+"_weight="+weight+"; ;path=/";
}
function plus(){

    // parseint changes strings into intergers 

    document.getElementById('quantity').innerHTML = parseInt( document.getElementById('quantity').innerHTML) +1;

    document.getElementById('prices').innerHTML = parseInt( document.getElementById('prices').innerHTML) +price;


    document.getElementById('weight').innerHTML = parseInt( document.getElementById('weight').innerHTML) +weight;

}
function minus(){

    if (document.getElementById('quantity').innerHTML > 1){
    document.getElementById('quantity').innerHTML = parseInt( document.getElementById('quantity').innerHTML) -1;


    document.getElementById('prices').innerHTML = parseInt( document.getElementById('prices').innerHTML) -price;

    

    document.getElementById('weight').innerHTML = parseInt( document.getElementById('weight').innerHTML) -weight;

}
}

</script>

i'm just wondering what i'm doing wrong? i've tried changing my parseInt to a ParseDouble but there was no change at all.

Answer 1

You're nearly there. parseFloat is what you need. There's no such function as ParseDouble or parseDouble , so that was probably producing errors in your browser's Console (you didn't say whether you'd checked for those or not).

I've also added some calls to .toFixed so you don't end up with large trailing decimal places, but you can adjust that according to the level of accuracy / rounding you need.

Live demo:

 var weight = 5.2; var price = 3.5; function addcookie(id) { // element can be anything in HTML // innerHTML gets anything inside the html tags EG quantity = 1 var quantity = document.getElementById('quantity').innerHTML; var id = 22; // creates the cookie with a key and a value and also creates a path to be stored // this means i can access it on any page EG basket.php //document.cookie = "zzz_" + id + "_id=" + id + "; ;path=/"; //document.cookie = "zzz_" + id + "_quantity=" + quantity + "; ;path=/"; //document.cookie = "zzz_" + id + "_weight=" + weight + "; ;path=/"; } function plus() { document.getElementById('quantity').innerHTML = parseInt(document.getElementById('quantity').innerHTML) + 1; document.getElementById('prices').innerHTML = (parseFloat(document.getElementById('prices').innerHTML) + price).toFixed(2); document.getElementById('weight').innerHTML = (parseFloat(document.getElementById('weight').innerHTML) + weight).toFixed(2); } function minus() { if (parseInt(document.getElementById('quantity').innerHTML) > 1) { document.getElementById('quantity').innerHTML = parseInt(document.getElementById('quantity').innerHTML) - 1; document.getElementById('prices').innerHTML = ( parseFloat(document.getElementById('prices').innerHTML) - price).toFixed(2); document.getElementById('weight').innerHTML = ( parseFloat(document.getElementById('weight').innerHTML) - weight).toFixed(2); } }

 <div class="col-md-4 inner-container"> <div class="card border"> <div class="column-image" style=" background-image: url(<?php echo ($value['image']); ?>"> </div> <h2> Something </h2><br/> <p>Price: £ 3.5 </p> <p>Weight: 5.2g </p> £<span id="prices">3.5</span><br/> <span id="weight">5.2</span> g<br/> <button onclick="minus()"> - </button><span id="quantity"> 1 </span><button onclick="plus()"> + </button><br/> <!-- runs the function addcookie in javascript and passes paramater id --> <a href="/basket.php"><button class="column-button" onclick="addcookie(<?php echo $value['id']; ?>)">Add to basket</button></a> </div>