CODEWITHSUNDEEP
javascripthtmlcss
Brady Clark-Doherty
Brady Clark-Doherty

Reputation: 3

Some buttons work multiple times, some buttons don't work multiple times

So a friend and I are building a simple little formula calculator for my website and we are running into a bit of an issue. I would like all the buttons on the webpage to run multiple times without needing to refresh the page. As it stands all the buttons work once but only the Fahrenheit and Celsius buttons work multiple times. I see absolutely no reason why those buttons work repeatedly but the others do not. Here is the code for the page.

<!Doctype html>
<html>
<head>

<title>Calculator</title>
<link rel="stylesheet" href="stylesheet1.css">
<script>

function percent()      {
    numer = prompt("What is the numerator?","<Enter numerator value>");
    denom = prompt("What is the denominator?","<Enter denominator value>");
    denom2 = prompt("What is the percent denominator?",100)
    percent = (numer/denom)* denom2;
    alert("The percentage is "+percent+".");
    }
function fahrenheit()  {
    cel = prompt("What is the current temperature in degrees Celsuis?","<Enter temperature>");

    fah = (cel*9/5)+32;

    alert("The temperature in degrees fahrenheit is "+fah+".");
    }
function celsius()      {
    fah = prompt("What is the current temperature in degrees fahrenheit?","<Enter temperature>"); 
    
    cel = (fah-32)*(5/9);
    
    alert("The temperature in degrees celsius is "+cel+".");
    }
    
function LPM()      {
    
    GPM = prompt("What is the GPM?","<Enter flow rate>");
    
    LPM = (GPM*3.7854117839);
    
    alert("The flow rate is "+LPM+"Litres per minute.");
    }
    
    function GPM()      {
    
    LPM = prompt("What is the LPM?","<Enter flow rate>");
    
    GPM = (LPM/3.7854117839);
    
    alert("The flow rate is "+GPM+"gallons per minute.");
    }
    
</script>

</head>


<body>
<nav>
<ul>
<li>
<a href="task_handler.php"> Task Handler </a>
</li>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="grocery_list.php"> Grocery List </a>
</li>
<li>
<a href="3d_printers.php"> 3D Printer HUB </a>
</li>
<li>
<a href="store.php"> Store </a>
</li>
<li>
<a href="about.php"> About </a>
</li>
</ul>
</nav>
<div class="socials">
<ul>
<li>
<a href="https://www.youtube.com/channel/UCbScAAcSVrM1JRjN3ougp8w" target="_blank" rel="noopener noreferrer"> YouTube </a>
</li>
<li>
<a href="https://github.com/AlbertaKoolKid" target="_blank" rel="noopener noreferrer"> GitHub </a>
</li>
</ul>
</div>
<h1>Useful Calculator</h1>
<div>
<h3>Celsius/Fahrenheit</h3>
<p> This will convert between Celsius and Fahrenheit. Select the unit you would like to convert to. </p>
<button type="button" onclick="fahrenheit()">Fahrenheit</button>
<button type="button" onclick="celsius()">Celsius</button>
</div>
<div>
<h3>Percent Calculator</h3>
<p> Enter the numerator and denominator to calculate percent. </p>
<button type="button" onclick="percent()">Percentage</button>
</div>
<h3>Flow Rate</h3>
<p> Use this function to calculate flow rate in Gallons per minute(GPM) or litres per minute.(LPM). 
<button type="button" onclick="GPM()">GPM</button>
<button type="button" onclick="LPM()">LPM</button>


</body
</html>

Any help or thoughts would be greatly appreciated.

Upvotes: 0

Views: 69

Answers (1)

T-S
T-S

Reputation: 747

Your variables are the same name as your functionnames. So you can call those functions once but when it's executed the name of the function cease to exist because now there needs to be a variable with that name. The second time the button gets pushed and wants to call the function with that name it no longer exist because JS now only nows that variable (as that was the last thing with that name).

Try mixing different names or uppercase and lowercase, for example:

function percent() -> variable percentage

function GPM() -> variable gpm

function LPM() -> variable lpm

Upvotes: 2

Related Questions