如何从起始金额中减去

Question

我是一个编码初学者，我正在打印一个数字(这里是36(，我有4个按钮。按下每个按钮应减去剩余的金额。因此，当我按下"3"按钮时，剩余的金额是33，但在此之后，当我按"4"按钮时显示的值应该是29，但我得到的却是32。

如何使变量mleft的值不会在每次按下按钮时重置为36？

<div class="bt_grp">
<form method="post">
<button value=1 name="pressed">1</button>
<button value=2 name="pressed">2</button>
<button value=3 name="pressed">3</button>
<button value=4 name="pressed">4</button>
</form>
</div>
<?php 
$mleft = 36;
if (isset($_POST['pressed'])) {
echo $_POST['pressed'];
$mleft = $mleft -= $_POST['pressed'] ;

}
?>
<div class="flex-container">
<div id="matchn">
<h3>Matchsticks left</h3>
<h1><?=$mleft?></h1>
</div>
</div>

Answer 1

每次发布表单时，在从中减去之前，都会将$mleft设置为36。

如果希望该值在调用之间保持不变，请使用会话变量并从中减去。

<?php
session_start();
?>
<div class="bt_grp">
<form method="post">
<button value=1 name="pressed">1</button>
<button value=2 name="pressed">2</button>
<button value=3 name="pressed">3</button>
<button value=4 name="pressed">4</button>
</form>
</div>
<?php 
$mleft = $_SESSION['mleft'] ?? 36;
if (isset($_POST['pressed'])) {
echo $_POST['pressed'];
$mleft -= $_POST['pressed'] ;
}
$_SESSION['mleft'] = $mleft;
?>
<div class="flex-container">
<div id="matchn">
<h3>Matchsticks left</h3>
<h1><?=$mleft?></h1>
</div>
</div>

Answer 2

现在，在每次刷新页面时，您都会声明$mleft = 36;，在按下第二个按钮后，这个变量不是29，而是33。要修复它，您可以设置$_SESSION变量，例如：

session_start(); // To set session variables tou must start it
if (!isset($_SESSION['mleft'])) { // Check if mleft exists, because setting up every 
$_SESSION['mleft'] = 36;      // every page refresh will not 
}                                 // substract from variable

if (isset($_POST['pressed'])) {
echo $_POST['pressed'];
$_SESSION['mleft'] = $_SESSION['mleft'] -= $_POST['pressed'] ;  // Substract

}

Answer 3

这只是一个友好的建议，你可能会更好地用javascript这样做…

let counterContainer = document.querySelector('h1');
let matchSticksLeft = parseInt(counterContainer.innerText);
function subtract(amount){
counterContainer.innerText = matchSticksLeft -= amount;
}

<div class="bt_grp">
<button value=1 name="pressed" onclick="subtract(1)">1</button>
<button value=2 name="pressed" onclick="subtract(2)">2</button>
<button value=3 name="pressed" onclick="subtract(3)">3</button>
<button value=4 name="pressed" onclick="subtract(4)">4</button>
</div>
<div class="flex-container">
<div id="matchn">
<h3>Matchsticks left</h3>
<h1>36</h1>
</div>
</div>