Adding multiple functions to an external javascript file

Question

I'm working on adding javascript functionality to a basic HTML page with multiple buttons. The code works when I include one function in my external JS file, but stops working when I try to add another piece of button functionality.

How do I fix this issue?

HTML:

<!DOCTYPE html>
<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>

Snippet:

document.getElementById("button1").addEventListener("click", function(){
  document.getElementById("box").style.height = "500px";
});

document.getElementById("button2").addEventListener("click", function(){
  document.getElementById("box").style.background-color = "blue";
});

<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>

Did you bother opening the Javascript console? It would have told you where the error was. — Barmar
– Barmar, Commented Aug 9, 2017 at 12:46

Barmar · Accepted Answer · 2017-08-09 12:44:46Z

6

You have incorrect syntax here:

document.getElementById("box").style.background-color = "blue";

- is the subtraction operator, it can't be used as part of a property literal. Style properties are created by converting the CSS name to camelCase, so it should be:

document.getElementById("box").style.backgroundColor = "blue";

answered Aug 9, 2017 at 12:44

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paresh Maghodiya · Accepted Answer · 2017-08-09 12:48:15Z

0

You can also used simple background

document.getElementById("box").style.background = "blue";

answered Aug 9, 2017 at 12:48

Paresh Maghodiya

2182 silver badges11 bronze badges

Comments

Milan Chheda · Accepted Answer · 2017-08-09 12:49:49Z

Since you have tagged JQuery too, here is the JQuery version. In JQuery, you can use css() where you can add/change multiple CSS properties:

$("#button1").on('click', function() {
  $("#box").css({
    'height': '500px'
  });
})

$("#button2").on('click', function() {
  $("#box").css({
    'background-color': 'blue'
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<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>

Dylan Steele · Accepted Answer · 2017-08-09 12:52:36Z

0

In case you wanted a JQuery answer here is one too.

$('button').click(function() {
    var $box = $('#box');
    if($(this).attr('id') == 'button1')
    {
        $box.css('height','500px');
    }
    else if ($(this).attr('id') == 'button2')
    {
        $box.css('background-color', 'blue');
    }
});

answered Aug 9, 2017 at 12:52

Dylan Steele

4294 silver badges20 bronze badges

Collectives™ on Stack Overflow

Adding multiple functions to an external javascript file

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related