2017-07-31 51 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> 

希望這有助於

相關問題