Hosted Project
GitHub Source Files
https://github.com/JS-Beginners/word-count-tool
Project Objective
This project uses JavaScript to create a word length calculator. After you type in a given word, the calculator outputs its length.
JavaScript Used
- eventListeners()
- DOM manipulation
My Personalize Summary
This project, like the previous few projects were also pretty basic and beginner projects, if you don't get caught up like me.
After taking one look at the project overview, I just knew that it would take me only a few minutes of coding.
Boy was I wrong.
Two hours later, I found myself searching on Google and going through old courses to try to determine why my code didn't seem to work.
New Things Learned or Refreshed
As a JavaScript programmer, there are some things that we must understand about the language, else we'll have a hard time.
Today, I learned why my variable in my callback function appeared to not store the value from my input field.
Here is the JavaScript code I first created:
let word = document.getElementById('str').value;
let count = word.length; let outputDiv = document.getElementById('output'); let button = document.getElementById('btn');
button.addEventListener('click', function(){ outputDiv.innerHTML = `<h1>${count}</h1>`
})
It worked, but my output kept returning 0 as the output.
Then, I finally realized why, or at least why I think so.
Turns out it has more to do with JavaScript's Execution Context than anything.
Here is the code that works, which you'll find in my github repository:
let button = document.getElementById('btn');
button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');
outputDiv.innerHTML = `<h1>${count}</h1>`
});
Turns out that in my first code, when the eventHandler() ran (i.e. the function AFTER the button was clicked), it didn't function correction because the variable word was continually initialized to an empty string (“”).
This made the count of word.length = 0.
Which is why my code kept outputting a 0.
After carefully study of the first code, when the button is clicked, the program executes this line first:
outputDiv.innerHTML = `<h1>${count}</h1>`
When this line is ran, count is going to always be 0 because this line was never ran:
let word = document.getElementById('str').value;
Meaning, when the button was clicked, the variable word didn't see the value in the input.
It only saw the value of the empty string!
Time to Code
This project took me two hours to complete on my own.
It took 5 minutes to code but another 1 hour and 55 minutes to debug.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Word Length Calculator in action.
Leave a Reply