使用HTML+JavaScript开发博客时动态GridView提交后无内容显示问题求助

问题排查与修复 #

核心错误点 #

• 表单提交默认行为未阻止：你给form设置了action属性，点击提交按钮后浏览器会默认跳转/刷新页面，刚存入listOfObjects的数据会随着页面刷新丢失，自然看不到渲染内容
• grid函数重复生成容器：每次调用grid都会新增一个id为maingrid的容器，多次提交后会出现重复结构，渲染混乱
• window.onload绑定错误：你直接执行了grid(main, listOfObjects)并把返回值赋值给window.onload，而非绑定回调函数
• 样式属性书写错误：p标签的style属性写了无效规则black:white，虽不影响渲染但属于冗余错误
• 数组长度获取逻辑冗余：数组直接通过.length取长度即可，无需通过Object.keys转换

修复后的代码 #

JavaScript部分

import blogger from "./blogger.js";

let listOfObjects = [];
const main = document.querySelector(".maincontent");
// 表单提交事件绑定
const form = document.getElementById('add-blog-form');
form.onsubmit = function (e) {
  // 阻止表单默认提交跳转行为
  e.preventDefault();
  let title = document.getElementById("title").value;
  let textarea = document.getElementById("textarea1").value;
  let image = document.getElementById("myimage").value;

  var obj = new blogger(
    title,
    textarea,
    image
  );

  listOfObjects.push(obj);
  grid(main, listOfObjects);
  // 提交后清空表单可按需保留
  form.reset();
}

// 页面加载初始化渲染
window.onload = function() {
  grid(main, listOfObjects);
}

function grid(main, list) {
  // 先清空之前的渲染内容，避免重复生成容器
  main.innerHTML = '';
  let container = document.createElement("div");
  container.id = "maingrid";
  // 已正确添加Bootstrap的container类
  container.className = "container";
  main.appendChild(container);
  let maingrid = document.getElementById('maingrid');
  // 直接取数组长度
  let len = list.length;

  for (var i = 0; i < len; i++) {
    let row = document.createElement("div");
    // 已正确添加Bootstrap的row类
    row.className = "row";
    row.id = "row" + i;
    maingrid.appendChild(row);
    for (var j = 0; j < 1; j++) {
      let box = document.createElement("div");
      // 已正确添加Bootstrap的col类
      box.className = "col";
      box.id = "col" + j;
      row.appendChild(box);
      let h1 = document.createElement("h1");
      h1.setAttribute("style", "color:black;font-size:24px;");
      let h1id = "h1" + j;
      h1.setAttribute("id", h1id);
      let xContent = document.createTextNode(list[i].title);
      h1.appendChild(xContent);
      box.appendChild(h1);

      let p = document.createElement("p");
      // 修复错误的style规则
      p.setAttribute("style", "color:black;font-size:16px;");
      var pid = "p" + j;
      p.setAttribute("id", pid);
      let pcontent = document.createTextNode(list[i].textarea);
      p.appendChild(pcontent);
      box.appendChild(p);

      let img = document.createElement('img');
      let imgid = "img" + j;
      img.setAttribute("id", imgid);
      img.setAttribute('alt', '博客配图')
      img.setAttribute('loading', 'lazy')
      img.style.height = "300px"
      img.style.width = "300px"
      img.src = list[i].image;
      box.appendChild(img);
    }
  }
}

HTML部分

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container1 ">
  <!-- 可删除不需要的action属性 -->
  <form class="form-group" id="add-blog-form">
    <h2>Blogger Page</h2>
    <label>Title</label>
    <input type="text" name="Title" id="title" class="form-control" /><br />
    <label>TextArea</label>
    <textarea name="comment" id="textarea1" placeholder="Text" class="form-control "></textarea>
    <br />
    <label>Image</label>
    <input type="text" name="myImage" id="myimage" placeholder="URL" class="form-control " />
    <br />
    <br />
    <br />

    <input type="submit" value="submit" class="btn btn-success " />
    <input type="reset" value="reset" class="btn btn-info" />
  </form>
</div>

<main class="maincontent"></main>

补充说明 #

你原本的Bootstrap类添加逻辑是正确的，container、row、col都已经正确挂载到对应元素上，不存在类添加失败的问题。修复后提交表单不会跳转，数据会正常渲染到页面中。

内容的提问来源于stack exchange，提问作者Sangita Paul