無法設置內部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

採取myEnzymesValue在引號，否則JS解釋器將其當作undefined值

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

您在這裏失蹤雙引號中的document.getElementById功能，那就是undecalred變量它無法獲得該DOM元素的原因。 你必須用雙引號括起元素id。

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