Quiero crear un elemento html, usando javascript, con contenido extraído de dos matrices inicializadas en la carga de la página. Esto es lo lejos que he llegado pero, aparte del punto de prueba console.log que aparece normalmente en la consola, no pasa nada.
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"); };Gracias de antemano por su tiempo y ayuda y disculpe si esto se ha preguntado antes.
Debe llamar a una función como esta createTextElement(randomText); pero también puede cancelar el argumento de la función y llamarlo sin argumento 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>