Почему эта функция Javascript переписывает innerHTML одного div, но не другого?

Question

Я использую NodeJS для запроса к базе данных MySQL одной записи журнала, но результаты не попадают в оба назначенных элемента div. У меня есть iFrame в моем центральном столбце, посвященный двум div (один скрыт в любой момент времени). Один div является страницей записи журнала, доступной только для чтения, а другой содержит текстовый редактор TinyMCE. У меня есть кнопки в левом столбце для переключения между представлениями.

Редактор форматированного текста правильно загружается при начальной загрузке страницы, но не обновляется при перемещении по календарю; внутреннийHTML только для чтения действительно обновляется правильно, когда я перемещаюсь. calDt[] — это массив, содержащий даты. calDt[0] — это активная дата, а calDt[1] содержит фиктивную дату, используемую для навигации по календарю без изменения записи.

app.js:

    app.get('/getdata/:dateday', (req, res) => {
        let sql = `SELECT entry FROM main where dateID ='${req.params.dateday}'`
        let query = db.query(sql, (err, results) => {
            if(err) {
                throw err 
            }
            res.send(JSON.stringify(results));
        })
    })

средний левый.ejs

   <button style= "height:22px"; type="button" onclick="readDivHere()">Lock</button>
   <button style= "height:22px"; type="button" onclick="editDivHere()">Edit</button></div>

    <script> // the Lock button brings us back to the completed entry in the middle stuff
        function readDivHere() {
        document.getElementById('frame1').contentWindow.readDivHere();
        document.getElementById('frame1').scrolling = "yes";
    }
    </script>

    <script> // the Edit button will bring tinymce rich-text editor to the middle stuff
        function editDivHere() {
        document.getElementById('frame1').contentWindow.editDivHere();
        document.getElementById('frame1').scrolling = "no";
    }
    </script>

мидл-центр.ejs

<iframe id="frame1" class="entryon" src="" frameborder="0px"></iframe>
<script>
    document.getElementById("frame1").src = "iframe";
</script>

iframe.ejs


    <div id="readDiv" class="here" style="display: block; background: white; padding-top: 0px; padding-left: 10px; padding-right: 8px; min-height: 810px; width: 967px;"><%- include ('entry'); %></div>
    <div id="editDiv" class="here" style="display: none; padding: 0px;" ><%- include ('editPage'); %></div>


    <script> //function that switches from rich-text editor back to real entry
        function readDivHere() { // here we run a function to update text of read-only entry
        document.getElementById("readDiv").style.display="block";
        document.getElementById("editDiv").style.display="none";
        }
    </script>
    <script> //function that switches from read-only entry to rich-text editor
        function editDivHere() {
        document.getElementById("readDiv").style.display="none";
        document.getElementById("editDiv").style.display="block";
        }
    </script>

entry.ejs

<div id="readOnlyEntry"></div>

<script>
        // load the active entry into the middle column for proper reading
        function loadEntry(p) {
                var x = parent.calDt[1].getFullYear();
                var y = parent.calDt[1].getMonth();
                y = y + 1;
                if (y < 10) {
                    y = "0" + y;
                };
                if (p < 10) {
                    p = "0" + p;
                }
                var newDate = x + "" + y + "" + p;     // p is a date formatted like 20210808
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    const text = this.responseText;
                    const obj = JSON.parse(text);
                    document.getElementById("readOnlyEntry").innerHTML = obj[0].entry;
                    document.getElementById("richTextEd").innerHTML = obj[0].entry; // doesn't work!
                }
            xhttp.open("GET", "../getdata/" + newDate, true);
            xhttp.send();
        }
</script> 
    
<script>
    // rich-text editor populates correctly on load
    loadEntry(parent.calDt[0].getDate());
</script>

editPage.ejs

<%- include ('tinymce'); %>

<form method="POST" action="../result" enctype="multipart/form-data">
        <textarea name="content" id="richTextEd">Here's the default text.</textarea>
</form>

calendar-clicker.ejs

var p = x.innerHTML; // get the value of the calendar cell text (i.e. day of the month)
p = p.match(/\>(.*)\</)[1];
var d = calDt[1].getFullYear(); // what year is the calendar referencing?
var q = calDt[1].getMonth();  // what month is the calendar referencing? 
q = q + 1; // compensate for javascript's weird month offset
calDt[0] = new Date(q + "/" + p + "/" + d); // assign a new global date variable
calDt[1] = calDt[0]; // temporarily reset navigation date to active date
document.getElementById('frame1').contentWindow.loadEntry(p);

Связан ли сбой с назначением innerHTML другому .ejs? Если я помещу форму в тот же div, что и запись только для чтения, форма по-прежнему не будет обновляться при навигации.

Почему эта функция Javascript переписывает innerHTML одного div, но не другого?

Ответы (1)