Bob Bob - 7 months ago 15
HTML Question

Trouble With HTML Tags In Accordance With Javascript

This is my code that works perfectly but only for a single quote (reference on this later):

<section class="quote">
<div class="content">
<h4>Bruce Lee</h4>
<p>Ever since I was a child I have had this instinctive urge for expansion and growth. To me, the function and duty of a quality human being is the sincere and honest development of one's potential.</p>
</div>
</section>


I want though to include a random quote generator. I already have the script and the following:

<section class="quote">
<div class="content">
<p><script language="JavaScript">
/* Copyright 2004 by CodeLifter.com */
var Quotation=new Array()

Quotation[0] = "Time is of the essence! Comb your hair.";
Quotation[1] = "Sanity is a golden apple with no shoelaces.";
Quotation[2] = "Repent! The end is coming, $9.95 at Amazon.";
Quotation[3] = "Honesty blurts where deception sneezes.";
Quotation[4] = "Pastry satisfies where art is unavailable.";
Quotation[5] = "Delete not, lest you, too, be deleted.";
Quotation[6] = "O! Youth! What a pain in the backside.";
Quotation[7] = "Wishes are like goldfish with propellors.";
Quotation[8] = "Love the river's \"beauty\", but live on a hill.";
Quotation[9] = "Invention is the mother of too many useless toys.";

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script></p>
</div>
</section>


The problem: I want to associate the script that produces a random quote with it's author in accordance with it's tags "p" for quote and "h4" for author (as referenced in my first set of code). I am then having trouble figuring out how I would do that.

How would I write the script that produces a random quote and includes the author? And how would I define them with their certain tags?

Would it be something like this:

Quotation[0] = "Why must we question pancakes?";
Author[0] = "Sigmund Freud";


But now how would I have them be associated with their certain tags:
Quotation with the "p" tag and author with "h4" tag.

Here is my website which I am working on: bernardinoalvarez.com

The quote section, specifically.

Update:

<section class="quote">
<div class="content">
<h4></h4>
<p></p>

<script language="JavaScript">
/* Copyright 2004 by CodeLifter.com */
var Quotation = [];

Quotation[0] = ["example Author 1", "Time is of the essence! Comb your hair."];
Quotation[1] = ["example Author 2", "Sanity is a golden apple with no shoelaces."];
Quotation[2] = ["example Author 3", "Repent! The end is coming, $9.95 at Amazon."];
Quotation[3] = ["example Author 4", "Honesty blurts where deception sneezes."];
Quotation[4] = ["example Author 5", "Pastry satisfies where art is unavailable."];
Quotation[5] = ["example Author 6", "Delete not, lest you, too, be deleted."];
Quotation[6] = ["example Author 7", "O! Youth! What a pain in the backside."];
Quotation[7] = ["example Author 8", "Wishes are like goldfish with propellors."];
Quotation[8] = ["example Author 9", "Love the river's \"beauty\", but live on a hill."];
Quotation[9] = ["example Author 10", "Invention is the mother of too many useless toys."];

var Q = Quotation.length;
var whichQuotation = Math.round(Math.random() * (Q - 1));

document.querySelector('h4').textContent = Quotation[whichQuotation][0];
document.querySelector('p').textContent = Quotation[whichQuotation][1];
</script>
</div>
</section>

Answer

Is .querySelector('p') or .querySelector('h4') what you're looking for?

document.querySelector('h4').textContent = // Author

Try this:

<section class="quote">
  <div class="content">
    <h4></h4>
    <p></p>
  </div>
</section>
<script>
  var Quotation = [];

  Quotation[0] = ["example Author 1", "Time is of the essence! Comb your hair."];
  Quotation[1] = ["example Author 2", "Sanity is a golden apple with no shoelaces."];
  Quotation[2] = ["example Author 3", "Repent! The end is coming, $9.95 at Amazon."];
  Quotation[3] = ["example Author 4", "Honesty blurts where deception sneezes."];
  Quotation[4] = ["example Author 5", "Pastry satisfies where art is unavailable."];
  Quotation[5] = ["example Author 6", "Delete not, lest you, too, be deleted."];
  Quotation[6] = ["example Author 7", "O! Youth! What a pain in the backside."];
  Quotation[7] = ["example Author 8", "Wishes are like goldfish with propellors."];
  Quotation[8] = ["example Author 9", "Love the river's \"beauty\", but live on a hill."];
  Quotation[9] = ["example Author 10", "Invention is the mother of too many useless toys."];

  var Q = Quotation.length;
  var whichQuotation = Math.round(Math.random() * (Q - 1));

  document.querySelector('.content > h4').textContent = Quotation[whichQuotation][0];

  document.querySelector('.content > p').textContent = Quotation[whichQuotation][1];
</script>

Comments