Checking the text input before triggering event in JavaScript

Question

I am trying to create a text-based adventure game. I managed to figure out how to make text output in html's textarea through simple onclick button, but now I am trying to do something new. I am having trouble with doing same thing but with input text where users can write anything in the box and then click on the button. Right now, I am trying to make this program to check the user input against some flag (in this case, I set my flag equal to 'pizza') before it does something. Unfortunately, my code doesn't work at all. I think I don't completely understand how the input is being passed around in JavaScript's functions.

The JavaScript part:

function record(test) {
            var input = document.getElementById('filename');
            fileName = input.value;
            if (fileName == "pizza") {
            var obj=document.getElementById(test);
            obj.value="is this showing up in the textarea???"; 
            }
                        else {obj.value="wrong password!"; }
 
        }

The html part:

<input name="filename" id="filename" type="text">

<a id="record_button" onclick="record('textarea1');" href="javascript:void(0);" title="Record">Perform Action</a>

<textarea wrap="virtual" cols="73" rows="10" id="textarea1"></textarea>

Maybe this is only a typo in your post, but document.getElementByID('filename'); should be document.getElementById('filename');. — Teemu
– Teemu, Commented Nov 30, 2012 at 17:15
if (fileName == pizza) Do you have pizza declared outside the function or are you trying to do a string comparison? — Snuffleupagus
– Snuffleupagus, Commented Nov 30, 2012 at 17:16
ooh, I meant to make pizza as a string. "pizza". I think that might be the problem. — user1142285
– user1142285, Commented Nov 30, 2012 at 17:18

Snuffleupagus · Accepted Answer · 2012-11-30 17:23:59Z

2

The problem is this block with your else statement, obj isn't declared. Because you have obj defined in the if statement above it is exclusive to that scope. Just define obj right above the if block.

--

function record(test) {
    var input = document.getElementById('filename');
    fileName = input.value;
    var obj=document.getElementById(test);
    if (fileName == "pizza") { 
        obj.value="is this showing up in the textarea???"; 
    }
    else {
        obj.value="wrong password!";
    }
}

answered Nov 30, 2012 at 17:23

Snuffleupagus

6,8053 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1142285 Over a year ago

Thank you! It works now! Sorry, someone else answered this before you. =(

user1726343 · Accepted Answer · 2012-11-30 17:23:34Z

Add an event listener using JS:

document.getElementById('record_button').onclick=function(){
    record('textarea1');
}

Also, there were a couple things wrong with your function. Here it is with corrections:

function record(test) {
    var input = document.getElementById('filename');
    fileName = input.value;
    var obj = document.getElementById(test);
    if (fileName == "pizza") {
        obj.value = "is this showing up in the textarea???";
    }
    else {
        obj.value = "wrong password!";
    }

}

You were using document.getElementByID on the second line, which is incorrect capitalisation
You were only defining obj conditionally, so the else clause always threw an exception.

Here is a demonstration: http://jsfiddle.net/uQpp7/1/

Collectives™ on Stack Overflow

Checking the text input before triggering event in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related