How can I create a javascript function that takes text from one HTML page and prints it to another?-CodePudding

I am trying to create a function that takes text from a table on one HTML page and prints it to another table on another HTML page. I am using one Javascript file that is linked to both HTML pages.

I've added click event listeners to buttons on each table row, so that when they are clicked they pull up the text in the selected table row. From there I want to be able to put that text into another table that is on another html page.

The issue is, is that when I try get the table element with document.getElementById(), it returns null or says its not a function. I have made sure to put the javascript at the end of the body in each HTML page so that the HTML can load before the script, but it is still responding with

document.getElementsById is not a function

Here is the HTML that I am trying to take from:

<table >
            <tr>
              <th>Trails</th>
              <th>Province</th>
              <th>Country</th>
            </tr>
            <tr>
              <td >Lion's Head</td>
              <td >Western Cape</td>
              <td >South Africa<button >Save</button></td>
            </tr>
            <tr>
              <td >Pipe Track</td>
              <td >Western Cape</td>
              <td >South Africa<button >Save</button></td>
            </tr>
          </table>
<script src="saveForLater.js"></script>

And here is the javascript file that has the function that works on clicking the "Save Buttons".

let buttons = document.querySelectorAll(".save");
console.log(buttons);

buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    const row = event.target.closest("tr");

    let newRow = row.innerText;
    let td1 = row.children[0].innerText;
    let td2 = row.children[1].innerText;
    let td3 = row.children[2].innerText;

    let td4 = td3.slice(0, -4);

    let myArray = [];
    let myObject = {
      trail: td1,
      province: td2,
      Country: td4,
    };

    myArray.push(td1, td2, td4);

    let newObj = JSON.stringify(myArray);

    localStorage.setItem("myObject", JSON.stringify(myArray));


    //Here below, is where the issue is occuring.
    var y = document.getElementsById("newTable");
    var savedRow = y.insertRow(1);

    var cell1 = savedRow.insertCell(0);
    var cell2 = savedRow.insertCell(1);
    var cell3 = savedRow.insertCell(2);
  });
});

And finally, here is the HTML page that has the table that I am trying to print the text into:

<table id="newTable" >
      <tr>
        <td >Waka</td>
        <td >Waka</td>
        <td >Eh</td>
      </tr>
    </table>

    <script src="saveForLater.js"></script>

I have tried targeting the table that I want to print the text to by using the document.getElementById("newTable)". I have also tried putting the Javascript scripts to the body of the body in each HTML page so that it loads after the HTML. I was expecting for the javascript to be able to find the table, but instead it says that

Uncaught TypeError: document.getElementsById is not a function
    at HTMLButtonElement.<anonymous> (saveForLater.js:28:22)

Is this perhaps to do with the function working on each button?

I'm new to coding and so I appreciate the help everyone. Thanks

CodePudding user response：

UPDATE:

This is a hacky solution and I would not put this on any real server -

UPDATE the on click handler with this -

button.addEventListener("click", (event) => {
   // we will simply fetch the data and store
   // it in localStorage on this side.
   const row = event.target.closest("tr");

   let newRow = row.innerText;
   let td1 = row.children[0].innerText;
   let td2 = row.children[1].innerText;
   let td3 = row.children[2].innerText;
   let td4 = td3.slice(0, -4);
   let myObject = {
      trail: td1,
      province: td2,
      country: td4,
   };
   localStorage.setItem("myObject", JSON.stringify(myObject));
});

AND add the following code to your script file -

// This will start running as soon as the window is loaded
window.onload = handleTableData;

function handleTableData () {
    // We will keep checking to see if localStorage
    // contains the data we need. If it does, we fetch it
    // find the table. Inject it to the table, and remove
    // it from the localStorage (to prevent unnecessary overwriting)
    setInterval( () => {
       var data = localStorage.getItem('myObject') || null;
       if (data) {
          var tableData = JSON.parse(data);
          var table = document.getElementById('newTable');
          if (table && tableData) {
              var savedRow = y.insertRow(1);
              var cell1 = savedRow.insertCell(0);
              var cell2 = savedRow.insertCell(1);
              var cell3 = savedRow.insertCell(2);
              cell1.appendChild(tableData.trail);
              cell2.appendChild(tableData.province);
              cell3.appendChild(tableData.country);
              localStorage.removeItem('myObject')
          }
       }
    }, 1000);
}

There's a simple solution to your error -

document.getElementsById is not a function

The command is document.getElementById()

Element not Elements.

CodePudding user response：

function testJS() {

var b = document.getElementByclass('tableRow').value

document.getElementByclass('saved').innerHTML = b;

}