when i use the method getElementsById() method in sublime text and then moving to console page it shows that method is unavailable as i like i attached screenshot below
Hi there @kirthickrubhan123,
i believe the syntax of your code is correct,
its just that in the line below the starting script tag the correct syntax is,
document.getElementById(“output”).innerHTML=“New text”;
I believe with this small correction you will be able to run your code.
thank you for your answer
use getElementById()
Yes it should be getElementById()
Hii @kirthickrubhan123
Method names are case-sensitive and spelling also matters a lot.
As you can observe in your code that you have written getElementsaById() instead of getElementById(). This method name follows camel case(Each word, except the first, starts with a capital letter) which should be taken care off.
5 / 5
getElementsById() is not a valid JavaScript method. The correct method is getElementById(), which is used to get an element from the HTML DOM by its ID.
If you are having issues with getElementById() not working in your Sublime Text editor, there could be a few reasons why. Here are some troubleshooting steps:
- Check the syntax: Make sure you have spelled the method correctly and that you are using the correct capitalization. The method name is case-sensitive and should start with a lowercase “g”.
- Check the HTML document: Ensure that the ID you are trying to access with
getElementById()exists in your HTML document. If the ID does not exist, the method will return null. - Check for JavaScript errors: If there are errors in your JavaScript code, they may prevent
getElementById()from working correctly. Check the console for any error messages. - Check your code structure: Make sure that your
getElementById()method is called within a script tag or an external JavaScript file that is properly linked to your HTML document.
If you are still experiencing issues, try creating a new HTML and JavaScript file from scratch and see if getElementById() works in that document. If it does, then there may be an issue with your current code or file structure.
It should be document.getElementById("output").innerHTML = "new text";
You have made a typo in getElementsById()
There were few syntax errors in your code
Letinstead ofletandwindowsinstead ofwindow
- The
grey gradient.pngimage source has spaces, which should be avoided in file names. - There is a missing closing brace
}for the event listener function. - The
windowsobject should bewindow.
Please try the corrected code below:
<!DOCTYPE html>
<html>
<head>
<title>Purvesh Itankar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<a href="#" class="logo">Purvesh Itankar</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Destination</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section>
<h2 id="text"><span>Welcome to my</span> Portfolio</h2>
<img src="camera.png" id="camera">
<a href="#" id="btn">Explore</a>
<img src="grey_gradient.png" id="grey-gradient"> <!-- Corrected image source -->
</section>
<div class="sec">
<h2>Parallax scroll effect</h2>
<p>
Welcome to my portfolio
</p>
</div>
<script type="text/javascript">
let text = document.getElementById('text');
let camera = document.getElementById('camera');
let greyGradient = document.getElementById('grey-gradient'); // Corrected variable name
let btn = document.getElementById('btn');
let header = document.getElementById('header');
window.addEventListener('scroll', function() {
let value = window.scrollY;
text.style.top = value * -0.5 + '%';
});
</script>
</body>
</html>
Please do try this and let us know. If you still face any issues, please feel free to get back to us.
It should de document.getElementById("output").innerHTML="new text";