CODEWITHSUNDEEP
javascripthtml
briggleshiggle
briggleshiggle

Reputation: 41

Why isn't my JavaScript able to output my element?

I am currently trying to randomize the ads that show up on this website with JavaScript. In order to do this I am importing two script files.

The issue is I can not get the image to load, and I am unsure as to whether it's a problem with the parameters I have set or an error in the format of "" and '' when trying to output the element. I have already attempted to preset the variable that belongs as the url with no luck. The line code I tried with this attempt was var img = "ad" + rNumber + ".jpg"; Below is the HTML code with the embedded JavaScript that I am working on. Any help with this problem would be greatly appreciated.

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>

Upvotes: 0

Views: 103

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28553

Your variable randNum isn't defined. You're also getting the ol' Uncaught Reference error (randInt [function] not defined). Perhaps add an event listener to your scripts to ensure they run when the DOM Content is loaded

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

Hope this helps

Upvotes: 1

Related Questions