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"
}
}
also tried this
function changeFooter () {
if (heading.match('Verify')){
footer.style.marginTop = "200px"
}
}
</script>
<h1 id="verify" class="verifyheading">Verify Identity</h1>
Thank you
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
Let put line code of <h1> before your script tag, heading will null if not define yet:
<body onload="changeFooter()">
<h1 id="verify" class="verifyheading">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>