Develop Reference

Using variables in javascript to reference html elements dynamically

I am trying to use jQuery / javascript to remove a class from a named input element if a checkbox is ticked.
I have several checkboxes, each with a accompanying hidden (on page load) text input field.
The checkbox and text input field are named "question_X" and "question_X_description" respectively. (where X is a number 0 to 100, say)
As such I'm trying to define a variable in my code that is defined as "this element's name"+"_description", and then use that to define the suitable element to remove the class from.
Here is what I've tried:
$('input:checkbox').change(function(){
var x = $(this).attr('name').'_description';
if($(this).is(":checked")) {
$('input[name="x"]').removeClass("hidden");
} else {
$('input[name="x"]').addClass("hidden");
}
});
However, nothing happens when the any checkbox is checked. Am I referencing my variable correctly?

Use your console, It will have error messages.
First issue
var x = $(this).attr('name').'_description';
^^^
That is not how you build a string in JavaScript. JavaScript does not use . to join strings. It uses +
var x = $(this).attr('name') + '_description';
Second issue
$('input[name="x"]').
You are not looking for the string you built, you are looking for an element with the name x
Needs to be
$('input[name="' + x + '"]').

$('input[name="x"]').removeClass("hidden");
Will be looking for:
<input name="x" />
Try
$(name="'+x+'").removeClass("hidden");

Use document.getElementById('element_name')
Example of HTML element:
<input type="text" id="element_name">

Create an input field using pure Javascript

Im trying to create such element only with JS:
<input type="text" value="default">
To do so, I tried this code:
var mi = document.createElement("input");
mi.type= "text"
mi.value = "default"
But when I run it in Chrome Dev Tools, it only creates this element:
<input type="text">
What am I missing?

Setting a property of a HTMLElement isn't exactly the same as setting it's attribute to the same thing.
You most likely wanted to use element.setAttribute
var mi = document.createElement("input");
mi.setAttribute('type', 'text');
mi.setAttribute('value', 'default');
Now you can see
new XMLSerializer().serializeToString(mi);
// "<input type="text" value="default">"
In your example, the value displayed by the <input> will still be default, it just isn't set as the attribute.
Further note that if the user changes the value of <input>, e.g. types into it, setting the attribute will not change the value any longer, but setting the value property will still change it. Again, this is because an attribute is different to a property.

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");
i.setAttribute('value',"default");

I think you are missing the ; after "text".

cannot see the changed value of a jquery cloned input

I have the following html code
<div class="span4 child_age_box">
<input class="child_age_input" value="2">
</div>
And following jquery which I want to clone and append the block when an event is triggered.
var child_value_input= $('.child_age_input');
var add_box = function (){$('.child_ages').on("change",function(){
$(this).parent().parent().parent().find('.child_age_box').empty();
for(var i= 0; i< parseInt($(this).val()); i++){
$(this).parent().parent().parent().find('.child_age_box').append(child_value_input.clone().show().get(0).outerHTML)
}});
It seems ok , when I trigger the event. The box appears and I can put some value in it. But when I ask for the $('.child_age_input'). I can not see the value that I put in the text box. Is there something I am missing?

Don't trust the outerHTML, get the actual value with .val() instead. If the value attribute is 2 in the source code, the outerHTML will still show 2 even if you change it (at least in Chrome):
var fld = $('.child_age_input');
fld.val('3');
$(document.body).append(fld.clone());
$('.child_age_input').each(function(){
console.log(this.outerHTML, $(this).val());
// 2x <input class="child_age_input" value="2"> 3
});
http://jsfiddle.net/HQsrQ/

I am thinking this is causing the error
$(this).parent().parent().parent().find('.child_age_box').empty()
you are calling empty() so the child_age_input element is removed from the DOM
on another note instead of parent().parent() so on you can use closest()

Why does someInputElement.type = 'button'; fail in IE?

I'm stuck trying to get the following javascript to work in IE:
var lastMonthBn = document.createElement('input');
td.appendChild(lastMonthBn);
lastMonthBn.value='<';
lastMonthBn.type = 'button'; // Fails in IE
lastMonthBn.setAttribute('type','button'); // Also fails in IE
For some reason, i cannot set the input to a button, it fails. Works in chrome and firefox. So i'm a little confused and haven't had any luck trying to get it working.
I've isolated it to those lines by using alert()'s.
Thanks a lot

For IE, you need to set up the button first, before adding it to the document. I.e.:
var lastMonthBn = document.createElement('input');
lastMonthBn.value='<';
lastMonthBn.type = 'button';
td.appendChild(lastMonthBn); // put this last

Would this be the reason? From: http://msdn.microsoft.com/en-us/library/ms536389(v=VS.85).aspx
You must perform a second step when you use createElement to create the input element.
The createElement method generates an input text box, because that is the default input
type property. To insert any other kind of input element, first invoke createElement for
input, and then set the type property to the appropriate value in the next line of code.

Can't get document.getElementById.getElementsByTagName to work properly

function confirm_results(theform) {
var inputsX = document.getElementById(theform).getElementsByTagName('textarea');
for(var iX = 0, nX = inputsX.length - 1; iX < nX; iX++)
{
text += inputs[iX].innerHTML + ', ';
}
return text;
}
Can anyone tell me why this isn't working? I'm trying to find all of the textarea's inside a DIV that I pass the name through, and return the text. Some reason it just doesn't do anything.

innerHTML is not the right way to read a textarea's value.
Partly because any < or & characters in it will be HTML-escaped, but mostly because the text node content inside an HTMLTextAreaElement node is not indicative of the current value of the textarea.
In fact the text node content is the original content of the textarea as seen in the HTML source. This is the same as the defaultValue property. It does not get updated when you type in the textarea... except in IE which as usual gets it all wrong.
You probably want to use inputs[iX].value instead.
The same goes for normal inputs, where input.value represents the current value but input.getAttribute('value') is the same as input.defaultValue, representing the original value put in the value="..." attribute in the HTML source. Again: except in IE due to more bugs.
The same again applies to the checked and selected properties of checkboxes and select options: the checked and selected attributes are the original values reflected in the defaultChecked and defaultSelected properties.
Also, with the length-1 you're ignoring the last textarea in the list. Do you really mean to do that?