I am trying to run a function that changes the margin-top size according to what is being displayed. However, it doesn't seem to be working? also tried this Thank you Answer document.getElementById returns the element (if it exists) or null, not a boolean (true/false). You can simply do if(heading) { ... } as your condition. Here's a snippet based on

change footer size by id

I am trying to run a function that changes the margin-top size according to what is being displayed. However, it doesn’t seem to be working?

<body onload="changeFooter()">

<script>

const heading = document.getElementById('verify'); 
const footer = document.getElementById('footer')


function changeFooter () {
   if (heading == true){
       footer.style.marginTop = "200px"
   }
}

JavaScript
​x
 
<body onload="changeFooter()">
​
<script>
​
const heading = document.getElementById('verify'); 
const footer = document.getElementById('footer')
​
​
function changeFooter () {
   if (heading == true){
       footer.style.marginTop = "200px"
   }
}
​

also tried this

function changeFooter () {
   if (heading.match('Verify')){
       footer.style.marginTop = "200px"
   }
}



</script>


 <h1 id="verify" class="verifyheading">Verify Identity</h1>

JavaScript
 
function changeFooter () {
   if (heading.match('Verify')){
       footer.style.marginTop = "200px"
   }
}
​
​
​
</script>
​
​
 <h1 id="verify" class="verifyheading">Verify Identity</h1>
​

Thank you

Answer

document.getElementById returns the element (if it exists) or null, not a boolean (true/false).

You can simply do if(heading) { ... } as your condition.

Here’s a snippet based on your code: https://codepen.io/29b6/pen/XWZVqWx

Advertisement

Answer