In my code I need to do this:
function myFunction() {
/*more code*/
let id = 12;
let name = "something";
deleteBtn.setAttribute("onclick", "otherFunction("+id+","+name+")");
}
In which
function otherFunction(id, name){
/*does other stuf*/
}
The issue is, when I run the code and load the html page I get this error:
SyntaxError: missing ) after argument list.
I can't figure out what I'm doing wrong.
when it comes to syntax error recheck what you have typed
first i dont see you declare the deleteBtn variable
deleteBtn.setAttribute("onclick", "otherFunction("+id+","+name+")");
check this code it works
document.getElementById('asd').setAttribute('onclick', `otherFunction("${id}","${name}")`);
Related
I just started learning javascript and i have a piece of code that is not working and i can't figure out what is wrong.
I have already checked the names of everything if they are spelled correctly multiple times.
function beautify() {
document.write("ja");
var item = document.getElementById("top");
item.classList.add("beautiful");
return;
}
Please refer to https://javascript.info
A very good website to refer.
document.body.innerHTML = "<button onclick='beautify()'>Click Me</button>";
document.body.innerHTML += "<h1 id='top'>Manish</h1>";
function beautify()
{
var item = document.getElementById("top");
item.classList.add("beautiful");
}
.beautiful{
color:red;
}
To debug the code and try to understand the problem, i would use console.log().
function beautify(){
console.log('function is executed');
document.write("ja");
var item = document.getElementById("top");
item.classList.add("beautiful");
return;
}
beautify();
So you execute the function - by calling function_name(); - after you have declared it, and check if the console.log() writes something through your browser console. For example on Firefox or Chrome by pressing F12 you can access it.
EDIT: I forgot to mention you can also see Javascript errors through the console in case
Unable to get the class value out side the getJSON scope. Alert declared inside displays value but outside doesn't.
// Getting classes based on classID
var ClassID = {"ClassID": item.ClassId};
var Class="";
$.getJSON('#Url.Action("GetClassesByID","Catalogue")', ClassID, function (Val) {
Class=Val;
alert("Inside Value " +Class);
});
html= html+'<div class="col-xs-7 col-sm-7 col-md-7 dvpadding isbnnum"><p><b>CLASS - ('+Class+')</b></p></div>';
I just want to update the Class mentioned in above html from the value got from ajax call
.getJSON is asynchronous. You're calling alert outside of it which is synchronous. You need to call a function once .getJson is successful like:
// Getting classes based on classID
var ClassID = {
"ClassID": item.ClassId
};
var Class = "";
$.getJSON('#Url.Action("GetClassesByID","Catalogue")', ClassID, logData(val));
function logData(val) {
Class = Val;
alert("Outside Value " + Class);
}
The reason you are getting an empty string is because of the way javascript and callbacks work.
This is what you are expecting to happen:
class = ""
$getJSON
Class = val
alert(Class)
This is what is happening though:
class = ""
$getJSON
alert(Class)
Class = val
The reason beeing that 'Class = val" is inside a callback which is basicly just an action that is supposed to happen once $getJSON is done.
However since $getJSON could take a few seconds, whatever is below $getJSON will be run first.
You can think of $getJSON as an assignment that happens. That line of code will execute VERY fast, just as fast as any other line of code. But because you provided a callback, the callback part of the line will only be executed once the JSON was actually fetched which could be at any time.
Edit: I misread the scope completely. Sorry.
How do I get reference of the <div> id and title from a external JS by using the code below:
function recordedEvent() {
var v_Id = $(this).attr('Id');
var v_Title = $(this).attr('Title');
var o = { Title : v_Title, ObjectId : v_Id };
alert(JSON.stringify(o));
}
The function is called in the HTML with a onclick called box1().
Code in CplTemplateSetup.js is where I want to run the function from into the HTML:
content_left_30_four_click_images_right_70_head_content_template.html
Any help would be appreciated.
P.S.: JSON data (zip archive)
Well the most obvious problem is that you don't have a closing parenthesis after your callback.. otherwise the code looks good
Edit
window.lastClickedBoxData = {}; // just reassign that within your function
or
window.runThisWhenClicked = function () {
var v_Id = $(this).attr('Id');
var v_Title = $(this).attr('Title');
var o = { Title : v_Title, ObjectId : v_Id };
};
then just
$(".box").click(window.runThisWhenClicked);
I don't think that the problem that you're facing would be apparent to anyone who doesn't view your code.
You defined a function within a script tag, in the html, and called that function in the onclick attribute of the box being clicked on. To that function, this refers to the box that was clicked on. From there, you call a function within an external js document. In that function, this refers to the window object. In other words, for the code that you posted, $(this) is a jquery instance of the window object which doesn't have the attributes that you're looking for, such as id and title, so they're blank.
To see what I'm talking about open the console and add the following line of code to each of your functions:
console.log(this);
If you're having trouble doing that, the following code should work as well, but it's not as good for debugging:
alert(this);
You need all of your code to be in the html script tag or in the external document. Also, you shouldn't define the function to be called during a click event using onclick within the html. It's better to do it using javascript or jquery so that your javascript is completely separate from your html.
EDIT: You shouldn't update your question with an answer. You should edit the original question with this information so that anyone having a similar problem can find the solution. I'd have commented on the answer directly, but I don't have the reputation to do this.
I have no idea what's going on because I have never had problems with JS but here we go. I keep getting an Uncaught ReferenceError in Chrome with this code:
function showShareButtons() {
var buttons = getElementById("sharebtns");
document.buttons.style.visibility = 'visible';
}
Can someone tell me what's wrong? Thanks!
You can't simply declare getElementById by itself for a variable. You would need to use document.getElementById:
function showShareButtons() {
var buttons = document.getElementById("sharebtns");
buttons.style.visibility = 'visible';
}
Even though you eventually use document in your code, it would not be the same since the variable is unable to be declared as anything definitive.
document.getElementById("sharebtns");
It should be like:
function showShareButtons() {
var buttons = document.getElementById("sharebtns");
buttons.style.visibility = 'visible';
}
For some reason my javascript code is messed up. When run through firebug, I get the error proceedToSecond not defined, but it is defined!
JavaScript:
<script type = "text/javascript">
function proceedToSecond () {
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="visible";
}
function reset_Form() {
document.personalInfo.reset();
}
function showList() {
alert("hey");
if (document.getElementsById("favSports").style.visibility=="hidden") {
document.getElementsById("favSports").style.visibility="visible");
}
}
//function showList2() {
//}
</script>
HTML:
<body>
<!--various code -->
<input type="button" onClick="proceedToSecond()" value="Proceed to second form"/>
</body>
The actual problem is with your
showList function.
There is an extra ')' after 'visible'.
Remove that and it will work fine.
function showList()
{
if (document.getElementById("favSports").style.visibility == "hidden")
{
// document.getElementById("favSports").style.visibility = "visible");
// your code
document.getElementById("favSports").style.visibility = "visible";
// corrected code
}
}
There are a couple of things to check:
In FireBug, see if there are any loading errors that would indicate that your script is badly formatted and the functions do not get registered.
You can also try typing "proceedToSecond" into the FireBug console to see if the function gets defined
One thing you may try is removing the space around the #type attribute to the script tag: it should be <script type="text/javascript"> instead of <script type = "text/javascript">
I just went through the same problem. And found out once you have a syntax or any type of error in you javascript, the whole file don't get loaded so you cannot use any of the other functions at all.
important: in this kind of error you should look for simple mistakes in most cases
besides syntax error, I should say once I had same problem and it was because of bad name I have chosen for function. I have never searched for the reason but I remember that I copied another function and change it to use. I add "1" after the name to changed the function name and I got this error.