javascript - 意见插入数组后div不刷新

Question

我在我的数组中插入了一些值（插入后在控制台中查看数组和输出）但 html 内容不刷新（我必须按 F5 然后内容出来）。感谢您的帮助（我正在使用 jquery/js）。

if(localStorage.myTreesComments){
   opinions=JSON.parse(localStorage.myTreesComments);
}

console.log(opinions);


const myFrmElm=document.getElementById("opnFrm");

myFrmElm.addEventListener
("submit",processOpnFrmData);

/**
* initialisation of the list of visitor opinions and form submit setup
*/
function init(){
   if (localStorage.myTreesComments) {
       this.opinions = JSON.parse(localStorage.myTreesComments);
   }

   this.opinionsElm.innerHTML = this.opinionArray2html(this.opinions);


   this.opinionsFrmElm.addEventListener("submit", event => this.processOpnFrmData(event));
}

function processOpnFrmData(event) {
   //1.prevent normal event (form sending) processing
   event.preventDefault();

   //2. Read and adjust data from the form (here we remove white spaces before and after the strings)
   const nopName = document.getElementById("menoapriezvisko").value.trim();
   const nopEmail = document.getElementById("email").value.trim();
   const nopUrl = document.getElementById("url").value.trim();
   const nopComm = document.getElementById("komentar").value.trim();
   const nopSlovo = document.getElementById("klucoveslovo").value.trim();


   const nopWillReturn = document.getElementById("willReturnElm").checked;



   //3. Verify the data
   if(nopName=="" || nopEmail==""|| nopUrl==""|| nopComm==""|| nopSlovo==""){
       window.alert("Prosím, zadajte všetky údaje.");
       return;
   }


   //3. Add the data to the array opinions and local storage
   const newOpinion =
       {
           name: nopName,
           email: nopEmail,
           url: nopUrl,
           comment: nopComm,
           gdpr: nopWillReturn,
           klucove_slovo: nopSlovo,
           created: new Date()
       };

   console.log("Nový názor návštevníka:\n "+JSON.stringify(newOpinion));

   opinions.push(newOpinion);

   localStorage.myTreesComments = JSON.stringify(opinions);


   //4. Notify the user
   window.alert("Tvoj názor bol uložený a pridaný na stránku!");
   console.log("Nový názor bol pridaný!");
   console.log(opinions);

   //4. Update HTML
   this.opinionsElm.innerHTML+=this.opinion2html(newOpinion);

   //5. Reset the form
   myFrmElm.reset(); //resets the form
   /*this.opinionsFrmElm.reset(); //resets the form*/

}
/**
* creates html code for one opinion using a template literal
* @param opinion - object with the opinion
* @returns {string} - html code with the opinion
*/

function opinion2html(opinion){
   const opinionTemplate=
       `
           <section>
              <h3>${opinion.name} <i>(${(new Date(opinion.created)).toDateString()})</i></h3>

              <p>${opinion.comment}</p>
              <p>${opinion.willReturn?"I will return to this page.":"Sorry, one visit was enough."}</p>
           </section>`;
   return opinionTemplate;
}
/**
* creates html code for all opinions in an array using the opinion2html method
* @param sourceData -  an array of visitor opinions
* @returns {string} - html code with all the opinions
*/
function opinionArray2html(sourceData){
   return sourceData.reduce((htmlWithOpinions,opn) => htmlWithOpinions+ this.opinion2html(opn),"");
}

</script>
<script  type="module" src="js/myTreesFormLStorageHtmlWr.js"></script>
<script type="module" src="js/opinionsHandlerMustache.js"></script>


<script id="mTmplOneOpinion" type="text/template">
   <section>
       <h3>{{name}} <i>{{createdDate}}</i></h3>
       <p>{{comment}}</p>
       <p>{{willReturnMessage}}</p>
   </section>
</script>

只需在 HTML 页面中，它应该是从数组中查看名称和注释元素并自动刷新。谢谢

标签： javascripthtmljqueryarraysliterals