I've read the other examples where toLowerCase is undefined but I still don't understand. Can anyone explain why my function won't work?

var changeTitle = function() {
    var loanTitle = $(this).val();
    $(this).prev().text(loanTitle);
};

<h2>Loan One</h2>
<input type="text" onkeypress="changeTitle()" maxlength="25" />

I've read the other examples where toLowerCase is undefined but I still don't understand. Can anyone explain why my function won't work?

var changeTitle = function() {
    var loanTitle = $(this).val();
    $(this).prev().text(loanTitle);
};

<h2>Loan One</h2>
<input type="text" onkeypress="changeTitle()" maxlength="25" />

• javascript
• jquery

• 1 Are you sure this is the code that's giving that error? toLowerCase isn't even called...??? Anyway, you need to null check variables that you call toLowerCase on. – Barett Commented May 5, 2015 at 2:01
• @Barett Yes that's what pops up and I'm not too sure why. – Frank Commented May 5, 2015 at 2:06

2 Answers 2

In your function, the this object refers to the window and not the input field. Update your onkeypress code to the following:

<input type="text" name="loanName" onkeypress="changeTitle.call(this)" class="loanNameV1 qForms" maxlength="25" placeholder="Loan Name" />

I'm not sure what you really are trying to do, but I passed your input element as a parameter to the function you defined as this and I added the JQuery library to my snippet. It works with the exception that the last key stroked isn't displayed in the title. Maybe you can use this along with your toLowerCase feature and fix it up to your liking.

var changeTitle = function(obj) {
    var loanTitle = $(obj).val();
    $(obj).prev().text(loanTitle);
};

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 class="nameLoan1"> Loan One </h2>
<input type="text" onkeypress="changeTitle(this);" maxlength="25" placeholder="Loan Name" />