Member Avatar for jtkiv

I've got a table in an html document im writing, and i have two separate cells which need to pull parallel information. For example, a book title and a summary. The book title and book summary need to be from the same book...

Ok, so i have one array with 20 lines. The first ten lines are the "titles" and the last ten are the "summaries". Ok, then i have this

var i = Math.floor(10*Math.random())
var j = i+10

Now, using this same external array, in my html file i need one cell to display variable i and another cell to display variable j. I need to somehow use this command,

document.write(r_text[i]);

in one cell and then

document.write(r_text[j]);

in another...

using this code,

<script src="homran.js" language="javascript" type="text/javascript"></script>

and containing both "document.write" things in the .js file it works perfectly, but i need the information in the different cells.


Hope this is clear :D

  • 2 Contributors
  • 2 Replies
  • 136 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jtkiv

Dani AI

Generated

A simple, robust pattern is to put only data in the external file and let a small in-page script populate the table cells. was right to separate markup from script; the next step is to keep your book title/summary pairs together (so they can't get out of sync) and avoid document.write in the external file.

Example external file (homran.js) — store pairs as objects:

var library = [
  { title: "Title A", summary: "Summary A" },
  { title: "Title B", summary: "Summary B" },
  // ...
];

Example HTML (place the loader script after the table so the elements exist):

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

<table>
  <tr>
    <td id="bookTitle">placeholder</td>
    <td id="bookSummary">placeholder</td>
  </tr>
</table>

<script>
(function () {
  var idx = Math.floor(Math.random() * library.length);
  document.getElementById('bookTitle').textContent = library[idx].title;
  document.getElementById('bookSummary').textContent = library[idx].summary;
})();
</script>

Notes and troubleshooting

  • If you must keep the single-array layout (first N titles then N summaries) you can compute summaryIndex = titleIndex + N, but pairing objects is safer and clearer.
  • Make sure the external file defining the array is loaded before the code that reads it: put the <script src="homran.js"> before the loader script, or use defer/DOMContentLoaded handlers.
  • Avoid using document.write from an external file after the page has finished parsing — it can overwrite the document. See MDN for document.write and for textContent/DOMContentLoaded for reliable DOM text insertion: Document.write Node.textContent DOMContentLoaded.
  • If values do not appear, check the console for undefined (usually an ordering/load issue) and verify element IDs match.

Recommended Answers

All 2 Replies

Member Avatar for fxm

i have two separate cells which need to pull parallel information

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <script type="text/javascript">
var books = ["t0","t1","t2","t3","t4","t5","t6","t7","t8","t9","s0","s1","s2","s3","s4","s5","s6","s7","s8","s9"];
var choice = 7;
    </script>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>
          <script type="text/javascript">
document.write(books[choice]);
          </script>
        </td>
        <td>
          <script type="text/javascript">
document.write(books[choice+10]);
          </script>
        </td>
      </tr>
    </table>
  </body>
</html>

is what the document.write approach would look like.

That is OK for a toy application but if there were many elements to be displayed the mixture of html and javascript would be a nightmare to maintain.

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <script type="text/javascript">
var books = ["t0","t1","t2","t3","t4","t5","t6","t7","t8","t9","s0","s1","s2","s3","s4","s5","s6","s7","s8","s9"];
var choice = 7;
    </script>
  </head>
  <body>
    <table border="1">
      <tr>
        <td id="left">
          L
        </td>
        <td id="right">
          R
        </td>
      </tr>
    </table>
	<script type="text/javascript">
		document.getElementById('left').firstChild.data=books[choice];
		document.getElementById('right').firstChild.data=books[choice+10];
	</script>
  </body>
</html>

shows one way to separate the script from the html. It will do what you want and is supported by all browsers.

Note: for this short-hand approach [using the .data property] to work, the target elements must contain at least one character at design time (in this case the 'L' and the 'R' placeholders). If you want to target elements that are empty at design time, use .createTextNode('...') instead.

Member Avatar for jtkiv

I need the javascript array to be external.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.