CODEWITHSUNDEEP
javascripthtmlcss
user3760941
user3760941

Reputation: 528

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>

Upvotes: 0

Views: 52

Answers (2)

Monicka
Monicka

Reputation: 505

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

Upvotes: 1

Ethan
Ethan

Reputation: 2087

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.

Upvotes: 3

Related Questions