Develop Reference

Javascript function falling out of Scope? "X is not a function" "X is a "" "

I have a JS function that is called on click that passes a string, and the first button works, however all subsequent buttons give me the error
action is not a function (In 'action("upvote")', 'action' is "")
Where action is the name of the function and upvote is the passed variable.
Using inspect element shows me the two buttons are identical, here is what they look like
<button type="button" onclick="action('upvote')">Like</button>
The weirdest thing is the button right before it calls a function as well and that work properly for all buttons not just the first one
<button type="button" onclick="fun(84)">Reply</button>
I checked and I am not forgetting to close any divs or buttons
The only thing I can think of is that I am echo these through a recursive php function, I don't think JS functions have scope, but I don't see why the first button work but not subsequent
Please let me know if more code is needed
The below code is my print function for the parent divs
echo
"<div class='parent' style='margin-left:".$width."px'>".$x['comment']."
<div class='actions'>
<button type='button' onclick='fun($ran)'>Reply</button>
<button type='button' onclick='action(\"upvote\")'>Like</button>
<button type='button'>Dislike</button>";
//Reply Like and Dislike are all actions every user gets, here I check which user it is to see if they can see the edit/delete
//Normally I would check for admin rather than id == 2, but there is only 1 admin and he id 2
if(($comment['userid'] == $_SESSION['id']) || $_SESSION['id'] == 2){
echo "<button type='button'>Edit</button>
<button type='button'>Delete</button>
</div>";//Close of actions div
}
else{
echo"</div>";//Close of actions div
}
$uname = mysqli_fetch_assoc($db->query("SELECT username FROM users WHERE id = ".$comment['userid']." "));
echo"
<div class='info'>
Score: ".$comment['score']." Posted By- ".$uname['username']." &nbsp At-".$x['created']." ";
if($x['edited'] != NULL){
echo" Edited Last-".$x['edited']." </div>";
}
else{
echo"</div>";
}?>
</div> //Close of parent div
Here is still part of the function me checking if the comment has any reply comments and if so I recursively call the same function,
$check = $db->query("SELECT * FROM user_comment WHERE replyid = ".$x['id']." ");
if(!$check || mysqli_num_rows($check) == 0){
return;
}
else{
$working = mysqli_fetch_assoc($check);
$new_reply = mysqli_fetch_assoc($db->query("SELECT * FROM comments WHERE id = ".$working['commentid']." "));
print_comment($new_reply,$db,$width+20,$working);
}

action in the inline event handler refers to the action property of the form containing the clicked element. It shadows your global action function, use a different name for the function, or rather use addEventListener to attach events. You can see the value in the snippet.
function foo(a) {
console.log(a);
}
<form>
<button type="button" onclick="foo(action);">
Click
</button>
</form>
The reason behind this is, that the code in an inline handler is scoped to the event target element using with (event.target) {...} (or similar internal scoping mechanism), and when the given variable (property actually) is not found from the element itself, with looks up the ancestor elements until the property is found. If it's not found from the elements, the last object to search is window, and this way it finds the global function which was meant to be executed, providing there wasn't naming conflict on the way up to window.

handling Javascript function

I have a JavaScript function which is used to copy data in my HTML page.
After clicking a button in the same HTML, a function is getting called. Till this everything is fine. But when I again click on same button, the same thing was getting copied twice. This should not happen. I want to copy content only one time.
<script language="JavaScript">
var x=1;
function h1b_cnslr() {
if (x===1){
x=2
some code
}
}
function h1b_nocnslr() {
if (x===1){
x=2
some code }
}
}
</script>
<BUTTON id ="btn_h1b_cnslr" class="copy" onClick="h1b_cnslr();" value="Copy" >Copy</BUTTON>
<BUTTON id ="btn_h1b_nocnslr" class="copy" onClick="h1b_nocnslr();" value="Copy" >Copy</BUTTON>
I am using variable x. The logic I used is, globally x=1 and when the user clicks for the first time x will get assigned 2. For the second click the value of x will be checked and if x===1, only then will it enter into the loop. But everytime x is assigned as 1 as I declared x as a global variable. Is their any other way to do this?

Put another var to check if you already have copied the content else skip copy

Function does not work properly if not nested in another function

