Functions execute when they are not called to

Question

For some reason, these two functions execute already, but they should only function after clicking buttons. And the buttons are assigned to separate functions.

Can someone shed some light as to why the functions have already executed before even pressing the buttons? thanks for your help

 @charset "UTF-8"; /* CSS Document */ body{ height:1000px; width:100%; background:#fff; margin:0; } .divider{ width:100%; height:auto; background:#CCC; display:block; margin:10px; } h2{ font-size:16px; display:block; } #confirm-paragraph{} #global-variable-paragraph{} #user-input{} #expressions{} #elephant-paragraph{} #method-1{} #method-2{} #ml{} #litres{} #conditional-operator{} #cast-1{} #cast-2{} 

 <!-- Checklist: Arguments --> <!-- Checklist: Return Values from Functions --> <section class="divider"> <h2>Arguments Example</h2> <button onclick="PINTStoML()">Click Me</button> <p id="ml">This should change from 2 pints into ml</p> <button onclick="PINTStoLITRES()">Click Me</button> <p id="litres">This should change from 5 pints to litres</p> <p style="color:red; font-weight:bold">NOT WORKING Version6!!!!!!!!</p> <p>For some reason, the function already executes before clicking the buttons...</p> <script> function PINTStoML(pints) { return pints * 568.2612; } document.getElementById("ml").innerHTML = PINTStoML(2); function PINTStoLITRES(pints) { return pints * 0.568261; } document.getElementById("litres").innerHTML = PINTStoLITRES(5); </script> </section> 

Answer 1

They are executing because they are being called by document.getElementById("litres").innerHTML = PINTStoLITRES(5); This happens because as the page is loaded so is the script, and any unprotected parts of the code, such as that one, will execute and launch the other functions.

Answer 2

 @charset "UTF-8"; /* CSS Document */ body{ height:1000px; width:100%; background:#fff; margin:0; } .divider{ width:100%; height:auto; background:#CCC; display:block; margin:10px; } h2{ font-size:16px; display:block; } #confirm-paragraph{} #global-variable-paragraph{} #user-input{} #expressions{} #elephant-paragraph{} #method-1{} #method-2{} #ml{} #litres{} #conditional-operator{} #cast-1{} #cast-2{} 

 <!-- Checklist: Arguments --> <!-- Checklist: Return Values from Functions --> <section class="divider"> <h2>Arguments Example</h2> <button onclick="PINTStoML(2)">Click Me</button> <p id="ml">This should change from 2 pints into ml</p> <button onclick="PINTStoLITRES(5)">Click Me</button> <p id="litres">This should change from 5 pints to litres</p> <p style="color:red; font-weight:bold">WORKING Version6!!!!!!!!</p> <p>For some reason, the function already executes before clicking the buttons...</p> <script> function PINTStoML(pints) { var p = pints * 568.2612; document.getElementById("ml").innerHTML = p; } function PINTStoLITRES(pints) { var p = pints * 0.568261; document.getElementById("litres").innerHTML = p; } </script> </section>