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.
Here is a good place to start. https://www.w3schools.com/jsref/event_onclick.asp
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...
}
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