Search code examples
javascriptdom-events

Checking the text input before triggering event in JavaScript


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>

Solution

  • 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!";
        }
    
    }
    
    1. You were using document.getElementByID on the second line, which is incorrect capitalisation
    2. You were only defining obj conditionally, so the else clause always threw an exception.

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