更改小数价格 Javascript

Question

我正在为我的学徒期做一个糖果店项目，我做了一些测试运行，让我的所有代码都能正常工作，但后来我得到了我的简报，价格根据重量而变化，并且有小数价格而不是整个 E.G £0.0.1 我认为这不会有什么不同，但我不确定是什么阻止了加号和减号按钮更改小数价格。

<?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>

我只是想知道我做错了什么？我已经尝试将我的 parseInt 更改为 ParseDouble，但根本没有任何变化。

Answer 1

你快到了。 parseFloat 正是您所需要的。没有 ParseDouble 或 parseDouble 这样的功能，所以这可能会在您的浏览器控制台中产生错误（您没有说您是否检查过这些功能）。

我还添加了一些对 .toFixed 的调用，这样您就不会得到大的尾随小数位，但您可以根据需要的精度/舍入级别进行调整。

现场演示：

var weight = 5.2;
var price = 3.5;

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 = 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 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()
{
  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>

更改小数价格 Javascript

Changing decimal prices Javascript

javascript

php

decimal