ne peut pas définir la propriété de html interne

Question

Pour une raison quelconque lorsque je charge la page, il me dit qu'il ne peut pas définir la propriété de innerHTML. J'ai essayé tout ce que tout le monde disait mais en vain. J'ai essayé d'ajouter un fichier window.onload, et j'ai essayé de déplacer mes tags de script pour permettre au DOM de se charger, mais cela ne fonctionne toujours pas. Que devrais-je faire?

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

vous avez juste oublié de l'envelopper dans votre devis sélection:

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

Vous n'avez pas besoin window.onload par la voie. Placer vos scripts au fond est suffisant.

Espérons que ça aide.

Answer 2

Prenez myEnzymesValue en guillemets, sinon interprète JS traitera comme variables undecalred de undefined valeur

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

Il vous manque des guillemets doubles ici dans la fonction document.getElementById et qui est la raison pour laquelle il n'est pas capable d'obtenir cet élément DOM. Vous devez placer l'ID de l'élément entre guillemets.

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