Pass a parameter to existing onClick JS function - javascript

Very basic question, but how can I add/populate a parameter to the onClick function of an HTML element?
<a onClick="someFunction()" id="testLink">Some function</a>
//PSEUDO CODE
var someFunctionParam = document.getElementById('testLink');
someFunctionParam.addParameter(someParam);
Obviously "addParameter" isn't a valid method in Javascript, can anyone guide on how to do so?

The best way in my opinion is to rewrite you JS to something like this:
<a onclick="aNewFunction()" id="testLink">Some function</a>
function aNewFunction() {
// Invoke your existing function here;
someFunction();
//PSEUDO CODE
var someFunctionParam = document.getElementById('testLink');
someFunctionParam.addParameter(someParam);
}

Best way I would think of is
$(function () {
var parameter='Joe Root';
var functionName = $('#testLink').attr("onclick");
$('#testLink').attr("onclick",
functionName.replace('()', "('" + parameter + "')"));
alert($('#testLink').attr("onclick"));
});
function someFunction(name) {
alert("Hi " + name);
}
As, you can see, this works http://jsfiddle.net/hXpSN/1/

Related

Javascript Help Passing Data via URL

Hi I wonder if someone could help me with this small issue I have the following code which I need to modify.
<script type="text/javascript">
function code(id) {
$('#myStyle').load('myphp.php?id=' + id);
}
</script>
I need to pass another variable into this code and add it to the GET part of the URL for example above it will include the URL myphp.php?id=124545
I want to add a second variable called num to the URL part but am confused what the code will need to become to make the correct post via GET
<script type="text/javascript">
function code(id,num) {
$('#myStyle').load('myphp.php?id=' + id); // how do I add the &num=124 for example
}
</script>
Thanks in advance
Simple. Use:
$('#myStyle').load('myphp.php?id=' + id + '&num=' + num);
Reference: http://www.quirksmode.org/js/strings.html#conc
Hope it helps!
Concatenate "&num="+num onto the string you already have:
<script type="text/javascript">
function code(id,num) {
$('#myStyle').load('myphp.php?id=' + id + "&num=" + num); // how do I add the &num=124 for example
}
</script>

Display a div on pageload

I am passing div name in the query string from one html page and retrieving that div name on the other html page. Now I want to display that specific div on the page.My code is
function onLoad()
{
var divname=window.location.search.substring(1);
document.getElementById(divname).style.display="block"; //error is in this line
}
But I am getting an error as "object expected". please help me
The window.location.search property returns the part of the URL that follows the ? symbol, including the ? symbol.
So for example it might return ?paramname=paramvalue. When you call substring(1) on it you get paramname=paramvalue which is what gets passed to the document.getElementById function which obviously is wrong because such element does doesn't exist on your DOM.
You could use the following javascript function to read query string parameter values:
function onLoad() {
var divname = getParameterByName('divname');
document.getElementById(divname).style.display = 'block';
}
This assumes that you have a query string parameter name called divname:
?divname=some_div_name
Adjust the parameter passed to the getParameterByName function if your query string parameter is called differently.
You might also want to introduce error checking into your code to make it more robust:
function onLoad() {
var divname = getParameterByName('divname');
var divElement = document.getElementById(divname);
if (divElement != null) {
divElement.style.display = 'block';
} else {
alert('Unable to find an element with name = ' + divname);
}
}
What I am suggesting is place your js at the end of the html code (before </body> tag). Do not use a function.
<html>
...
...
...
<body>
...
...
...
<script>
var divname=window.location.search.substring(1);
document.getElementById(divname).style.display="block";
</script>
</body>
</html>
I have re-written my function and it is working, code is like this
function load()
{
var divname = window.location.search.substring(1);
var params=divname.split('=');
var i=1;
alert(params[i].substring(0));
document.getElementById(params[i].substring(0)).style.display='block';
}

Adding javascript variable to hyperlink within script

