Javascript 检查 'URL' 为空，然后用 "" 填充，否则将 url 显示为超链接

Question

我有一些显示 XML 标题的 Javascript。

点击标题时，会弹出与之相关的信息。当 URL 为空时，我遇到了麻烦。 如果它是空的，我不希望显示 URL。它应该看起来像 URL。

如果它存在，我希望 url 显示为超链接。

我是新手，所以请放轻松！

XML

<?xml version="1.0"?>
<notepad>
  <nextID>114</nextID>
  <memos>
    <memo id="100">
      <title>Valentines</title>
      <sender>James Mcavoy</sender>
      <recipient>Clara Croft</recipient>
      <date>11/09/17</date>
      <message>Let me know what you would like for Valentines</message>
      <url>www.heresyourpresent.com</url>
    </memo>
    <memo id="101">
      <title>Birthday</title>
      <sender>Louise King</sender>
      <recipient>Lily May</recipient>
      <date>13/10/17</date>
      <message>I will be there for your birthday! What cake would you like?</message>
      <url>www.findmycake.com</url>
    </memo>
    <memo id="102">
      <title>Christmas</title>
      <sender>Monty Python</sender>
      <recipient>Jack Maloe</recipient>
      <date>16/11/17</date>
      <message>What would you like for Chrismtas Jack ?</message>
      <url>www.socksrus.co.uk</url>
    </memo>
    <memo id="103">
      <title>Easter</title>
      <sender>Carolyn Lynemouth</sender>
      <recipient>Mercedes Hugh</recipient>
      <date>30/04/17</date>
      <message>I got a few easter eggs for your daughter on this site, is this ok?</message>
      <url>www.eastereggs.com</url>
    </memo>
    <memo id="104">
      <title>Christening</title>
      <sender>Dylan Bramble</sender>
      <recipient>Kelly Love</recipient>
      <date>07/05/17</date>
      <message>I have sent you an e-voucher for a baby store</message>
      <url>www.firstchristening.com</url>
    </memo>
    <memo id="105">
      <title>Wedding</title>
      <sender>Polly Wisener</sender>
      <recipient>Natasha Kirkpatrick</recipient>
      <date>12/06/18</date>
      <message>Remember to go to attend the dress fitting please on Friday</message>
      <url>dgdfgdffg</url>
    </memo>
    <memo id="106">
      <title>Graduation</title>
      <sender>Kathryn Kirke</sender>
      <recipient>Cara Lovejoy</recipient>
      <date>04/07/18</date>
      <message>Just to let you know I can't make your graduation, sorry</message>
      <url>www.makegraduationspecial.co.uk</url>
    </memo>
    <memo id="107">
      <title>Anniversary</title>
      <sender>Eric Simpleton</sender>
      <recipient>Grainne Simpleton</recipient>
      <date>18/08/17</date>
      <message>Be at le maison restaurant at 7pm this Thursday. I have a table booked</message>
      <url>dfgdfgdfgfd</url>
    </memo>
    <memo id="108">
      <title>Baby Shower</title>
      <sender>Hyacinth Bouquet</sender>
      <recipient>Gemma Hamilton</recipient>
      <date>20/12/17</date>
      <message>I will attend your baby shower</message>
      <url>www.babygift.co.uk</url>
    </memo>
    <memo id="109">
      <title>Stag</title>
      <sender>John Smith</sender>
      <recipient>Cara Lovejoy</recipient>
      <date>22/12/17</date>
      <message>Your stag do will be in Marbella. I have your tickets</message>
      <url>www.thelaststag.co.uk</url>
    </memo>
    <memo id="110">
      <title>New Home</title>
      <sender>Opal Newfridge</sender>
      <recipient>Kylie Jenner</recipient>
      <date>19/07/17</date>
      <message>Congratulations on the new home. Can't wait for a cuppa</message>
      <url>www.newhomesforyou.com</url>
    </memo>
    <memo id="111">
      <title>Communion</title>
      <sender>John Smith</sender>
      <recipient>Hilary Clinton, Jacob Marks, Lilly Popper</recipient>
      <date>22/12/17</date>
      <message>Your stag do will be in Marbella. I have your tickets</message>
      <url>www.thelaststag.co.uk</url>
    </memo>
    <memo id="112">
      <title>Retirement Party</title>
      <sender>Kylie Jenner</sender>
      <recipient>Chloe Jenner, Rob Stark, Patrick Hunter, Julie Smith, Helen Doe</recipient>
      <date>22/07/17</date>
      <message>Please join us at Lodge Hotel for Robs Retirement Dinner</message>
      <url>www.lodge.com</url>
    </memo>
     <memo id="113">
      <title>Fathers Day</title>
      <sender>Carolyn Lynemouth</sender>
      <recipient>Rob Stark</recipient>
      <date>22/07/17</date>
      <message>We will be sending you away for the weekend to London!</message>
      <url>www.easyflights.com</url>
    </memo>
  </memos>
