Soy muy nuevo en la codificación y estoy tratando de combinar html, css y javascript por primera vez. La tarea es hacer que los botones realicen cambios en un cuadro. Por ejemplo, uno de mis botones es "crecer", en el que quiero que el cuadro aumente de tamaño cuando se hace clic en el botón. Aquí está mi HTML
<!DOCTYPE html> <html> <head> <title>Watch That Box</title> <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> --> </head> <body> <p>Press the buttons to change the box!</p> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> <link rel="stylesheet" href="./style.css"> <script type="text/javascript" src="javascript.js"></script> </body> </html>Aquí está mi CSS
body { background-color: aliceblue; } .box { height:150px; width:150px; background-color:orange; margin:25px }Y sin javascript todavía. Realmente no sé por dónde empezar, sé cómo combinar CSS y HTML, sin embargo, estoy perplejo cuando se trata de agregar el javascript. Cualquier ayuda es apreciada y gracias de antemano.
Este es un buen lugar para comenzar. https://www.w3schools.com/jsref/event_onclick.asp
En su botón, agrega una función 'onclick', como esta:
<button id="button1" onclick="growFunction()">Grow</button>Luego, vaya a javascript.js y cree growFunction() que se ejecutará cuando se haga clic en el botón.
Además, para hacer growFunction, no usa parámetros y dentro de la función usa document.getElementById('button').{su código}, o pasa este parámetro, algo como:
<button onclick="growFunction(this)">Grow</button>javascript.js
growFunction(element){ element.yourcode... }bueno. javaScript puede modificar elementos (botones HTML, por ejemplo) y sus propiedades, como el contenido del texto Y el estilo (CSS). en primer lugar, debe seleccionar el elemento en una variable
let btn = document.querySelector('#grow-btn)let btn significa que está declarando una variable, pieza de almacenamiento, llamada btn. estás poniendo dentro de él el resultado de la expresión.
btn.addEventListener("click", function(){/*here you're handling the click*/})agregue un oyente al btn, para que pueda saber cuándo se hizo un clic y responder a él.
dentro del bloque puede cambiar algunas propiedades css de un cuadro de manera similar