Javascript innerHTML 不变

Question

I'm creating a simple dashboard and i want to change the section part of the pages.我正在创建一个简单的仪表板，我想更改页面的部分。 to change this i used innerHTML.为了改变这一点，我使用了 innerHTML。 but when i run it the UI is not changing and the value in the console is not changing as well.但是当我运行它时，用户界面没有改变，控制台中的值也没有改变。

what i want to do is to change content of the pages with html files and not touch the sidebar.我想做的是用html文件更改页面的内容，而不是触摸侧边栏。 what i'm getting is it doesn't change it but when i use it int the URL tag it works and when clicked after many click it works sometimes.我得到的是它不会改变它，但是当我在 URL 标签中使用它时，它可以工作，并且在多次点击后单击它有时可以工作。

the Javascript file. Javascript 文件。 is as follows如下

const route = (event)=>{
    event = event || window.event;
    event.preventDefault();
    window.history.pushState({}, "", event.target.href);
    routeHandler();
};
const routes = {
    404: "/html/404.html",
    "/": "/html/home.html",
    "/school" : "/html/school.html",
    "/student" : "/html/student.html"
};
const routeHandler = async ()=>{
    const path = window.location.pathname;
    const route = routes[path] || routes[404];
    const html = await fetch(route).then((response)=> response.text());
console.log(html);
    document.getElementById("main-page").innerHTML = html;
};

my index.html body我的index.html机身

<div class="sidebar">
...
<li>
                <a href="/" onclick="route()">
                    <i class='bx bx-grid-alt'></i>
                    <span class="link_name">Dashboard</span>
                </a>
                <ul class="sub-menu blank">
                    <li><a href="#" class="link_name">Dashboard</a></li>
                </ul>
            </li>
...
</div>
...
<section id="main-page"></section>
    <script src="/script/router.js"></script>
    <script src="/script/index.js"></script>

other pages are as follows其他页面如下

<div class="content">
        <h1>Course Section</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed rem non doloribus voluptatibus perferendis alias ea ratione nulla inventore beatae exercitationem totam velit assumenda enim vitae, fugiat molestias rerum nemo?</p>
    </div>

so why is this not working?那么为什么这不起作用呢？

Answer 1

Maybe you should try using XML HttpRequests.也许您应该尝试使用 XML HttpRequests。 Basic example to understand how it works:了解其工作原理的基本示例：

<!DOCTYPE html><html>
<body>
<div id="sidebar">
<button type="button" onclick="loadXMLDoc('A.txt')">Change Content A</button>
<button type="button" onclick="loadXMLDoc('B.txt')">Change Content B</button>
</div>
<div id="main-page">

</div>
<script>
function loadXMLDoc(chosen_option) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("main-page").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", chosen_option, true);
  xhttp.send();
}
</script>
</body>
</html>

This way all "dashboard" stay same, but browser gets only content for "main-page" div.这样所有“仪表板”都保持不变，但浏览器只获取“主页”div的内容。

You need to have content files (in this example A.txt and B.txt).您需要有内容文件（在本例中为 A.txt 和 B.txt）。 In content files you should put content for main div.在内容文件中，您应该放置主 div 的内容。

Answer 2

Consider setting iframe src with your javascript and style it appropriately.考虑使用 javascript 设置 iframe src 并适当地设置它的样式。

Javascript innerHTML 不变

问题描述

2 个解决方案

解决方案1
0 2022-07-24 19:07:07

解决方案2
0 2022-07-24 19:09:46

Javascript innerHTML 不变

问题描述

2 个解决方案

解决方案1 0 2022-07-24 19:07:07

解决方案2 0 2022-07-24 19:09:46

解决方案1
0 2022-07-24 19:07:07

解决方案2
0 2022-07-24 19:09:46