I want to create an html element, using javascript, with content drawn from two initialized arrays o-CodePudding

I want to create an html element, using javascript, with content drawn from two initialized arrays on page load. This is how far i have gotten but, aside from the console.log test point whice appears normaly in the console, nothing happens.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
    <div id="randomText"></div>
    
    <script src="mymain.js"></script>
</body>
</html>

JavaScript

let randomText = [];
randomText[0] = "blah ";
randomText[1] = "blah blah ";
randomText[2] = "blah blah blah ";
randomText[3] = "blah blah blah blah ";
randomText[4] = "blah blah blah blah blah ";

let people = [];
people[0] = "Person 0";
people[1] = "Person 1";
people[2] = "Person 2";
people[3] = "Person 3";
people[4] = "Person 4";

let divRandomText = document.getElementById("randomText");

function createTextElement(randomText)
{
    let t = Math.floor(Math.random() * 5);
    let text = document.createElement('q');
    let spanSpace = document.createElement('span'); 
    spanSpace.innerHTML = "<br>";
    let person = document.createElement('sub');
    text.innerText = randomText[t];
    person.innerText = people[t];
    divRandomText.append(text, person); 
}

window.onload = (event) => { 
createTextElement; 
console.warn("test point 1"); 
};

Thank you in advance for your time and help and apologies if this has been asked before.

CodePudding user response：

You should call function like this createTextElement(randomText); but you can also cancel argument from function and call it without argument createTextElement();

let randomText = [];
randomText[0] = "blah ";
randomText[1] = "blah blah ";
randomText[2] = "blah blah blah ";
randomText[3] = "blah blah blah blah ";
randomText[4] = "blah blah blah blah blah ";

let people = [];
people[0] = "Person 0";
people[1] = "Person 1";
people[2] = "Person 2";
people[3] = "Person 3";
people[4] = "Person 4";

let divRandomText = document.getElementById("randomText");

function createTextElement(randomText)
{
    let t = Math.floor(Math.random() * 5);
    let text = document.createElement('q');
    let spanSpace = document.createElement('span'); 
    spanSpace.innerHTML = "<br>";
    let person = document.createElement('sub');
    text.innerText = randomText[t];
    person.innerText = people[t];
    divRandomText.append(text, person); 
}

window.onload = (event) => { 
createTextElement(randomText); 
console.warn("test point 1"); 
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
    <div id="randomText"></div>
    
    <script src="mymain.js"></script>
</body>
</html>