Develop Reference

Passing function to innerHTML method

Hi guys very new to JS and i've been working on this simple thing for too long trying to understand JS basics. Please help me out;
I have an empty H1 element that I want to fill with content using JavaScript.
I want the H1 header to contain a name from the array and display the "Hello" message.
What I want is something like:
innerHTML = greet(names[0]) for the H1 header. Im missing something trivial in understand how this is working any help would be appreciated.
names = ["Jan", "Klaas", "Piet"];
name = namen;
function greet(name){
console.log("Hallo " + name.toLowerCase());
}
document.querySelector('h1').innerHTML = greet(names[0]);
document.querySelector('h1').innerHTML = greet(names[0]); returns as "Undefined" in the H1 Element

As of now you are not returning anything from you method thus getting undefined,
You need to return value from the method.
function greet(name){
return "Hallo " + name.toLowerCase();
}

The function should return the string.
function greet(name){
return "Hallo " + name.toLowerCase();
}

There are a few things to sort out here. You dont appear to be using the namen variable so remove the second line.
You could also declare the variable names when assigning it a value.
The greet function needs to return a value rather than log to console.
var names = ["Jan", "Klaas", "Piet"];
function greet(name){
return "Hallo " + name.toLowerCase();
}
document.querySelector('h1').innerHTML = greet(names[0]);
see the codepen here

You need to return the string, like this:
names = ["Jan", "Klaas", "Piet"];
function greet(name){
return ("Hallo " + name.toLowerCase());
}
document.querySelector('h1').innerHTML = greet(names[0]);
console.log() logs the string in the browser console in the Developer Tools (shown by pressing F12). You need to return the value to assign it to the innerHTML, like i've shown above.
You also don't need to do the assignment name = namen, because name is just an alias for the value names[0] that you're passing into the function greet(). If you're doing this for use elsewhere then you'd be better off using a different variable name than name because otherwise this will cause confusion later on and potential conflicts.

You don't need "name=namen".
You have to return some values from function.

how do I pass count integer into a function?

Here is where I set up my var adultOptions and in this var you will see name="adult'+i+'Name" /> I want that i to be the loop number you see below.
Any ideas?! Thank you
var adultOptions =
'<input type="text"'+
'placeholder="First & Last Name"'+
'required name="adult'+i+'Name"/>'
$('#adults').on('change',function(i){
numberAppend = $('#adults').val();
for(i=0; i<numberAppend; i++){
$(adultOptions).appendTo('#adultOptions');
}
});

You are nearly correct with your method. What you are lacking is, maybe the knowledge that a function can be stored in a variable in javascript.
So, now with this knowledge, you can make adultOptions point to a function, like this:
var adultOptions = function(i) {
return '<input type="text"'+
'placeholder="First & Last Name"'+
'required name="adult'+i+'Name"/>';
}
and, then use it like this:
$('#adults').on('change',function(i){
numberAppend = $('#adults').val();
for(i=0; i<numberAppend; i++){
$(adultOptions(i)).appendTo('#adultOptions');
}
});

Your string is being defined outside of your for loop (where i is being defined). Put it inside and you should be good.

Javascript innerHTML out of scope issue?

I was wondering why the following jsfiddle does not work. And if there is anyway for it to work. Any ideas would be appreciated. I would think since the html would include the variable name at the time, that it would work ... but it doesnt. Weird. I am using firefox, latest build.
What should happen: onclick should alert!
http://jsfiddle.net/VqA9g/125/

Your method call needs to quote the list_name.
Here's the edited script that works:
function example() {
for ( var i = 0; i < list.length ; i++ ) {
var list_name = list[i];
var div = document.getElementById('testing');
div.innerHTML += "<txt onClick=\"test('" + list_name + "');\">" + list_name + "</txt><br>";
}
}
With this little change, I can see the alerts working.

You forgot to enclose the words in quotes. So with your code it was passing as a variable, that was not defined. Here is an updated version:
http://jsfiddle.net/VqA9g/131/

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

javascript - basic onclick event question

I have a dynamic table populated from an array.
When building the table I have the following inside of a loop:
var tdRecord = trRecord.insertCell(trRow.cells.length);
var tdRecordId = dataArray[j][0];
tdRecord.onclick = function() { alert(tdRecordId); }
The problem is that alert will only alert the last set tdRecordId in the array. If I click on any of the other td rows they all alert the same number.
Anyone know how I can fix this?

This should work:
(function( id ) {
tdRecord.onclick = function() {
alert( id );
};
}( tdRecordID ));
You seem to be running your code inside a loop. In that case, all click handlers will point to the same tdRecordId value. If you want to capture the value of the current iteration, you have to use a function wrapper which will do that for you.

tdRecord.onclick = function () { alert('123'); };

You could use jQuery's data feature: http://jsfiddle.net/zRXS6/.
$(function(){
var number = 1;
var div1 = $('<div>a</div>');
div1.data('number', number);
div1.click(function() {window.alert($(this).data('number'))});
number = 2;
var div2 = $('<div>b</div>');
div2.data('number', number);
div2.click(function() {window.alert($(this).data('number'))});
$('body').append(div1).append(div2);
});

tdRecord.onclick = "alert(" + tdRecordId + ")";
Set it as a literal, rather then a dynamic. :)
In what you're doing, it will always refer to the variable, rather then the current value.
So as the variable changes, what the function alerts will change.
In this, it actually inserts the value, rather then the variable itself, so it will stay the same instead of changing.