</notepad>

代码如下

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "memos.xml", false);
xmlhttp.send();
xmlDocument = xmlhttp.responseXML;
memos = xmlDocument.getElementsByTagName("memo");

table = "<tr><th>Title</th></tr>";
for (count = 0; count < memos.length; count++) {
  table += "<tr onclick='displayTitle(" + count + ")'><td>";
  table += memos[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  table += "</td>";
}
document.getElementById("demo").innerHTML = table;

function displayTitle(count) {

  document.getElementById("showTitle").innerHTML =
    "ID: " +
    memos[count].getAttribute("id") +
    "<br>Title: " +
    memos[count].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "<br>Sender: " +
    memos[count].getElementsByTagName("sender")[0].childNodes[0].nodeValue +
    "<br>Recipient: " +
    memos[count].getElementsByTagName("recipient")[0].childNodes[0].nodeValue +
    "<br>Date: " +
    memos[count].getElementsByTagName("date")[0].childNodes[0].nodeValue +
    "<br>Message: " +
    memos[count].getElementsByTagName("message")[0].childNodes[0].nodeValue +
    "<br>Url: " +
    urlNode = memos[count].getElementsByTagName("url")[0];
  if (urlNode.hasChildNodes()) {
    url = urlNode.childNodes[0].nodeValue;
  } else {
    url = "";
  }

}

Answer 1

在您更新了 innerHTML 之后，您正尝试将您的 url 设置为“”？

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "memos.xml", false);
xmlhttp.send();
xmlDocument = xmlhttp.responseXML; 
memos = xmlDocument.getElementsByTagName("memo");

table="<tr><th>Title</th></tr>";
for (count = 0; count <memos.length; count++) { 
  table += "<tr onclick='displayTitle(" + count + ")'><td>";
  table += memos[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  table += "</td>";
}
document.getElementById("demo").innerHTML = table;

function displayTitle(count) {
    var urlNode = memos[count].getElementsByTagName("url")[0];
    var url = "";
    if (urlNode.hasChildNodes()) {
        url = urlNode.childNodes[0].nodeValue;
    } else {
        url = "";
    }

    document.getElementById("showTitle").innerHTML =
  "ID: " +
  memos[count].getAttribute("id")+
   "<br>Title: " +
  memos[count].getElementsByTagName("title")[0].childNodes[0].nodeValue +
  "<br>Sender: " +
  memos[count].getElementsByTagName("sender")[0].childNodes[0].nodeValue +
  "<br>Recipient: " + 
  memos[count].getElementsByTagName("recipient")[0].childNodes[0].nodeValue +
  "<br>Date: " + 
  memos[count].getElementsByTagName("date")[0].childNodes[0].nodeValue +
   "<br>Message: " + 
  memos[count].getElementsByTagName("message")[0].childNodes[0].nodeValue +
  "<br>Url: " + url;       

}