I am trying to add actions to buttons in HTML by using javascript

Question

0.00/5 (No votes)

See more:

I am a little new to JavaScript, i'm having trouble trying to enlarge or make a Box grow just by pressing a button, or to change the color of the box into a different color using JavaScript. For example, to expand the image of the box each time the button labeled grow is pressed. I am wondering on how to link the buttons into the image of the box. that goes for the coloring of the box as well. Please help, much appreciated. Thank you.

Here are my HTML codes for my webpage that I am trying to enhance using Javascript:

<html>
<head>
    <title>Jiggle Into JavaScript</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>

    <script type="text/javascript" src="javascript.js"></script>
    

</body>
</html>

What I have tried:

I have tried a couple of things but I am very inexperienced in JavaScript which made this task more challenging. Please help. Thank You

Posted 2-Jan-17 14:04pm

Member 12931605

Updated 2-Jan-17 17:10pm

v4

Add a Solution

Comments

David_Wimbley 2-Jan-17 20:36pm

Post your javascript and HTML snippets you have tried so we can see what route you have chosen to go with your code. Javascript has a ridiculous number of frameworks and if i post code from framework XYZ that isn't going to be of much help for you when you were looking for say...jQuery.

Member 12931605 2-Jan-17 21:04pm

My JavaScript coding is completely incorrect and I am certain that I've input in the wrong codes but this is what I have so far: var content = document.getElementsById("button")
var button = document.getElementsById("grow")
button.onclick = function changesize() {
var size= document.getElementsById("box");

Thank you for your response.

P.S. I've also added my HTML Coding into my question, I hope that helps and clarify's my question. Thanks again

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2017-01-02T17:10:00

Take a look at the demo code using jQuery-a JavaScript library, have some fun while learning:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#grow").click(function(){
        $("#myImg").animate({width: '+=20px'});
    });

});
</script>
</head>
<body>

<button id="grow">Zoom In!</button><br>

<img id='myImg' src='https://s-media-cache-ak0.pinimg.com/736x/d7/9e/b8/d79eb82db960906a3da0439ea5be40d5.jpg'>

</body>
</html>

Try it at JSFiddle[^]
Adapt and learn.