0

I wrote below code by php In this code I want to calculate water bill

but when I press the button, the result does not show where is proplem. Knowing I want to use the value that the user enters.

<!DOCTYPE html>
<html>
<body>

<form>

القيمة: <input type="text" name="cal"><br>

<button onclick="myFunction("cal")">إحسب التكلفة</button>
</form>

<script>

function myFunction($x) {
$x=$x%1000;

if($x<=15){
$x=$x*0.10;
 return $x;}

elseif($x>=16&&$x<=30){
$x=$x*1.00;
 return $x;}

elseif($x>=31&&$x<=45){
$x=$x*3.00;
 return $x;}

elseif($x>=46&&$x<=60){
$x=$x*4.00;
 return $x;}

else{
$x=$x*6.00;
 return $x;}

}
</script>
</body>
</html>
user6159635
  • 5
  • 3
  • 1.You are doing operations on a hardcoded string 2.insted of a value return the results into a div – Mihai Apr 05 '16 at 06:57

3 Answers3

0

Another way to achieve this is add onClick event to your button and call function.

Example.

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
Govind Prajapati
  • 957
  • 7
  • 24
0

First of all there is no elseif operator in javascript. You should use else if. Also you need to get value from the input and pass it to the myFunction. I modified your sample, check this plunker

Alexander Popov
  • 836
  • 5
  • 18
0

Please try below script . The issue is you using elseif instead if else if and also you are calling the function wrong. I have added a id to the input field. Please check

    <!DOCTYPE html>
    <html>
    <body>

    <form>

        <input type="text" name="cal" id="cal"><br>

        <button type=button onclick="document.getElementById('data').innerHTML = myFunction(document.getElementById('cal').value)">إحسب التكلفة</button>
<hr>
Result:<span id="data"></span>
    </form>

    <script>

        function myFunction($x) {
            $x = $x % 1000;

            if ($x <= 15) {
                $x = $x * 0.10;
                return $x;
            }

            else if ($x >= 16 && $x <= 30) {
                $x = $x * 1.00;
                return $x;
            }

            else if ($x >= 31 && $x <= 45) {
                $x = $x * 3.00;
                return $x;
            }

            else if ($x >= 46 && $x <= 60) {
                $x = $x * 4.00;
                return $x;
            }

            else {
                $x = $x * 6.00;
                return $x;
            }

        }
    </script>
Ajay
  • 235
  • 2
  • 8