CODEWITHSUNDEEP
javascriptdom-events
Charles Murray
Charles Murray

Reputation: 383

Basic JavaScript events

I'm new to JavaScript. Here's my code:

<script>
function text_input_type(type)
{
if(type=='list'){
document.getElementById("note_input").innerHTML="<input type=\"text\" name=\"body\">";
}
else{
document.getElementById("note_input").innerHTML="<textarea id=\"note_input\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>";
}
}

</script>

 <textarea id="note_input" name="body" cols="27" rows="5"></textarea>
 <input type="radio" name="type" value="text" onclick=text_input_type('list') />
 <input type="radio" name="type" value="list" onclick=text_input_type('text') />

I want it so that depending on which radio button you press it changes from a textarea to a input text type. The problem is instead of changing the input from a textbox to a smaller text input it just prints the code inside the box.

Upvotes: 0

Views: 84

Answers (3)

AmGates
AmGates

Reputation: 2123

Hope this helps you in solving your problem. 

 <script>
    function text_input_type(type)
    {
    if(type=='list'){
    document.getElementById("note_input").innerHTML="<input type=\"text\" id=\"note_input1\" name=\"body\">";
    }
    else{
    document.getElementById("note_input").innerHTML="<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>";
    }
    }

    </script>

     <div id="note_input"><textarea id="note_input1" name="body" cols="27" rows="5"></textarea></div>
     <input type="radio" name="type" value="text" onclick=text_input_type('list') />
     <input type="radio" name="type" value="list" onclick=text_input_type('text') />

Try this code, you will get what you want.

Upvotes: 1

Purag
Purag

Reputation: 17061

Bind the click handlers with Javascript too—inline Javascript isn't really necessary:

var elems = [].slice.call( document.getElementsByTagName("input") );
elems.forEach( function( elem ){
    elem.onclick = function(){
        var type = this.value;
        if( type === 'list' ){
            alert("type is list");
        } else {
            alert("type is not list");
        }
    };
});

Example.

I'm aware that this can be a little complicated. What we're simply doing is attaching a click function to each of the input tags on the page. We set the value of the clicked input tot he type variable and check if that variable is equal to the string list. If it is, then we fire the code in the if. If not, we fire the code in the else.

Essentially what this does is make it easier for you. You just put this code in your JS file and you don't have to worry about assigning the onclick on the elements themselves (and it looks you were doing it for two of them).

However, your code will work if you surround the onclick with quotes, like so:

onclick="text_input_type('list');"

Upvotes: 0

Anand
Anand

Reputation: 14915

Your code is correct, except for a small change.

<html>
<body>
<input type="radio" name="type" value="text" onclick="text_input_type('list');" />
<input type="radio" name="type" value="list" onclick="text_input_type('text');" />
<div id="note_input">
</body>
</html>

Should work fine

Upvotes: 0

Related Questions