CODEWITHSUNDEEP
javascripthtml
Psycho Li
Psycho Li

Reputation: 85

Passing javascript created table from on html to another html

Edit: problem solved! Credits to @Thennarasan and @SiamakFerdos ,you have my deep gratitude!

Tips: when you are not sure if you get the value you intended to, try using

console.log(your intended value)

to check for it!

I am working on project and I need to pass a table from one html to another.

Whole process:

  1. I want to create a html file to accept a number from the user as an input to produce a multiplication table.
  2. Create an external javascript file that should have a function to generate the multiplication table.
  3. Javascript function should contain array variables and loops to perform the operation.
  4. Use appropriate user message using alert method.
  5. Call the function when the user hits Generate Table button and forward results to another html page.

The following is what I have so far:

//This is the Calculation.js

function DisplayTable() {
  var baseNumber = parseInt(document.getElementById("baseNumber").value);
  var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


  var createMultTable = "<table border='1'>"
  document.write(createMultTable);

  //This will create the table
  //First column is user input, second column is multplier from 1 to 10, third column is results.
  for (var row = 0; row < 10; row++) {
    document.write('<tr>' + '</tr>');
    document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>');
  }
  createMultTable += "</table>";
  document.write(createMultTable);
}

document.getElementById("newTable").innerHTML = createMultTable;
<!DOCTYPE html>
<html>
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Multiplication Table</title>
  <link rel="stylesheet" href="Style.css" />
  <script src="modernizr.custom.05819.js"></script>
  <script type="text/javascript" src="Calculation.js"></script>
</head>

<body>
  <header>
    Multiplication Table
  </header>

 
  <article>
    <h2>Multiplication Table</h2>
    <form method="link" id="newTable" action="TableGetter.html">
      Enter a number:
      <input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!">
      <br>
      <!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> -->
      <button type="button" name="button" onclick="DisplayTable();">Generate Table</button>
    </form>
  </article>
</body>

</html>

I am struggling at figuring out how to forward the result to TableGetter.html. I need help on writing the TableGetter.html as well as passing the table to TableGetter.html when I click Generate Table button in Input.html

Deep gratitude!

Upvotes: 0

Views: 227

Answers (2)

Thennarasan
Thennarasan

Reputation: 718

We need to make couple of changes, please exactly copy paste and check.

calculation.js

function DisplayTable() {
var baseNumber = parseInt(document.getElementById("baseNumber").value);
var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var createMultTable = "<table border='1'>"
document.write(createMultTable);
//This will create the table
//First column is user input, second column is multplier from 1 to 10, third column is results.
for (var row = 0; row < 10; row++) {      
  createMultTable += '<tr><td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td></tr>';    

}
createMultTable += "</table>";
localStorage.setItem("table_html", createMultTable);//ADD THIS LINE****

var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL
window.location.href = url;
}

if (window.location.pathname ==    "/C:/Users/Thennarasan/Desktop/js/TableGetter.html"){
var data = localStorage.getItem("table_html");
document.getElementById("newTable").innerHTML = data;
}

Note change the window.location.pathname of what you have.

input.html

<!DOCTYPE html>
<html>
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiplication Table</title>
<link rel="stylesheet" href="Style.css" />
<script src="modernizr.custom.05819.js"></script>
<script type="text/javascript" src="Calculation.js"></script>
</head>
<body>
<header>
Multiplication Table
</header>
<article>
<h2>Multiplication Table</h2>
<form method="link" id="newTable" action="TableGetter.html">
  Enter a number:
  <input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!">
  <br>
  <!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> -->
  <button type="button" name="button" onclick="DisplayTable();">Generate Table</button>
 </form>
</article>
</body>

</html>

TableGetter.html

<!DOCTYPE html>
<html>
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiplication Table</title>
<link rel="stylesheet" href="Style.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
Multiplication Table
</header>
<article>
<h2>Multiplication Table</h2>
<div id="newTable"></div>
</article>
<script type="text/javascript" src="Calculation.js"></script>
</body>
</html>

Run it, it will work as expected.

Upvotes: 1

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

On TableGetter.html:

<script>
    (function() {
        document.getElementById("newTable").innerHTML =   localStorage.getItem("table_html");
    })();   
</script>

And change your DisplayTable function:

function DisplayTable() {
  var baseNumber = parseInt(document.getElementById("baseNumber").value);
  var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


  var createMultTable = "<table border='1'>"
  document.write(createMultTable);

  //This will create the table
  //First column is user input, second column is multplier from 1 to 10, third column is results.
  for (var row = 0; row < 10; row++) {
    document.write('<tr>' + '</tr>');
    document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>');
  }
  createMultTable += "</table>";

  localStorage.setItem("table_html", createMultTable);//ADD THIS LINE****

  var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL
  window.location.href = url;
}

Upvotes: 2

Related Questions