HTML标签的问题与Javascript一致

Trouble With HTML Tags In Accordance With Javascript

本文关键字：Javascript 一致 问题 标签 HTML      更新时间：2023-09-26

这是我的代码，它完美地工作，但只适用于一个报价（稍后参考）：

<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>

不过我想包括一个随机报价生成器。我已经有了脚本和以下内容：

<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>

问题是：我想根据标记<p>表示引号和<h4>表示author（在我的第一组代码中引用），将生成随机引号的脚本与其作者关联起来。然后我很难弄清楚我该怎么做。

我该如何编写一个随机引用并包含作者的脚本？我该如何用它们的特定标签来定义它们呢？

会是这样的吗：

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

但现在我该如何将它们与它们的特定标签联系起来：带有<p>标签的报价和带有<h4>标签的作者。

特别是报价部分。

更新：

 <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>

您想要的是.querySelector('p')还是.querySelector('h4')？

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

试试这个：

<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>

我认为你想像这样存储和访问你的报价：

var Quotation = [
    {"author": "Sigmund Freud",   "quote": "Why must we question pancakes?"},
    {"author": "Albert Einstein", "quote": "Why are pi squared?"}
]
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
document.write(Quotation[whichQuotation]["author"] + ' said ' + Quotation[whichQuotation]["quote"]);

根据您的评论，我对界面的工作方式进行了一些假设和自由裁量。这是我建议的HTML:

<section class="quote">
    <div class="content">
        <h4>Sigmund Freud</h4>
            <p id="Sigmund Freud">Sigmund Freud quote</p>
        <h4>Albert Einstein</h4>
            <p id="Albert Einstein">Albert Einstein quote</p>
    </div>
    <input type="submit" value="New Quote" onClick="return quotation();" />
</section>

然后是与之配套的Javascript代码：

function quotation() {
  var Quotation = [
    {"author": "Sigmund Freud",   "quote": "Why must we question pancakes?"}, 
    {"author": "Sigmund Freud",   "quote": "You have mother issues."}, 
    {"author": "Albert Einstein", "quote": "Why are pi squared?"},
    {"author": "Albert Einstein", "quote": "Space is on the chilly side."}
  ];
  var Q = Quotation.length;
  var whichQuotation = Math.round(Math.random() * (Q - 1));
  var el = document.getElementById(Quotation[whichQuotation]["author"]);
  console.log(el);
  el.innerHTML = Quotation[whichQuotation]["quote"];
}

它在jfiddle中（不断点击按钮）。

相关文章：