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

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.

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

1 solution

Solution 1

Add your solution here

Preview 0

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

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us