Passing value to function from html - javascript

I'm trying to pass a value from html to a function but when I do I get an error - reference error: cant find the variable: "var value". The code below I'm removing spaces and replacing them with underscores then trying to pass that to a function called onToDate.
var theFunction2 = theFunction.replace(/ /g,"_");
$('#inserted').append('<div id="'+theFunction2+'"><li onclick="onToDate('+theFunction2+')"><img width="30px" height="25px" src="style/soccer.png"><div id="popupContactClose2">'+counted+'</div></img>'+ rs.rows.item(0)['playing']+'</li>');
onToDate is simply there to alert the value passed to it:
function onToDate(hello){
alert(''+hello+'');
console.log(''+hello+'');
}
This is where I get the error. I don't really get whats happening I've used this before and it worked fine.
Any help would be great,
Thanks

onclick="onToDate('+theFunction2+');
is turning into something like:
onToDate(some_thing);
so in the above case, some_thing is a variable that is undefined, meaning that this is a Reference error.
So,
onclick="onToDate(\"'+theFunction2+'\");
should fix it

First of all #IAbstractDownvoteFactor is right. You should fix onclick definiton.
If this code runs in $(document).ready() block, then your onToDate function is not accesible from that scope. Your click event calls from global scope. You should define it like this;
window.onToDate = function(hello){
alert(hello);
}
And no need for those single quotes...

Related

why does my global variable not carry its value between functions

At the top of my JavaScript document, which is linked to an HTML page, I declared:
var pizzaVar;
Then, I have a function later in the code that sets the variable's value and then calls another function:
function makePizza()
{
pizzaVar = document.getElementById("pizzaDiv").innerHTML;
givePizzaToppings();
}
But when I tried to use pizzaVar in the next function to set the innerHTML of pizzaDiv, nothing happened:
function givePizzaToppings()
{
var toppings = "<p>Onions and Bacon</p>";
pizzaVar = toppings;
}
However, if I changed the last line to
document.getElementById("pizzaDiv").innerHTML = toppings;
it worked. I don't want to have to put that in everytime I want to change pizzaDiv though, is there a way to fix this.
PS: I tried saying
var pizzaVar= document.getElementById("pizzaDiv").innerHTML;
outside of the functions but I got an error message saying:
TypeError: null is not an object(evaluating 'document.getElementById("pizzaDiv").innerHTML')
Your pizzaVar will point to a string value, which will be the HTML at the time of the assignment. It doesn't magically setup a link to change it.
If you wanted to use this global variable, you'd be better off pointing it to the div element and then using innerHTML every time you wanted to change its value.
Then you should research to understand why innerHTML is rarely the best tool to modify the DOM.
Unfortunately, whenever you want to change the .innerHtml of your pizza div, you're going to have to write document.getElementById("pizzaDiv").innerHTML on the left side of an equals sign. pizzaVar is not a pointer, and doesn't point to the .innerHtml of the div.
The error you got is telling you that document.getElementById("pizzaDiv") returned null and hence has no properties at all, much less an .innerHtml property. This is because it did not exist at the time of the .getElementById call.

Converting javascript function to global variable

I've been struggling to convert a JavaScript function to a global variable.
I've got 2 files in total that are basically part of the entire function, here is the JavaScript function.
<script type="text/javascript">
$.get("banner1.php", function(getbannerlink1) {
$("#banner1").load(getbannerlink1+ " #productImage");
// var window.bannerlink1=getbannerlink1; (this doesn't want to work)
});
<script>
Basically banner1.php selects ONE random URL out of an array, and echoes the URL. This JavaScript then gets the URL, and then does a .load() function of that URL and gets the #productImage class from that URL, basically it gets the product image from the random URL. That works all good. Now I need to convert the getbannerlink1 variable to a global variable, because I would like to use the link outside of this function as well.
I've tried using the following just before closing the function:
var window.bannerlink1=getbannerlink1;
but this is just destroying the function altogether :/
What am I doing wrong?
var window.bannerlink1 is a syntax error. var should only be used with variable identifiers, which may not contain a period.
You want to set a property of window, not declare a new variable name, so just drop the var.
Drop the var
window.bannerlink1 = getbannerlink1;
Ideally you would avoid using a lot of globals and use a global namespace to hold the values.

run jQuery function by inline onClick and use function variable/reference

