user3760941 user3760941 - 9 months ago 33
CSS Question

Functions execute when they are not called to

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 Source

@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>