Question

我目前正在尝试使用JavaScript随机化显示在此网站上的广告。为此，我要导入两个脚本文件。

问题是我无法加载图片，我不确定这是我设置的参数是否有问题，或""和''格式的错误试图输出元素。我已经尝试预设属于url的变量而没有运气。我试过这次尝试的行代码是var img = "ad" + rNumber + ".jpg";下面是我正在处理的嵌入式JavaScript的HTML代码。任何有关此问题的帮助将不胜感激。

function randInt(n) {
  randNum = Math.ceil(Math.random() * n);
  return randNum;
}

function adDescription(n) {
  var descrip = new Array();
  descrip[1] = "[AD] Diamond Health Club - For all your Health Club Needs";
  descrip[2] = "[AD] Pixal - Quality Digital Equipment and Accessories";
  descrip[3] = "[AD] dHome - Quality Geodesic Domes and Homes";
  descrip[4] = "[AD] Dunston Retreat Center - get away";
  descrip[5] = "[AD] LanGear - Quality Network Solutions for all your Business Needs";

  return descrip[n];
}

function adLink(n) {
  var link = new Array();
  link[1] = "http://www.diamondhealth.com";
  link[2] = "http://www.pixalproducts.com";
  link[3] = "http://www.dhome.com";
  link[4] = "http://www.dunstonretreats.com";
  link[5] = "http://wwww.langearproducts.com";

  return link[n];
}

<html>

<head>
  <!--
      New Perspectives on HTML and CSS
      Tutorial 10
      Case Problem 2

      The Ridgewood Herald Tribune
      Author: Brigitte Arcoite
      Date: 7-31-17   

      Filename:         front.htm
      Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, logo.jpg, 
                        modernizr-1.5.js, random.js, styles.css

    -->

  <meta charset="UTF-8" />
  <title>The Ridgewood Herald Tribune</title>
  <script src="modernizr-1.5.js"></script>

  <link href="styles.css" rel="stylesheet" type="text/css" />
  <script src="random.js" type="text/javascript"></script>
  <script src="ads.js" type="text/javascript"></script>

</head>

<body>

  <nav>
    <h1>Contents</h1>
    <p class="section">Main</p>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Subscriptions</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">News Sources</a></li>
    </ul>

    <p class="section">News</p>
    <ul>
      <li><a href="#">Local</a></li>
      <li><a href="#">National</a></li>
      <li><a href="#">International</a></li>
    </ul>

    <p class="section">Sports</p>
    <ul>
      <li><a href="#">Baseball</a></li>
      <li><a href="#">Basketball</a></li>
      <li><a href="#">Football</a></li>
      <li><a href="#">Golf</a></li>
      <li><a href="#">Hockey</a></li>
      <li><a href="#">Miscellaneous</a></li>
    </ul>

    <p class="section">Opinion</p>
    <ul>
      <li><a href="#">Editorials</a></li>
      <li><a href="#">Columnists</a></li>
      <li><a href="#">Letters</a></li>
    </ul>

    <p class="section">Classifieds</p>
    <ul>
      <li><a href="#">Employment</a></li>
      <li><a href="#">For Sale</a></li>
      <li><a href="#">Personals</a></li>
      <li><a href="#">Real Estate</a></li>
      <li><a href="#">Wanted</a></li>
    </ul>

    <p class="section">Other</p>
    <ul>
      <li><a href="#">Business</a></li>
      <li><a href="#">Weather</a></li>
      <li><a href="#">Entertainment</a></li>
    </ul>
  </nav>

  <section>

    <div id="ads">
      <script>
        var rNumber = randInt(5); //generate a random integer from 1 to 5               
        var rAd = adDescription(descrip[rNumber]); //description of the random ad    
        var rLink = adLink(link[rNumber]); //url of the random ad
        var img = "ad" + rNumber + ".jpg";
        alert(rNumber);
        document.write("<a href='" + rLink + "'>");
        document.write("<img src='" + img + "' alt='" + rAd + "' />");
        document.write("</a>");
      </script>
    </div>

    <div id="request"><a href="#">Contact us today to place your ad</a></div>

    <header><img src="logo.jpg" alt="Ridgewood Herald Tribune" /></header>

    <img src="fp.jpg" alt="" id="fp" />

    <h2>Park Opens</h2>
    <p>The <i>Adventure Island</i> theme park opened its doors on Monday near Ridgewood. The park, one of the biggest in New Jersey, drew large crowds, but the long lines didn't deter anyone. "I've been watching them put up the rides over the last year,
      it's really exciting to finally get inside the gates!" said Ridgewood resident Denise Brooks.
    </p>

    <p class="cont"><a href="#">story continues on page 2...</a></p>


    <footer>
      <address>
         <b>Ridgewood Herald Tribune</b> &nbsp;&#176;&nbsp; 10010 Atwood Ave. 
              &nbsp;&#176;&nbsp; Ridgewood, NJ &nbsp; &nbsp; 07451<br />
              Phone: (201)555-1101 &nbsp;&#176;&nbsp; Fax: (201)555-1102
                </address>
    </footer>

  </section>

</body>

</html>

Answer 1

您的变量randNum未定义。你也得到了'未捕获参考错误'（randInt [function]未定义）。也许为脚本添加一个事件监听器，以确保它们在DOM Content is loaded

时运行

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
   //console.log("DOM fully loaded and parsed");
    do stuff here
  });
</script>

希望这有帮助

为什么我的JavaScript无法输出我的元素？

1 个答案: