Tengo este código simple que genera un número aleatorio del 0 al 3 y al hacer clic en el botón, el número generado aparece en el div. Intenté hacer que se desvaneciera usando JQuery pero no funciona. jsfiddle https://jsfiddle.net/Montinyek/3cj7nbop/27/
function random() { let number = Math.floor(Math.random() * 3); let result = "" switch(number) { case 0: result = "Zero"; break; case 1: result = "One"; break; case 2: result = "Two"; break; case 3: result = "Three"; } return result; } function final() { document.addEventListener("click", function(){ document.getElementById("div").innerHTML = random(); }); } $(document).ready(function(){ $("button").click(function(){ $("#div").fadeIn('slow'); }); });Su código no funciona por 2 razones.
#div no estaba oculto para empezar. También tenga en cuenta que debe evitar onclick y otros atributos relacionados con eventos, ya que no son una buena práctica. Como está usando jQuery de todos modos, la lógica que actualiza el HTML del div se puede mover allí. Prueba esto:
function random() { let number = Math.floor(Math.random() * 3); let result = "" switch (number) { case 0: result = "Zero"; break; case 1: result = "One"; break; case 2: result = "Two"; break; case 3: result = "Three"; } return result; } $(document).ready(function() { $("button").click(function() { $("#div").html(random()).fadeIn('slow'); }); }); #div { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button>Click me</button> <div id="div"></div>