beginner attempting to use Focus / Blur: JavaScript

Question

I'm trying to complete a homework assignment for a web development class and can not figure out what I am doing wrong here. I am following examples in my text book, but unfortunately they do not appear to be intuitive to the nature of this assignment. What I'm trying to accomplish is to have a user enter something into a form and then be able to capitalize the whole sentence whenever the form loses focus and then convert it back to lower case whenever it gains focus.

I've done searches for this, and everything I've come across appears to be much more complicated then what I'm trying to do; I need a simple example so that I can then make sense of it and, you know, actually learn it.

Below is what I have so far. I've been using chrome and firefox. One error that firefox keeps giving me is that "string1.toLowerCase()" is not a function, though I'm sure I've used it before.... and I took it right out of my text book.

 <html>
      <title>Project 13 - JavaScript Events</title>
      <script type="text/javascript">
         <!--

          function start() {

              capitalizeInput();
              lowercaseInput();

          }


         function capitalizeInput() { 

            // I imagine this should basicaly look the same as the "lowercaseInput" function, except with blur instead of focus

         } // end function capitalizeInput

         function lowercaseInput()
         {
             var string1 = "";
             string1  = document.getElementById('inputVal')
             var lowerCaseString = string1.toLowerCase();
             documnet.getElementById('inputVal').addEventListener("focus", function () { document.getElementById('inputVal').innerHTML = lowerCaseString }, false); 

         } // end function lowercaseInput

         window.addEventListener("load", start, false);


      </script>
   </head>
   <body>
      <form action="">
         <p>Enter a sentence and click outside the text entry box to capitalize all the letters.
         </p><p>Click in the text entry box to un-capitalize all the letters.<br><br>
         <input id="inputVal" type="text" size="60">
      </p></form>

      <div id ="something">This does something, maybe... </div>

</body></html>

the "div Id" was just a test. I actually want this to display everything in the "inputVal" Id. When I'm done, "something" will not be a part of this.

any help would be appreciated

Answer 1

Take a look at this example I drew up for you. I think you're making it too complicated. When you add that event listener to the 'window' object, what you're saying is that when the window loads, the browser should run the start function, which in turn runs the other two functions.

What you really want to do is just register the event listeners to your input like such:

document.getElementById('inputVal').addEventListener("focus", capitalizeInput, false);
document.getElementById('inputVal').addEventListener("blur", lowercaseInput, false);

Here you are binding the 'focus' event on the input box to the function capitalizeInput , and the 'blur' event to lowercaseInput . Then all you have to do is manipulate whatever is in the input.

The thing that you did wrong in your original function is here:

string1  = document.getElementById('inputVal')

What you've done is assign string1 to the element, not the text value. If you do a console.log(document.getElementById('inputVal')) you will see that the result is an object, not a string. If you want the value of an input then you can use document.getElementById('inputVal').value (as in my linked example).

beginner attempting to use Focus / Blur: JavaScript

Question

1 answers

solution1
1 ACCPTED 2013-12-01 19:14:26

beginner attempting to use Focus / Blur: JavaScript

Question

1 answers

solution1 1 ACCPTED 2013-12-01 19:14:26

solution1
1 ACCPTED 2013-12-01 19:14:26