2017-07-31 68 views
0

我目前正试图随机化使用JavaScript显示在本网站上的广告。为了做到这一点,我导入了两个脚本文件。为什么我的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>

+0

阵列从零开始的。你的数组看起来像[undefined,'sth',...] –

+1

并替换adDescription(descrip [rNumber]);与adDescription(rNumber); ,链接相同 –

+0

@Jonasw我应该添加一个索引0并将其链接到任何东西? – briggleshiggle

回答

1

你的变量randNum没有定义。您还会收到ol'Uncaught Reference错误(randInt [function]未定义)。也许一个事件侦听器添加到您的脚本以确保它们运行的​​时候DOM Content is loaded

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

希望这有助于

相关问题