Sorry for unclear title but I couldn't find anything that could suit my problem.To better explain what it is let me show you my javascript code:
function askForIDForCommand()
{
var content;
$.post("Somepage.aspx", function (data)
{
content = $(data).find("#myDiv").html();
});
var myFunc = function () { }
var buttons = [{ text: 'OK', click: myFunc}];
ui_window("Hi", 630, content, buttons);
}
As you can see I declare a variable called content. Then I assign the html of a specified div to it. And then I send it to ui_window function which just displays a jquery dialog with the specified content. The problem is I don't get that html content in the dialog. When I look up the value of "content" with Firebug I can see that it contains html content. What makes me desperate is if I change the above function to the below one the html content gets displayed in the dialog:
function askForIDForCommand()
{
var content;
$.post("Somepage.aspx", function (data)
{
content = $(data).find("#myDiv").html();
var myFunc = function () { }
var buttons = [{ text: 'OK', click: myFunc}];
ui_window("Hi", 630, content, buttons);
});
}
In case you can't notice the difference, I just put the call of ui_window inside the $.post() method. And it works. Why's that?
And here's the html content in case you need it:
<table>
<tr>
<td align="right">
<label>
Enter the ID:</label>
</td>
<td>
<input id="txtID" type="text" onkeydown="return onlyNumbers(event);" maxlength="8"/>
</td>
</tr>
</table>

You're not assigning to content before you call ui_window. That assignment happens inside your anomyous function and therefore is not executed until someone calls that function (that is, once the post to Somepage.aspx is completed).
In contrast, you're calling ui_window() as soon as you have started the post to Somepage, but without waiting for that operation to finish. At that time your completion function still hasn't been called, and therefore content still contains undefined.

The problem is that the inner function is called when you recieve response from server. Then in the first case the variable is not assigned yet when those lines are executed and in the second one you are sure that ui_window is called with available data.

The problem is the AJAX call to the server. In the first case, you send a request and go straight to the next command, ie myFunc and so. Therefore your content variable isn't initialized at this moment.

Show HTML objects

I wish to show out other objects when the onclick function is clicked. When i click that button, it will hide one object and show two other objects. I have already set the style.visibility to visible. But the show two object does not works.
Update Sample:
<input type="submit" id="show" name="show" value="show" onclick="RemoveDoc(); document.getElementById('docname').style.visibility='hidden'; document.getElementById('browse').style.visibility='visible'; return false;" />
//browse input
<input type ="file" name="browse" id="browse">
Method 2:
//Using my RemoveDoc() function, I want the button of browse being show out.
function RemoveDoc(Doc)
{
xmlhttp1=new XMLHttpRequest();
xmlhttp1.open("GET","functions/remove.php?Doc="+Doc,true);
xmlhttp1.onreadystatechange=function()
{
if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
{
//when i run debugging, it says that the style of null..
document.getElementById("browse").style.visibility='visible';
}
}
xmlhttp1.send();
return false;
}
</script>
I tried two methods which both also cant show the browse button.
It should call out my visible on browse object as it's visible.. kindly advise.

http://jsfiddle.net/y3Bad/
A few things: you should include the visibility code inside of your removeDoc function, and bind the handler from javascript, not in markup. Also, your variable xmlhttp1 is an implicit global. Your removeDoc function takes a parameter, Doc, but you never pass anything to it. Finally, removeDoc makes an ajax call, which is asynchronous, so your line of code to show the browse button will not execute immediately, and may never execute at all if your ajax calls fails.
HTML:
<input type="button" id="show" name="show" value="show" />
JS:
​document.getElementById('show').onclick = function () {
// use display instead of visibility if you don't want the hidden element to take up space
// setting visibility to empty string will show the element
document.getElementById('browse').style.visibility = '';
};​

I use these two functions:
function hide(objId) {
document.getElementById(objId).style.display="none";
}
function show(objId) {
document.getElementById(objId).style.display="";
}

Maybe you can try to use jQuery, something like this:
http://jsfiddle.net/7fJuu/

How enable and disable setTimeout onclick

I have a function that executes on page load. The function executes every 30 seconds using setTimeout. I want to be able to enable and disable setTimeout onclick I have the following code below...
<input id="vw" value="" type="hidden">
<a href="#" onclick="document.getElementById('vw').value='0';>click here</a>
<script>
/* JAVASCRIPT BELOW */
function mPb(){
var vw = escape(document.getElementById('vw').value);
if(vw == ''){//DO NOT SWITCH VIEW IF EMPTY
var sTo = setTimeout("mPb()", 30000);
} else {
clearTimeout(sTo);
}
}//END VIEW MY FEED
//ON SERVICE LOAD DISPLAY SHITE INSTEAD OF ONLOAD
window.addEventListener ?
window.addEventListener("load",mPb,false) :
window.attachEvent && window.attachEvent("onload",mPb);
</script>

Your code works if you properly close your onclick attribute with a double quote:
click here
Also, here go two little suggestions to improve your code:
If you're checking for an empty string inside your function, why setting the input value to 0 when you click the link? It works, but it would be more clear if you set the value to ''.
When using setTimeout (and setInterval), do not pass a string containing a function call. It works too, but it's dangerous. Use this instead:
var sTo = setTimeout(mPb, 30000);

sTo needs to go outside of the mPb function, that way you can reference it from you onclick.