无法设置内部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;