Basic JavaScript events

Question

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.

Event must not be firing. Missed quotes while assigning function to event in DOM — Anand
– Anand, Commented Dec 29, 2011 at 8:44

AmGates · Accepted Answer · 2011-12-29 08:56:39Z

1

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.

answered Dec 29, 2011 at 8:56

AmGates

2,12316 silver badges29 bronze badges

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

Comments

Anand · Accepted Answer · 2011-12-29 08:43:25Z

0

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

answered Dec 29, 2011 at 8:43

Anand

15k8 gold badges35 silver badges44 bronze badges

Comments

Purag · Accepted Answer · 2011-12-29 08:54:14Z

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');"

Collectives™ on Stack Overflow

Basic JavaScript events

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related