Develop Reference

getElementById(...) returns null unexpectedly

EDITED: I pretty much checked dozens of articles here on this issue, but I simply can't find the problem in my code: The line (commented below) returns null, although I expect it to return the particular element I created and added above.
element2 = document.createElement("button");
element2.innerHTML = "-";
element2.text = rowCounter;
element2.style.backgroundColor = 'white';
element2.id = "kuerzer"+rowCounter; //rowCounter is an iterator variable
ell2.appendChild(element2);
console.log(document.getElementById(element2.id)); //returns null
However, I am now trying to find this element in another function like this:
function structureGantData(){
var gantData = [[]];
for(i=0; i<document.getElementById("myTable").rows.length; i++){
console.log("schleife");
gantData[i][0] = document.getElementById("kuerzer",(i+1)).text; //ISSUE
Could anyone help me? :-)
Thanks alot!
Fabian

You have not added the created element to the DOM, so it cannot be found there.
You may use say Node.appendChild (or any other similar) method to append it somewhere first.

I believe you meant to call document.getElementById("kuerzer" + (i + 1)) rather than document.getElementById("kuerzer", i + 1) in structureGantData.

Recursive Javascript function using callback not working

I am trying to fix a problem with my recursive function JS using a call back. I just want to update the HTML of 3 div using according to an index. Please find the code below
<div id="try0">50</div>
<div id="try1">50</div>
<div id="try2">50</div>
function getNumberOfAnswers(questionID, callback)
{
var value = i*10;
callback( value.toString());
}
var i=0;
getNumberOfAnswers(i, function callFunc(ratio){
var itemToChg = 'try'+i;
document.getElementById(itemToChg).innerHTML = ratio;
if(i<3){
i++;
getNumberOfAnswers(i,callFunc(ratio));
}
});
I didn't put any tags on the code above to simplify but I made a JSfiddle with it. http://jsfiddle.net/cyrilGa/zmtQ8/ . On the third line from the end, I tried to write getNumberOfAnswers(i,ratio); but it didn't work.
Can somebody help me with this
Cheers

The line:
var value = i*10;
should be
var value = questionID * 10;
And I think
getNumberOfAnswers(i,callFunc(i));
Should be:
getNumberOfAnswers(i,callFunc);

Do not use recursion for this, it is silly.
for ( var i = 0; i < 3; i++ ) {
document.getElementById('try' + i).innerHTML = i * 10;
}
Is this what you want?

You need to replace the recursive callFunc(ratio); at the bottom to callFunc(i); because the argument ratio is still equal to 0 while you increment i. Everything else is fine.

Finding value from a hidden field

I am adding value in my webpage as hidden like this:
cell.append('<input type="hidden" class="isTestValue" value="' + bill.IsTestBill + '">');
Now I wrote to get this value:
function getIsTestId(billIndex) {
var selectedRow = getSelectedRow(billIndex);
var lastCol = jQuery(selectedRow).find('TD:last');
return (lastCol.find('INPUT:hidden.isTestValue).val());
}
However, in my function when I am calling this getIsTestId:
var testId= getIsTestId(billIndex);
In testId the value is undefined. What am I doing wrong here?
PS: How should I check my isTestValue in immediate window?

You are missing a single quote in this line return (lastCol.find('INPUT:hidden.isTestValue).val());, try this.
return lastCol.find('input.isTestValue').val()

Looks like a minor typo, missing semicolon, in return statement, there might be other issues, but try this first...
function getIsTestId(billIndex) {
var selectedRow = getSelectedRow(billIndex);
var lastCol = jQuery(selectedRow).find('TD:last');
return lastCol.find('INPUT:hidden.isTestValue').val();
}

You have an unclosed quotation in this line:
lastCol.find('INPUT:hidden.isTestValue');
And as another answerer pointed out, I think it's supposed to be:
lastCol.find('input.isTestValue').val();

Dynamically create variable in JavaScript function

I cannot get this to work:
function formvalidation()
{
var SiteNum= document.getElementsByName("sitesinput")[0].value;
var i=1;
while (i<=SiteNum)
{
var SitePhone= document.getElementsByName(site['i'])[0].value;
alert(SitePhone);
i++;
}
}
If I alert like so: alert('document.getElementsByName(site["'+i+'"])[0].value'); it will display the following:
document.getElementsByName(site["1"])[0].value
document.getElementsByName(site["2"])[0].value
document.getElementsByName(site["3"])[0].value
But I cannot get it to go into a variable.
Thanks for looking,
B.

Try replacing the line
var SitePhone= document.getElementsByName(site['i'])[0].value;
for
var SitePhone= document.getElementsByName(site[i])[0].value;

Remove the quotes from i. Use a for loop since it fits the use case better than a while loop.
function formvalidation()
{
var SiteNum= document.getElementsByName("sitesinput")[0].value,
SitePhone;
for(var i=1; i<=SiteNum; i++)
{
SitePhone = document.getElementsByName(site[i])[0].value;
alert(SitePhone);
}
}
Also, JavaScript does not have block-level scoping, only function-level.
I like this solution, however it wont work without the quotes (") i.e. if do everything the same, but put the name in myself, like ("site[1]") - it will work.
I see where you're headed now.
SitePhone = document.getElementsByName('site[' + i + ']')[0].value;

You are putting quotes around the i in the line
var SiteNum = document.getElementsByName(site['i'])[0].value
which is looking for the element keyed by the string 'i' instead of the value of the variable i. Try removing the quotes.

Try
alert(document.getElementsByName(site[i])[0].value);

for loop inside jquery function

I am trying to repeat something inside a jquery function. I tried a for loop, but it seems it doesnt like the syntax.
for instance i have the variable
var number = 2;
now i have
$('tr').html('<td id="'+number+'"></td>');
what i want to do is loop from 0 to number (0,1,2) so that in the end i end up having 3 .
Thanks

There is probably a better way, but this should work.
var loops = [1,2,3];
$.each(loops, function(index, val) {
$('tr').html('<td id="myCell' + index + '"></td>');
});
This should also work (regular JS):
var i;
for(i=0; i<3; i++) {
$('tr').html('<td id="myCell' + i + '"></td>');
}
Note how i prefixed id with the word 'myCell', to ensure XHTML compliancy. (thanks to #Peter Ajtai for pointing that out).
EDIT
I just noticed another problem - you're using the .html function to add the cells. But .html replaces the entire html of the matched element. So you'll only ever end up with the last cell. :)
You're probably looking for the .append function:
$('tr').append('<td id="myCell' + i + '"></td>');
EDIT 2 -- moved the double quote before myCell rather than after.

Heres an option using an anonymous function.
$('TR').html(
function(){
var content='';
for (var i=0; i<=2; i++ ){
content=content+'<td id="id_'+i+'"></td>';
}
return content;
}
)

This works for me:
loop.forEach((amount) => {
// your code
}