Quería crear código aleatorio, almacenarlo en variable y mostrarlo en html.
function GenerateButton() { document.getElementById("btn1id").style.display = "none"; document.getElementById("Txt").style.display = "block"; document.getElementById("code").innerHTML = GFCode; } function randomString(length, chars) { var result = ''; for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))]; return result; } function codeFunc() { document.write(randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ')); document.write("-"); document.write(randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ')); } var GFCode = codeFunc; <div class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div> <div class="Txt" id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>Si hago el documento. Escribo en el documento html que se está generando el código, pero no puedo hacer que funcione desde el documento js.
Dado que establece la variable GFCode simplemente en el nombre de la función, la está configurando en la función en sí, no en su valor de retorno. Para ejecutar realmente la función y obtener su valor de retorno, debe escribirlo así:
var GFCode = codeFunc();Su pregunta dice: "... cree un código aleatorio, guárdelo en una variable y muéstrelo en html".
No use document.write . Simplemente devuelva una cadena, asígnela a una variable e interpole esa variable en su HTML. Para hacerlo, deberá ejecutar codeFunc() , que luego asigna el código aleatorio devuelto (cadena) a GFCode :
function GenerateButton(){ document.getElementById("btn1id").style.display = "none"; document.getElementById("Txt").style.display = "block"; document.getElementById("code").innerHTML = GFCode; } function randomString(length, chars) { var result = ''; for (var i = length; i > 0; --i) { result += chars[Math.round(Math.random() * (chars.length - 1))]; } return result; } function codeFunc(){ return ( // <-- return the code string randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ') + "-" + randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ') ); } var GFCode = codeFunc(); // <-- execute codeFunc <div class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div> <div class="Txt" id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>Si, como su título lo indica, tiene la intención de almacenar la función en la variable, y no el código aleatorio producido por la función, puede:
... document.getElementById("code").innerHTML = GFCode(); // <-- execute function ... var GFCode = codeFunc; // <-- assign function to variableDe cualquier manera, el código aleatorio debe devolverse desde la función y esa función debe ejecutarse.
Su código está devolviendo nulo ya que llama a la variable antes de que se ejecute.
La función codeFunc() devuelve una función.
Aquí cambio tu código.
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var GFCode = `${randomString(4, chars)} - ${randomString(4, chars)}`; function GenerateButton(){ document.getElementById("btn1id").style.display = "none"; document.getElementById("Txt").style.display = "block"; document.getElementById("code").innerHTML = GFCode; } function randomString(length, chars) { var result = ''; for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))]; return result; } .btn0 { padding: 5px 10px; border: 1px solid black; width: 100px; font-weight: 600; text-align: center; cursor: pointer; } <div class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div> <div class="Txt" id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>