Thread
Popular posts
Hey there, happy Saturday.
Your code runs as expected in Edge, Chrome, and Firefox Nightly on Windows 10 when tested here: jsbin.com/jemecixuso/edit
"Teach a man to fish" with Console
What does your console look like? Load up the page you're having trouble with and make your way to the console. The F12 key might do it, otherwise right click the page, click on "Inspect Element" and then click the tab labeled "Console" on the panel that pops up. It'll look something like this:
When and where are your scripts loaded?
Onward to some debugging... there may be an issue with how you are bringing it all together. May I ask how you are currently importing this script into the page shown? If you declare the JS before the document is fully loaded and ready to go, which generally boils down to a simple matter of placement, then your first three lines of JavaScript will fail to select the elements intended because they don't "exist" yet, and your console will in turn reveal some nasty errors akin to the following (also here on JS Bin ):
"TypeError: Cannot read property 'addEventListener' of null [ … ]"
There would be two ways of fixing this problem, if this is even the issue. The easiest in this case would be to position the JavaScript to come after the declaration of your input elements as seen in this other JS Bin example ). Please see my comments in code there.
The onload Event
But let's explore the other option since it's how you will most often want to go about this, or at least I think it's best practice. You can keep your script anywhere you want on the page and still get the results desired IF you perform your declarations only after the elements are loaded. Let's try listening on the body's onload event by assigning our script as a function to be run when the event fires. That would look something like this:
<html>
<head>
<script>
function startup() {
let para = document.querySelector('.para');
let typename = document.querySelector('.typename');
let submitname = document.querySelector('.submitname');
//typename.focus();
function showPara() {
if (typename.value !== '') {
let name = typename.value;
para.textContent = 'Welcome ' + name;
para.style.backgroundColor = 'green';
}
}
submitname.addEventListener('click', showPara);
typename.value='';
}
</script>
</head>
<body onload="startup">
<h1>Login Page</h1>
<div>
<label for="a">Enter Name: </label> <input class="typename" type="text" >
<input class="submitname" type="submit" Value="Submit">
</div>
<div>
<p class="para"></p>
</div>
</body>
</html>
First off, notice the new document structure. Your script goes in head, your elements go in body, and both head and body go under html, a good way to reference your entire document. Beyond that, we have now wrapped your JavaScript in a function called startup which is a name I chose arbitrarily at random.
Study this and think about what's going on here with that onload assignment. Does it make sense? If not, I will link to the appropriate resources. And apologies if I have missed the mark! There may be something totally unrelated that flew straight over my head.
Keep at it! 😎