Changing a box with buttons-CodePudding

I am very new to coding and am trying to combine html, css, and javascript for the first time. The task is to have buttons make changes to a box. For example one of my buttons is "grow", in which I want the box to increase in size when the button is clicked. Here is my 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>

Here is my CSS

body {
    background-color: aliceblue;
}

.box {
    height:150px; 
    width:150px; 
    background-color:orange; 
    margin:25px
}

And no javascript yet. I don't really know where to even start, I know how to combine CSS and HTML, however I am stumped when it comes to adding in the javascript. Any help is appreciated and thank you in advance.

CodePudding user response：

Here is a good place to start. https://www.w3schools.com/jsref/event_onclick.asp

CodePudding user response：

okay. javaScript can modify elements (HTML buttons for example) and their properties, like text content AND style (CSS). first of all, you need to select the element into a variable

let btn = document.querySelector('#grow-btn)

let btn means you're declaring a variable, piece of storage, named btn. you're putting inside of it the resulte of the expression.

btn.addEventListener("click", function(){/*here you're handling the click*/})

add a listener to the btn, so you can know when a click was made and respond to it.

inside the block you can change some css properties of a box in a similar way

CodePudding user response：

In your button, you add a function 'onclick', like this:

<button id="button1" onclick="growFunction()">Grow</button>

Then, you go to javascript.js and create the growFunction() that will be executed when the button get clicked.

Also, to do the growFunction, either you use no parameters and inside the function you use document.getElementById('button').{your code}, or you pass this parameter, something like:

<button onclick="growFunction(this)">Grow</button>

javascript.js

growFunction(element){
    element.yourcode...
}

CodePudding user response：

A few tips to help you get started, first you can make a button do something with the "onClick" HTML attribute, where you might specify a function to execute when the button is clicked. Listeners are how some people do it, but that might be more complex than you're ready for.

<button id="button1" onclick="growBox()">Grow</button>

In your js file, you would define your function:

function growBox() {
  let box = document.getElementById("box");
  box.style.height = '200px';
  box.style.width = '200px';
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/ is a good resource for how things work, and know that just googling things like "how change css with button javascript" can teach you almost anything. Even as a working developer you'll still do this.

Just keep plugging along, this feeling is how all of us started.