I want to use 2 helper functions for a function. Output is not showing any error but the output is showing the function syntax instead of return value
function cuboidlwsidesSurfaceArea(length,width,height) {
return 2*length*width
}
function cuboidwhsidesSurfaceArea(length,width,height) {
return cuboidlwsidesSurfaceArea(length,width,height) + 2*width*height
}
function cuboidsurfaceArea(length,width,height) {
return cuboidwhsidesSurfaceArea(length,width,height) +2*length*height
}
document.write = cuboidsurfaceArea(10,5,20)
</script>
document.write = cuboidsurfaceArea(10,5,20)
document.write is a function. Call it as such.
document.write(cuboidsurfaceArea(10,5,20));
If you want the value returned somewhere, assign it to a variable or return it from a function. Append it to a DOM element. You need to be specific about the use case if you want additional help on what to do with it.
Related
I have a problem where if i want to add a parameter to my click attribute then it calls the function as soon as it renders
here is my test html:
return html`
<button class="menu-btn" #click="${this._OpenSubMenu(1)}>test</button>"
`;
}
And the function:
_OpenSubMenu(test:number) {
console.log("Hello")
}
This output Hello as soon as the page is rendered.
So how can i avoid this while still adding a parameter to my function?
You need to make your function return a function. Your click function will then execute the returned function, and due to closure's will still have access to the params.
eg..
_OpenSubMenu(test:number) {
var that = this;
return function () {
console.log("Hello");
//test is also a closure so you can use here
//that will equal this
}
}
If you want access to this, you could also use an arrow function
_OpenSubMenu(test:number) {
return () => {
console.log("Hello");
//test is also a closure so you can use here
//this will also still be valid here
}
}
Here's the function code:
function TestFunction(number){
return function(e){
return `${number}`;
}
}
When I use it on google's devtools command line it returns:
function(e){
return `${number}`;
}
So it looks like the function returned is not created with the number I give to TestFunction, instead it takes the string just like it was written. I have tried to use concatenation instead of interpolation but still not working. What can I do?
There is indeed a closure around the second function, so it will have memory of what num is.
function a(num) {
return function b() {
return `${num}`;
}
}
const c = a(6);
console.log(c());
I have an array with functions: var ranArray = [funct1(), funct2()] and the functions themselves:
function funct1() {
document.write("hello");
};
function funct2() {
document.write("hi");
};
I am trying to make it so that whenever a button is pressed, either funct1 or funct2 is executed.
However, without me even pressing the button, on the page I see my button and "hellohi". Here is the function for the randomization:
function getFunctions() {
return ranArray[Math.floor(Math.random * ranArray.length)];
};
and here is the HTML:
<button type="button" name="ranButton" id="ranButton" onclick="getFunctions();">Random Button</button>
Firstly you need to store the function references ([funct1, funct2]), the () will immediately call the functions. Next you can use .call() to call the function, or more simply add () at the end of ranArray[Math.floor(Math.random() * ranArray.length)] as #jfriend00 mentioned. Also note that Math.random needs to be Math.random().
var ranArray = [funct1, funct2];
function funct1() {
document.write("hello");
};
function funct2() {
document.write("hi");
};
function getFunctions() { // Note you don't really need a 'return' here
return ranArray[Math.floor(Math.random() * ranArray.length)]();
};
Demo
Also the use of document.write() here is overwriting the DOM. So I don't recommend it, rather you may want to place this content inside a element. If you have some element of the id #foo you could instead set the text of that DOM element:
document.getElementById("foo").textContent = "...";
Demo 2
Your array declaration is actually calling funct1 and funct2 and trying to store the return values in the array. What you want is an array of functions. Remove the parentheses so the functions themselves are stored in the array rather than the return values. It should look like this:
var ranArray = [funct1, funct2];
_editor: function () {
//retrieve all the editors on the current page
var editors = window.tinymce.editors;
var container = this.element;
//pick one that's associated with current container
$(editors).each(function (i, ed) {
if (ed.id == container.id) {
return ed; // even if this is invoked,
}
});
// undefined is returned
}
I had to change the above code to
_editor: function () {
//retrieve all the editors on the current page
var editors = window.tinymce.editors;
var container = this.element;
var editor;
$(editors).each(function (i, ed) {
if (ed.id == container.id) {
editor = ed; // do not return yet. Store it.
}
});
return editor; // return here
}
I assume this is because of JavaScript's scope characteristics. Could someone explain 1) if this is only inherent in JavaScript 2) what exactly is going on in each functional scope in the above code?
Thank you.
In the first case, you are returning a value from that anonymous function passed to $(editors).each, not the outer function. In the second case you are returning from the outer function.
This is how it works with pretty much any language that allows nested functions. return only returns from the innermost function.
The issue is that you have nested functions. You have the function assigned to the _editor property, and within that you have a function that's being invoked by $.each(). The return statement returns from the closest containing function, so in the first example it's returning from the $.each() iteration function, not the _editor function.
$.each() uses the return value of the iteration function to determine whether to continue looping -- if the function returns false, it stops at that element (similar to using the break; statement in a for or while loop).
Could someone explain 1) if this is only inherent in JavaScript 2) what exactly is going on in each functional scope in the above code?
The code is returning from the function passed to .each(), so it doesn't impact the enclosing function.
You can use $.grep for a cleaner solution.
_editor: function () {
//retrieve all the editors on the current page
var editors = window.tinymce.editors;
var container = this.element;
return $.grep(editors, function (ed, i) {
return ed.id == container.id;
})[0];
}
This is basically a filter. The result will be the items in the collection where you returned a truthy value. And so we just return the first truthy result (index 0 of the result).
It returns from the function called by each:
$(editors).each(function (i, ed) { // <---
if (ed.id == container.id) { |
return ed; // <--- this exits this --
is [this] only inherent in JavaScript[?]
No, many languages which use anonymous functions, also called lambdas, operate like this. A couple of examples are C# and ruby. Calling return exits themselves, rather than the functions they are invoked in.
what exactly is going on in each functional scope in the above code?
$(editors).each(function (i, ed) {
if (ed.id == container.id) {
editor = ed; // do not return yet. Store it.
}
});
The function body is called once for each element ed in $(editors). When the loop exits, the last value for which ed.id == container.id is then stored in editor. The second argument i is the index (0,1,2,3,...) incremented in each iteration.
I was wondering if there a more elegant way of returning a value from the function I've pasted below : "getImageURLforPOICategory".
As you can see I've used JQuery's "each" function to iterate through an array of objects, when I find the matching value I want to return a result out of the "each" loop and then right out of the function that contains the each loop.
I've used a local variable to "cache" it and then I'm returning that. I'm not entirely sure if this is the best approach? Is there a way of returning the value directly from within the each loop?
Tracker.getImageURLforPOICategory = function (POICategoryID) {
var url;
$.each(Tracker.pointofinterestcategories, function () {
if (this.id === POICategoryID) {
url = this.imageurl;
return;
}
}
);
return url;
};
Thanks for reading,
Cheers,
Duncan
No, you can't return a value from the .each().
If you do a return false; it will stop the loop so it isn't running longer than it needs to, but you'll need to use a variable as you're doing now.
If you don't use $.each(), but instead use a for loop, you'll be able to just:
return Tracker.pointofinterestcategories[ i ].imageurl
I'd still use a for loop though.
Tracker.getImageURLforPOICategory = function (POICategoryID) {
return $.grep(Tracker.pointofinterestcategories, function (item) {
return item.id === POICategoryID;
})[0].imageurl;
}