Hola, aquí estoy tratando de generar mi función en dos divs separados en mi proyecto, pero si simplemente emito lo mismo, cancelaría todo el código y anularía la salida. Aquí está el código.
<script> function randomString() { //initialize a variable having alpha-numeric characters var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; //specify the length for the new string to be generated var string_length = 10; var randomstring = ''; //put a loop to select a character randomly in each iteration for (var i=0; i<string_length; i++) { var rnum = Math.floor(Math.random() * chars.length); randomstring += chars.substring(rnum,rnum+1); } //display the generated string document.getElementById("randomfield").innerHTML = randomstring; } </script>Luego en el cuerpo que uso
<body onload="randomString();"> <div> <p id="randomfield"></p> </div> </body>La cuestión es que quiero generar la misma cadena en la página pero en un div diferente, tal vez en el pie de página, pero si procedo a agregar
<body onload="randomString();"> <div> <p id="randomfield"></p> </div> <hr> <footer> <p id="randomfield"></p> </footer> </body>En la misma página, cancela todo el código y anula la salida. ¿Cómo soluciono esto? Apenas tengo conocimiento de Js.
Está utilizando la misma id en ambas áreas. Tienes que especificar una identificación diferente para que funcionen:
function randomSSSSSString() { //initialize a variable having alpha-numeric characters var charssssss = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; //specify the length for the new string to be generated var sssssstring_length = 10; var randomsssssstring = ''; //put a loop to select a character randomly in each iteration for (var i = 0; i < sssssstring_length; i++) { var rrrrrrnum = Math.floor(Math.random() * charssssss.length); randomsssssstring += charssssss.substring(rrrrrrnum, rrrrrrnum + 1); } //display the generated string document.getElementById("rrrrrrandomfield").innerHTML = randomsssssstring; document.getElementById("rrrrrrandomfield2").innerHTML = randomsssssstring; } <body onload="randomSSSSSString();"> <div> <p id="rrrrrrandomfield"></p> </div> <hr> <footer> <p id="rrrrrrandomfield2"></p> </footer> </body>Esto sucede porque está usando el mismo " id " más de una vez, lo cual no es válido.
Puede cambiar la identificación a clase en su lugar y puede usar querySelectorAll para recorrer cada elemento que consiste en esa clase para mostrar su resultado.
function randomSSSSSString() { //initialize a variable having alpha-numeric characters var charssssss = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; //specify the length for the new string to be generated var sssssstring_length = 10; var randomsssssstring = ''; //put a loop to select a character randomly in each iteration for (var i=0; i<sssssstring_length; i++) { var rrrrrrnum = Math.floor(Math.random() * charssssss.length); randomsssssstring += charssssss.substring(rrrrrrnum,rrrrrrnum+1); } //display the generated string var i_want_show_here = document.querySelectorAll(".rrrrrrandomfield") Array.prototype.forEach.call(i_want_show_here, function(el) { el.innerHTML = randomsssssstring }); } <body onload="randomSSSSSString();"> <div> <p class="rrrrrrandomfield"></p> </div> <hr> <footer> <p class="rrrrrrandomfield"></p> </footer> </body>Creo que puedes resolver esto creando una etiqueta p dinámica con la misma identificación. No hay ningún tipo de datos var en javascript, cámbielo a let .
function randomString() { let characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; let randnum = document.getElementById("randnum") let stringLength = 10; let tempRandomString = ''; for (let i = 0; i < stringLength; i++) { let randNum = Math.floor(Math.random() * characters.length); tempRandomString += characters.substring(randNum, randNum + 1); } for (var i = 0; i < 2; i++) { const elem = document.createElement(`p`); elem.id = tempRandomString; elem.innerText= tempRandomString; randnum.appendChild(elem); } } <html> <title>Web Page</title> <head> </head> <body onload="randomString();"> <div id="randnum"> </div> </body> </html>