I'm trying to learn JavaScript and I would like to create a little calculator COC site. I would know if it's possible to edit a PHP variable in Javascript ?
Here is my HTML/PHP code:
In this part, in the "HDV" div, I just put 10 buttons, when I click on one, go on my JS function who display the second div named "niv caserne" and in this second div, I would change the value of the variable "$i" which is located in the for in the PHP in my JS function. For example, if I click on the button 1, my JS function will display my div "niv caserne" and the FOR go from 1 to 1, but if I click on the button 2, my JS function displays my div "niv caserne" too but the FOR go from 1 to 2, etc..
<body>
<!-- Page Content -->
<div id="container">
<div id="HDV">
<p>Hotel De Ville:
<?php
for ($i=1; $i <= 10 ; $i++)
{
?>
<button type="button" class="btn btn-default" value="<?php echo "HDV_$i" ?>" onclick="infosHDV(<?php echo $i ?>)"><?php echo $i ?></button>
<?php
}
?>
</p>
</div>
<!-- HIDE ALL OF THIS OR DISABLE BEFORE USER CHOOSE A TOWN
WHEN HE CHOOSE A TOWN, CALCULATE AND DISPLAY ONLY THE RIGHT INFORMATION -->
<div id="niv caserne" style="display:none">
<p>Niveau des casernes:
<?php
for ($i=1; $i <= 4 ; $i++)
{
?>
<div class="col-md-1">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<?php
}
?>
</p>
</div>
Here is my JS function:
<script>
function infosHDV(nivHDV)
{
switch (nivHDV)
{
case 1:
if(document.getElementById('niv caserne').style.display=='block')
{
document.getElementById('niv caserne').style.display='none';
//Change the value of the "$i" in the FOR --> 1 from 1
}
else
{
document.getElementById('niv caserne').style.display='block';
}
break;
case 2:
if(document.getElementById('niv caserne').style.display=='block')
{
document.getElementById('niv caserne').style.display='none';
//Change the value of the "$i" in the FOR --> 1 from 2
}
else
{
document.getElementById('niv caserne').style.display='block';
}
break;
case 3:
...
break;
}
}
</script>