I'm attempting to dynamically adjust the width of certain HTML elements using JavaScript, specifically by utilizing the innerWidth property.
Here is the code snippet I've written:
$(document).ready(function () {
var footer = document.getElementsByTagName('footer')[0];
var header = document.getElementsByTagName('header')[0];
footer.style.width = window.innerWidth - 400;
header.style.width = window.innerWidth - 400;
});
The purpose of using JavaScript to set the widths of the header and footer is to prevent potential overflow issues that could lead to a scrollbar being added.
Below is my accompanying HTML markup:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="img_container">
<a href="#"><img id="header" src="img/Header.png"></a>
</div>
<nav>
<ul>
<li><a href="#">text</a>
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">Text</a></li>
</ul>
</li>
<li><a href="#">Text</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="#"><img id="img" src="img/img.png"></a>
</header>
<footer>
<div id="footer_container">
<div id="footer_el">
<span class="header">Services</span>
<hr> Bunch of links and text
</div>
<div id="footer_el">
<span class="header">Text</span>
<hr> Bunch of links and text
</div>
<div id="footer_el">
<span class="header">About us</span>
<hr>
<a href="#">Some text</a>
<br>Contact us:
<br>Email
<br>Phone number
</div>
<div id="footer_el">
<span class="header">Partners</span>
<hr> Yaadiyaadiyaa
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>Some text...
</div>
</footer>
</body>
</html>
Displayed below is the error message currently appearing in my Google Chrome browser console: