change footer size by id-CodePudding

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 onl oad="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" >Verify Identity</h1>

Thank you

CodePudding user response：

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

CodePudding user response：

Let put line code of <h1> before your script tag, heading will null if not define yet:

<body onl oad="changeFooter()">

 <h1 id="verify" >Verify Identity</h1>
 <div id="footer">Footer with marginTop</div>

<script>

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


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

</script>