I have been trying to create a hyperlink using a variable defined earlier in the same function to append:
var NAMEVARIABLE = responseArray[i].Name;
var TITLE_Game = document.createElement("p");
TITLE_Game.className = "TITLE_Game";
TITLE_Game.innerHTML = "<a href='Game_NAMEVARIABLE.html'>Games</a>";
I have tried the following using the solution found here: Passing Javascript variable to <a href >
Games
But that didn't work. I then tried adding an ID:
<a id="link" href="Game_.html?propid=">Games</a>
And adding this to the script: document.links["link"].href += NAMEVARIABLE;
This didn't work either. These links are occuring within Isotope, which I've run into newbie-problems making sure my JSON data is loading before the script executes. That's all working now, but I'm not sure if the reason the above methods aren't working is because of a similar issue, or if they simply are not the proper way to go about this.
Any help is much appreciated. Thank you
first of all, try debug your variable :
var NAMEVARIABLE = responseArray[i].Name;
alert(NAMEVARIABLE);
is it returning the desired return value or not.
and then the second thing, in your first style of script, try this instead :
TITLE_Game.innerHTML = "<a href='Game_"+NAMEVARIABLE+".html'>Games</a>";
I assumed you have (static) html collection with game_[number_id].html format
and if it's so, you can try further with your second style of script, and change it to this :
Games
you need to learn further about javascript strings concatenation
Use string concatenation to build up your inner html string.
Example:
var nameVariable = 'Foo';
var innerHtmlText = nameVariable + 'bar';
$('#someElement').html(innerHtmlText);
The contents of someElement will then contain the text: 'Foobar';
You just need string concatenation. modify link's href onclick would be considered as spam in most modern browser.
<div id="result">
the result:
</div>
<script type="text/javascript">
var name = "foo_bar";
var url = "page.html?key=" + name; //or.. "page_" + name + ".html";
var link = 'link here';
$("#result").addClass("g_title");
$("#result").append(link);
</script>
This can be achieved by either (i.e. pure JS or jQuery) ways without much hassle. Suppose you have this <a> element with some href
<a id="Link" href="/collection/categories/">Games</a>
Pure JavaScript way:
window.onload = function() {
var link= document.getElementById('Link'),
url = link.href + responseArray[i].Name + '.html';
link.setAttribute('href', url);
}
Using Jquery:
$(function(){
var link= $('#Link'),
url = link.attr('href') + responseArray[i].Name + '.html';
link.attr('href', url);
});

Replacing function contents dynamically in JavaScript

How do you completely replace a function in JavaScript?
I got this code, but it doesn't work. The DOM gets updated, though. What's up with that?
<html>
<head>
<script id="myScript" type="text/javascript">
function someFunction() {
alert("Same old.");
}
</script>
</head>
<body>
<input type="button" onclick="someFunction();" value="A button." />
<script>
function replace() {
var oldFunctionString = someFunction.toString();
var oldContents = oldFunctionString.substring(oldFunctionString.indexOf("{") + 1, oldFunctionString.lastIndexOf("}") );
var newCode = "alert(New code!);";
var newFunctionString = "function someFunction(){"+newCode+"}";
var scriptTag = document.getElementById('myScript');
scriptTag.innerHTML = scriptTag.innerHTML.replace(oldFunctionString,newFunctionString);
}
replace();
</script>
</body>
</html>
JSfiddle here
Setting .innerHTML doesn't re-execute a script. If you really wanted to do that, you'd have to create a new script element and append it to the DOM, which then overwrites what the previous script has done (not possible in all cases, of course).
If you want to replace that function, just use
somefunction = function() {
alert(New code!); // syntax error, btw
};
Of course, to replace only parts of the code (not knowing all of it) you could try regex and co. Still just reassign the new function to the variable:
somefunction = eval("("
+ somefunction.toString().replace(/(alert\().*?(\);)/, "$1New code!$2")
+ ")");
It seems you are trying to work with strings, not the function itself. Just do this instead:
someFunction = function () { /* your function code here */ }

Why does this Javascript work in Firefox, but not Internet Explorer?

<img src="images/butAdd.png" onclick="addField(1,1);" />
<div id="divField"></div>
<script type="text/javascript">
function addField(count, type) {
var bid = document.getElementById("bid").value;
$("#divField").append("<a href='#' onClick='javascript:removeField(\"#bow" + bid + "\"); return false;'><img src='images/closeSmall.png' /></a>");
}
function removeField(bid) {
$(bid).remove();
}
</script>
Consider this Javascript code that works fine in Firefox, but not in Internet Explorer.
The function addField() works, but removeField() does not.
Any ideas on why this wouldn't work, or any workarounds?
Try this one.
function addField(count, type) {
$("#divField").append("<a href='#' onClick='javascript:removeField(); return false;'><img src='images/closeSmall.png' /></a>");
}
function removeField() {
$("#bid").remove();
}
onclick event should not have 'javascript:' in front of code. Such string should be only when you use 'href=' to put JS code.
I think it is do with the variable called 'bid'. The value for the variable is assigned only when you are calling the addField() and it is local to that method.
In removeField() the value for 'bid' is undefined, that is why it is not working.
Try changing the removeField() like this
function removeField() {
var bid = document.getElementById("bid").value;
$(bid).remove();
}
Your addFiled can look like:
$("<a href='#'><img src='images/closeSmall.png' /></a>").appendTo("#divField")
.click(function() {
$("#bid").remove();
})
try changing:
var bid = document.getElementById("bid").value;
to
var bid = $("#bid").val();
I think there is a quirk in the way IE does the .value vs firefox

Categories

Resources