Не может установить свойство внутреннего 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

Вам не хватает двойных кавычек здесь в функции document.getElementById, и по этой причине он не может получить этот элемент DOM. Вы должны заключить идентификатор элемента в двойные кавычки.

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

Answer 3

Принимать 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>