innerHTML的内容是“未定义的”

Question

I never had this problem before, but now working with PHP when I try to edit the content of a div with the id of a product taken directly from it's id in the database like this (both separaed in two foreach getting their current correct IDs) because I need them separated so when I can change the content, I can modify it so I can make the second DIV display: none by default and after clicking the first one making it display: inline:

<div id="h<?php echo $obra['id'] ?>" onClick="display()"> </div> // Getting ID h + 84 (h84) this time
<div id="<?php echo $obra['id'] ?>"> TEST TEXT</div> // Getting ID 84 this time)

And the function is:

function display() {
    var result = document.getElementById("84").innerHTML;
    result.innerHTML = "test";
    alert(result);
}

Now, when I click the first DIV, it should get the content of the div with ID 84, which is "TEST TEXT", and then change it for "test" and change the content which I see in the browser and after that, alert with the new result value, but the content doesn't change and the alert shows me TEST TEXT.

Here is the full relevant code if needed:

<div class="row m-0">
            <div class="accordion pl-0 col-4 text-center">
        <?php   if ( count($cuadros) == 0) { ?>
                    <p class="text-center mt-3">No hay cuadros registrados.</p>
        <?php   } else { 
                    $cont = 0;
                        foreach ( $cuadros as $obra ) { ?>
                            <div class="card border-top-0 border-left-0 rounded-0 p-0">
                                <div class="card-header border-0" id="h<?php echo $obra['id'] /* it gets value "84" */ ?>" onClick="display()">
                                    <h5 class="mb-0">
        <?php                           echo $obra['nombreObras']; ?>
                                    </h5>
                                </div>
                            </div>
        <?php       $cont++; } ?>
            </div>
        <?php foreach ( $cuadros as $obra ) { ?>
            <div class="col-4 hidden" id="<?php echo $obra['id'] /* It gets value "84" */ ?>">
                TEST TEXT
            </div>
        <?php   } ?>
        <?php } ?>
        </div>

And a screenshot of what happens (note that the change should be reflected in the alert, which is not)

Thank you!

Answer 1

You are performing innerHTML agin. So it will return error. Remove innerHTML from result

function display() {
    var result = document.getElementById("84");
    result.innerHTML = "test";
    alert(result);
}