関数が呼び出されていないときに関数が実行されます

Question

何らかの理由で、これらの2つの関数はすでに実行されていますが、ボタンをクリックした後でのみ機能します。ボタンは別々の機能に割り当てられます。

ボタンを押す前に機能が既に実行されている理由について、誰かが気にすることができますか？彼らは、このような、ページがロードされるようにスクリプトがある、とのコードのいずれかの保護されていない部分ので、これが起こるdocument.getElementById("litres").innerHTML = PINTStoLITRES(5); によって呼び出されているので、彼らが実行しているおかげであなたの助けのための

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
body{ 
 
\t height:1000px; 
 
\t width:100%; 
 
\t background:#fff; 
 
\t margin:0; 
 
} 
 

 
.divider{ 
 
\t width:100%; 
 
\t height:auto; 
 
\t background:#CCC; 
 
\t display:block; 
 
\t margin:10px; 
 
} 
 

 
h2{ 
 
\t font-size:16px; 
 
\t 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) { 
 
\t return pints * 568.2612; 
 
} 
 
document.getElementById("ml").innerHTML = PINTStoML(2); 
 

 
function PINTStoLITRES(pints) { 
 
\t return pints * 0.568261; 
 
} 
 
document.getElementById("litres").innerHTML = PINTStoLITRES(5); 
 
</script> 
 
</section>

Answer 1

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
body{ 
 
\t height:1000px; 
 
\t width:100%; 
 
\t background:#fff; 
 
\t margin:0; 
 
} 
 

 
.divider{ 
 
\t width:100%; 
 
\t height:auto; 
 
\t background:#CCC; 
 
\t display:block; 
 
\t margin:10px; 
 
} 
 

 
h2{ 
 
\t font-size:16px; 
 
\t 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) { 
 
\t 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>

Answer 2

他の機能を実行して起動します。