Versuchen, Stile hinzuzufügen/ändern Schriftarten in einem zufälligen Text-und Bild-Skript

Question

Ich versuche, eine Webseite zu einem zufälligen Bild und Text zu öffnen, um damit zu gehen. Ich werde dies nutzen, um verschiedene Veranstaltungen auf der Titelseite unserer Bibliothek zu veröffentlichen. Ich habe von verschiedenen Beispielen im Web die Grundlagen bekommen, um damit zu arbeiten.

var total_images = 2; 
    var random_number = Math.floor((Math.random()*total_images)); 
    var random_img = new Array(); 
    var random_text = []; 

    random_img[0] = "<a href = 'www.webpage.com'><img src='image_1.jpg' alt='Image'></a>"; 
    random_text[0] = "<p>Here is some text</p>";  

    random_img[1] = "<a href = 'www.webpage2.com'><img src='image_2.jpg' alt='Image2'></a>"; 
    random_text[1] = "<p>Here is some text2</p>"; 

    document.write(random_img[random_number] + ' <br/><p id="myP">' + random_text[random_number] + 'dfsadf</p>'); 

function myFunction() { 
    document.getElementById("myP").style.font = "italic bold 20px arial,serif"; 
} 

Es funktioniert wie erhofft und bei einer Aktualisierung wird ein neues Ereignis Bild und Text angezeigt. Womit ich Probleme habe, ist, dass ich es nicht mit den Stilen des Rests unserer Webseite vergleichen kann. Ich habe versucht, Funktionen zu verwenden, um eine neue ID, reguläre HTML-Tags und alles, was ich aus dem Internet ziehen kann, zu erstellen. Jedes Mal, wenn ich etwas mehr zu der random_text[] = "<p>codehere</p>"; als die üblichen <b> oder <i> fügt es bricht die Seite.

Wenn ich die Schriftarten ändern kann, um zu passen, wäre es perfekt.

Answer 1

Es wird wahrscheinlich die Seite brechen, weil ein <p>-Tag nicht innerhalb eines anderen <p>-Tags eingefügt werden sollte. Versuchen Sie, diese für das Dokument schreiben:

document.write('<div id="myP">' + random_img[random_number] + ' <br/>' + random_text[random_number] + 'dfsadf</div>'); 

Und die Schriftarten geändert werden könnten CSS in HTML-Seite mit:

<style type="text/css"> 
    #myP p { font:20px arial,sans-serif; } 
</style>