Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
226 views
in Technique[技术] by (71.8m points)

javascript - How to change the next page's heading according to the previous one?

I have two HTML pages: on the first one, I have 3 tables with people's names and last names. On the second page, there is one heading. Now on the 1st page, I want to click on tables and according to the table that is clicked on, I want to change the 2nd page's heading text. I know that I have to do it by using innerHTML in JS DOM. Before that, I have a for loop in order to change the page. I don't know how to do it.. (I am a beginner)

My for loop and HTML codes:

for (var i=0; i<document.querySelectorAll(".tab").length; i++) {
      document.querySelectorAll(".tab")[i].onclick = function () {
              location.href = "headingpage.html";
          };
    };
  <body>
    <table class="tab">
      <tr>
        <td class="name">111</td>
      </tr>
      <tr>
        <td class="lastName">111</td>
      </tr>
    </table>

    <table class="tab">
      <tr>
        <td class="name">222</td>
      </tr>
      <tr>
        <td class="lastName">222</td>
      </tr>
    </table>

    <table class="tab">
      <tr>
        <td class="name">333</td>
      </tr>
      <tr>
        <td class="lastName">333</td>
      </tr>
    </table>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

for do that without a server is not so easy. But you can try a possible solution.

First you have to make some changes to your JS code:

let tabInfo; 

for (var i=0; i<document.querySelectorAll(".tab").length; i++) {
      document.querySelectorAll(".tab")[i].onclick = function () {
              tabInfo = this.innerHTML;
              document.location.href = "headingpage.html";
          };
    };

And on your headingpage.html:

<h1 class="tabInfo"><h1>

Then in the same or on a different JS file:

document.querySelector(".tabInfo").innerHTML = tabInfo;

Im not sure if it will work. In that case tell me and i will try more hard.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...