内部HTMLのプロパティを設定できません

Question

何らかの理由で、ページを読み込むたびにinnerHTMLのプロパティを設定できないことがわかります。私は他の誰もが言っていたが、役に立たなかったことすべてを試みた。 window.onloadを追加しようとしましたが、スクリプトタグを移動してDOMの読み込み時間を許そうとしましたが、それでも動作しません。私は何をすべきか？

<!-- The Canvas of which the buttons and labels will be placed on --> 
    <canvas id="myCanvasUI" width="100" height="400" style="border: 1px solid #000000;"> </canvas> 


<!-- Left and Right Arrows to modify the values of the Enzymes Variable --> 
    <button class="buttonsEnzyme buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="myEnzymesMinus()"></button> 
     <p id="myEnzymesPara"> <b> ENZYMES </b> </p> 
      <button class="buttonsEnzyme buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="myEnzymesPlus()"></button> 
       <p id="myEnzymesValue"></p> 

<!-- Left and Right Arrows to modify the values of the Substrates Variable --> 
    <button class="buttonsSubstrates buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="mySubstratesMinus()"></button> 
     <p id="mySubstratesPara"> <b> SUBSTRATES </b> </p> 
      <button class="buttonsSubstrates buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="mySubstratesPlus()"></button> 

<!-- Left and Right Arrows to modify the values of the Inhibitors Variable --> 
    <button class="buttonsInhibitors buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="myInhibitorsMinus()"></button> 
     <p id="myInhibitorsPara"> <b> INHIBITORS </b> </p> 
      <button class="buttonsInhibitors buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="myInhibitorsPlus()"></button> 

<!-- Left and Right Arrows to modify the values of the Temperature Variable --> 
    <button class="buttonsTemperature buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="myTemperatureMinus()"></button> 
     <p id="myTemperaturePara"> <b> TEMPERATURE </b> </p> 
      <button class="buttonsTemperature buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="myTemperaturePlus()"></button> 
             </div> 

<!-- The Canvas of which the model will be placed on --> 
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000000;"> </canvas> 
     <canvas id="myModel" width="390" height="390" style="border: 1px solid #000000;"> </canvas> 


<script> 
var enzymes = 1; 
var substrates = 20; 
var inhibitors = 0; 
var temperature = 25; 
var container = 400; 
var pH = 7; 

function myEnzymesMinus() { 
    enzymes -= 1; 
    console.log(enzymes); 
    } 

function myEnzymesPlus() { 
    enzymes += 1; 
    console.log(enzymes); 
    } 

window.onload = function displayEnzyme() { 
    document.getElementById(myEnzymesValue).innerHTML = enzymes; 
    } 

function mySubstratesMinus() { 
    substrates -= 1; 
    console.log(substrates); 
    } 

function mySubstratesPlus() { 
    substrates += 1; 
    console.log(substrates); 
    } 

</script> 

</body> 
</html> 

Answer 1

あなただけの引用符であなたのセレクタをラップするのを忘れ：

window.onload = function displayEnzyme() { 
    document.getElementById('myEnzymesValue').innerHTML = enzymes; 
} 

あなたが道でwindow.onloadを必要としません。スクリプトを一番下に置くだけで十分です。

希望します。

Answer 2

そうJSインタプリタはあなたがdocument.getElementByIdの機能でここに二重引用符が欠落しているし、それがある

<!-- The Canvas of which the buttons and labels will be placed on --> 
 
    <canvas id="myCanvasUI" width="100" height="400" style="border: 1px solid #000000;"> </canvas> 
 

 

 
<!-- Left and Right Arrows to modify the values of the Enzymes Variable --> 
 
    <button class="buttonsEnzyme buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="myEnzymesMinus()"></button> 
 
     <p id="myEnzymesPara"> <b> ENZYMES </b> </p> 
 
      <button class="buttonsEnzyme buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="myEnzymesPlus()"></button> 
 
       <p id="myEnzymesValue"></p> 
 

 
<!-- Left and Right Arrows to modify the values of the Substrates Variable --> 
 
    <button class="buttonsSubstrates buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="mySubstratesMinus()"></button> 
 
     <p id="mySubstratesPara"> <b> SUBSTRATES </b> </p> 
 
      <button class="buttonsSubstrates buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="mySubstratesPlus()"></button> 
 

 
<!-- Left and Right Arrows to modify the values of the Inhibitors Variable --> 
 
    <button class="buttonsInhibitors buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="myInhibitorsMinus()"></button> 
 
     <p id="myInhibitorsPara"> <b> INHIBITORS </b> </p> 
 
      <button class="buttonsInhibitors buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="myInhibitorsPlus()"></button> 
 

 
<!-- Left and Right Arrows to modify the values of the Temperature Variable --> 
 
    <button class="buttonsTemperature buttonsLeft" style="background: url(LeftArrow.png)" type="button" onclick="myTemperatureMinus()"></button> 
 
     <p id="myTemperaturePara"> <b> TEMPERATURE </b> </p> 
 
      <button class="buttonsTemperature buttonsRight" style="background: url(RightArrow.png)" type="button" onclick="myTemperaturePlus()"></button> 
 
             </div> 
 

 
<!-- The Canvas of which the model will be placed on --> 
 
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000000;"> </canvas> 
 
     <canvas id="myModel" width="390" height="390" style="border: 1px solid #000000;"> </canvas> 
 

 

 
<script> 
 
var enzymes = 1; 
 
var substrates = 20; 
 
var inhibitors = 0; 
 
var temperature = 25; 
 
var container = 400; 
 
var pH = 7; 
 

 
function myEnzymesMinus() { 
 
    enzymes -= 1; 
 
    console.log(enzymes); 
 
    } 
 

 
function myEnzymesPlus() { 
 
    enzymes += 1; 
 
    console.log(enzymes); 
 
    } 
 

 
window.onload = function displayEnzyme() { 
 
    document.getElementById('myEnzymesValue').innerHTML = enzymes; 
 
    } 
 

 
function mySubstratesMinus() { 
 
    substrates -= 1; 
 
    console.log(substrates); 
 
    } 
 

 
function mySubstratesPlus() { 
 
    substrates += 1; 
 
    console.log(substrates); 
 
    } 
 

 
</script> 
 

 
</body> 
 
</html>

Answer 3

undefined値のundecalred変数として扱いますが、引用符でmyEnzymesValueを取りますなぜなら、そのDOM要素を取得できないからです。 要素IDを二重引用符で囲む必要があります。

document.getElementById("myEnzymesValue").innerHTML = enzymes;