Skip to main content
se añadieron 1149 caracteres en el cuerpo
Origen Enlace

Lo que entiendo es que quieres que al hacer click cambie el fondo, si es eso con este código funciona. Espero haberte ayudado

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    const btn = document.getElementById('miBoton');
    btn.addEventListener('click', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Si lo quieres es con el evento load, tu imagen no carga debido a que según la documentación

El evento load se dispara cuando toda la página se ha cargado, incluyendo todos los recursos dependientes como hojas de estilo e imágenes. Esto contrasta con DOMContentLoaded, que se dispara en cuanto se ha cargado el DOM de la página, sin esperar a que los recursos terminen de cargarse.

Lo que puedes hacer es esto:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Espero haberte ayudado. Saludos.

Lo que entiendo es que quieres que al hacer click cambie el fondo, si es eso con este código funciona. Espero haberte ayudado

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    const btn = document.getElementById('miBoton');
    btn.addEventListener('click', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Lo que entiendo es que quieres que al hacer click cambie el fondo, si es eso con este código funciona.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    const btn = document.getElementById('miBoton');
    btn.addEventListener('click', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Si lo quieres es con el evento load, tu imagen no carga debido a que según la documentación

El evento load se dispara cuando toda la página se ha cargado, incluyendo todos los recursos dependientes como hojas de estilo e imágenes. Esto contrasta con DOMContentLoaded, que se dispara en cuanto se ha cargado el DOM de la página, sin esperar a que los recursos terminen de cargarse.

Lo que puedes hacer es esto:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>

Espero haberte ayudado. Saludos.

Origen Enlace

Lo que entiendo es que quieres que al hacer click cambie el fondo, si es eso con este código funciona. Espero haberte ayudado

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM y Eventos</title>
</head>
<body>
    <button id="miBoton">Haz clic aquí</button>
    <div id="miDiv"></div>

    <script>
    const btn = document.getElementById('miBoton');
    btn.addEventListener('click', function () {
        document.body.style.backgroundImage = 'url("https://images2.alphacoders.com/130/1301855.jpg")';
    })        
    </script>

</body>
</html>