Padding change via JS

Question

I need to change padding-bottom from -50% to -40% so, here is my CSS code

.mid {
    background-color: rgba(255,205,147,0.68);
    border-radius: 25px;
    margin-top: 18%;
    margin-right: 10%;
    margin-left: 10%;   
    padding-top: 50%;
    padding-bottom: -40%;
    background-attachment: fixed;
    box-shadow: 9px -12px 5px rgba(0,0,0,0.5);
}

and here is my JS code

var expandMid = document.getElementsByClassName("mid");
function buttonReady() {
    if (expandMid.style.padding-bottom == -40%)
        {
    mid.style.padding-bottom == -30%;
        }
        else {
        mid.style.padding-bottom = -40%;
        }
   }

Here is what I can see in browser console

 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:3 Uncaught SyntaxError: Unexpected token )
8index.html:72 Uncaught ReferenceError: buttonReady is not defined
    at HTMLButtonElement.onclick (index.html:72)

In JS 3rd row - missing "use strict" statement. 4th row - expected ")", instead saw { 5th row - expected "{",instead saw "mid" 7th row - expected inedtifier, instead saw "else" 8th row - bad assignement — Alterise, Oct 13 '18 at 14:56

score 0 · Answer 1 · answered Oct 13 '18 at 14:59

0

As dashes are not legal in javascript identifiers, you need to use camelCase instead of kebab-case for style names, as in:

expandMid.style.paddingBottom

Also, you seem to have your variable names wrong. Sometimes, the element is referred to as expandMid, sometimes as mid

answered Oct 13 '18 at 14:59

Jonas Høgh

10,358
1
26
46

used camelCase. That's not working anyway. And what do you mean variable named wrong? What variable i have to change? – Alterise Oct 13 '18 at 15:03

Win · Answer 2 · 2018-10-13T16:40:40.250

Padding-bottom is a computed property from your css, therefore, you won't be able to access padding-bottom via elem.style.paddingBottom.

Solving this issue with jQuery

I would recommend this method so that it is cross-browser compatible.

$(document).ready(function() {
  var elem = $('.block');
  
  // access paddingBottom like so...
  // console.log(elem.css('paddingBottom'));

  $('#set-padding').on('click', function() {
    var newPaddingBottomValue = '100px';
    if (elem.css('paddingBottom') !== '50px') {
      newPaddingBottomValue = '50px';
    }
    elem.css('paddingBottom', newPaddingBottomValue);
  });
});

.block {
  width: 10px;
  height: 10px;
  background: black;
  padding-bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<h5>some heading to show padding changes</h5>
<button id="set-padding">Toggle padding</button>

Solving this issue without jQuery

This is not supported in IE8 or below!

(function() {
  var elem = document.getElementById('block');
  var btn = document.getElementById('toggle-padding');
  
  btn.addEventListener('click', function() {
    var newPaddingBottomValue = '100px';
    if (window.getComputedStyle(elem).paddingBottom !== '50px') {
      newPaddingBottomValue = '50px';
    }
    elem.style.paddingBottom = newPaddingBottomValue;
  });
})();

#block {
  width: 10px;
  height: 10px;
  background: black;
  padding-bottom: 50px;
}

<div id="block"></div>
<button id="toggle-padding">Toggle padding</button>

Sorry mate, I didn't know a thing about jQuery, so, please, if you can, help me to solve problem using JS — Alterise, Oct 13 '18 at 15:18
your snippet looks great, atleast I know, how would I solve my problem, if someday I will use jQuery — Alterise, Oct 13 '18 at 15:21
@Limondero since no one has given you a proper answer without using jQuery I've updated my answer ^ check it out :) — Win, Oct 13 '18 at 16:41

Hasan Sh · Answer 3 · 2018-10-13T16:14:03.193

0

You're getting a syntax error. Because in JS you can't use some special characters and assume they will just work. So, the - (minus) character is a special math operator. That you can use in CSS, but not in JS!

So, if you want to access something that has a special character(like the style properties of the css), write the property as camel case.

expandMid.style.paddingBottom // would give you the access.

Note that the value of paddingBottom should be a string. Not a number. So, for comparsion use: if (expandMid.style.paddingBottom === '40%') ...

Here's why you can't apply a negative padding value source

Let me know if that helped!

edited Oct 13 '18 at 16:14

answered Oct 13 '18 at 15:05

Hasan Sh

1,018
9
16

@Limondero share to care how it isn't working after fixing the casing? – clabe45 Oct 13 '18 at 15:37
Owh, of course, it won't work, because you can't set a negative padding to any html element! – Hasan Sh Oct 13 '18 at 16:02
Uncaught TypeError: Cannot read property 'addEventListener' of null at scripts.js:3 – Alterise Oct 13 '18 at 16:54
@Limondero did you use: `var expandMid = document.getElementById("mid");` – Hasan Sh Oct 13 '18 at 17:22
because if not, I think you're still using: `var expandMid = document.getElementsByClassName("mid");` Which returns an `HTMLCollection` not the actual element! – Hasan Sh Oct 13 '18 at 17:23

score 0 · Answer 4 · answered Oct 13 '18 at 15:06

0

Hope this work. You were saving "mid" ref in "expandMid" but using "mid" directly.

var expandMid = document.getElementsByClassName("mid");
function buttonReady() {
    if (expandMid.style.paddingBottom == -40%){
          expandMid.style.paddingBottom == -30%;
        }
        else {
          expandMid.style.paddingBottom = -40%;
        }
   }

answered Oct 13 '18 at 15:06

Umer Inayat

93
1
7

Hmm. Can you please check if you are including javascript files correctly. Because right now your html code can't find "buttonReady" function. ***Uncaught ReferenceError: buttonReady is not defined*** – Umer Inayat Oct 13 '18 at 15:21
Ready – Alterise Oct 13 '18 at 15:22
@Limondero there is a syntax error on line# 3 in your script.js file. "scripts.js:3 Uncaught SyntaxError: Unexpected token )" – Umer Inayat Oct 13 '18 at 15:32
Ok, I found out that it's not working because Cannot read property 'addEventListener' of null – Alterise Oct 14 '18 at 09:04

score 0 · Answer 5 · answered Oct 13 '18 at 15:06

I see at least three things wrong with your code:

you don't seem to be running the function which you created. after declaring it, you need to run it with buttonReady();
once you do run your function, you will see an error in your browser's console because Javascript variables are not allowed to have dashes in their names.
you need to put -30% and -40% inside of quotation marks. The - character is getting treated by Javascript as the subtraction operator, and the % character is getting treated as the modulo operator. If you're trying to compare strings, you need to treat them as such.

I also see a couple of things wrong with the way you are trying to solve the problem:

getElementsByClassName will return a list of things, even if you only have one of those things on your page. you need to either provide a different input to that function, or use a different function, or need to
you have a variable named mid in some places, but expandMid in other places. this is valid Javascript code (since variables not declared ahead of time will be assumed to be attached to window) but will result in an error when you run it because that variable does not exist on the window.

finally, it's really helpful if when asking questions you attach error output from your console, or links to other StackOverflow questions which you've already tried, or anything else that's more than just "it doesn't work". — Dan O, Oct 13 '18 at 15:07

Padding change via JS

5 Answers5

Solving this issue with jQuery

Solving this issue without jQuery