I am very new to this, but I wrote this and thought it would work first time, but I get an 'ReferenceError: Can't find variable: street' console error.
I get this error if I click on the 'Street' button.
It's quite basic but this is the first time I've made a function to use a var/ref from the onClick attribute.
Please see onClick markup...
Supersport
Street
Cruiser
Scooter
Motocross
Enduro
Kids
then please see my function, which gets the ref error above...
Also please note I am trying to use the onClick var/ref within my function so I can target specific elements relative to the button being clicked.
bikeFilter = function (y) {
$('.bike').fadeOut();
scrollTo(186);
$('.bike[data-group=' + y + ']').fadeIn();
bikeSliderNav();
bikeSlider();
return false;
}
Any expert advice would be really helpful.
Thanks in advance.
You'd probably wanna pass a String as input to your function and not the name of an undeclared and uninstantiated variable.
Try to use the single quotes to refer it as a String constant (you need single quotes since you are already using double quotes to tell your html tag the attribute value):
onclick="bikeFilter('scooter')"
Take a look here to see the difference in data typing in js, and here for a quick start about functions.
You should use them like :
onclick="bikeFilter('motocross')"
Don't forget to put ' around your parameters

Is it possible to concatenate a function input to text of another function call?

Firstly appologies for the poor title, not sure how to explain this in one line.
I have this Javascript function (stripped down for the purpose of the question)...
function change_col(zone){
var objects= zone1227.getObjects();
}
I am passing in an integer into the function. Where I have "zone1227", I want that 1227 to be the integer I pass in.
I've tried this;
var zonename = "zone" + zone;
var objects= zonename.getObjects();
but that doesn't work.
Is this possible? The functions do exist for every possible integer passed in, but I was hoping to keep the code compact rather than a long list of if statements with hardcoded function names.
Since zone1227 is apparently a global variable, it can also be written as window.zone1227 or as window['zone1227']. This means that you can achieve what you describe, by writing this:
function change_col(zone){
var objects= window['zone' + zone].getObjects();
}
Nonetheless, I agree with Interrobang's comment above. This is not a good way to accomplish whatever it is that you really want to accomplish. You should not be referring to global variables via strings containing their names.
No, you cannot refer to a variable with the value of a string, nor can you concatenate anything onto a variable name. EDIT: turns out you can. You still shouldn't.
Yes, you can avoid using a long hard-coded if/elseif sequence: use an array.
Then you can say this:
function change_col(arr, i)
{
var objects= arr[i].getObjects();
}
And the call would be something like:
change_col(zone, 1227);

javascript if condition not executing all commands

I'm having one little iritating problem. I have simple if condition in javascript code.
It goes something like this:
if (istinito)
{
alert ('123');
document.getElementById('obavestavanje').value="Pobedi "+ime_igraca+"!!!";
kraj=true;
}
Alert apears when istinito=true, but element with id="obavestenje" never get its value, and variable kraj never is set to true. Variable kraj is global variable, and there are no conflicts with other parts of the JS code.
Any ideas why code stops after alert?
Looks like document.getElementById('obavestavanje') is returning null. You are trying to de-reference the null reference by using document.getElementById('obavestavanje').value which results in null pointer exception. If you look into the console, you should see some exception being raised. It is always a good idea to check if the document.getElementById() is returning a valid object before trying to dereference it.
e.g.
if (istinito)
{
alert ('123');
element = document.getElementById('obavestavanje')
if(element){
element.value="Pobedi "+ime_igraca+"!!!";
}
kraj=true;
}
First advice i could give you:
Use more console logging for debugging. Almost any modern browser got a console to debug and other things.
if (istinito) {
console.log("i am here");
}
from that same console you can also execute commands. Those dom manipulations are easily done from the console. just run them and see if it works.
the code:
document.getElementById('obavestavanje').value = "some value"
looks ok. nothing wrong with it. i guess you don't have an element with id "obavestavanje" ?
Looks like your code is okay. And you are sure you have an element by id 'obavestavanje'. Could you please tell what element is it? Is it a button, textbox or someting like that?
Also the String in the "Pobedi "+ime_igraca+"!!!" , what is 'ime_igraca'? Is it a variable and if it is have you defined this variable somewhere?
Or did you mean to give the value "Pobedi ime_igraca !!!" ??
Thanks
Ranis MK

Categories

Resources