I am trying to fix a problem with my recursive function JS using a call back. I just want to update the HTML of 3 div using according to an index. Please find the code below
<div id="try0">50</div>
<div id="try1">50</div>
<div id="try2">50</div>
function getNumberOfAnswers(questionID, callback)
{
var value = i*10;
callback( value.toString());
}
var i=0;
getNumberOfAnswers(i, function callFunc(ratio){
var itemToChg = 'try'+i;
document.getElementById(itemToChg).innerHTML = ratio;
if(i<3){
i++;
getNumberOfAnswers(i,callFunc(ratio));
}
});
I didn't put any tags on the code above to simplify but I made a JSfiddle with it. http://jsfiddle.net/cyrilGa/zmtQ8/ . On the third line from the end, I tried to write getNumberOfAnswers(i,ratio); but it didn't work.
Can somebody help me with this
Cheers
The line:
var value = i*10;
should be
var value = questionID * 10;
And I think
getNumberOfAnswers(i,callFunc(i));
Should be:
getNumberOfAnswers(i,callFunc);
Do not use recursion for this, it is silly.
for ( var i = 0; i < 3; i++ ) {
document.getElementById('try' + i).innerHTML = i * 10;
}
Is this what you want?
You need to replace the recursive callFunc(ratio); at the bottom to callFunc(i); because the argument ratio is still equal to 0 while you increment i. Everything else is fine.
Related
<!DOCTYPE html>
<html>
<head>
<title>100-Numbers</title>
</head>
<body>
<script>
function myarray()
var points = [];
for (var i = 0; i < 10000; i++) {
points.push[Math.round(Math.random() * 10)];
document.write(myarray(points));
}
</script>
<<button onclick="myarray"> OK </button>>
</body>
</html>
I am a beginner with javascript. I want to create a page that displays random numbers from 0 - 10. I am struggling to print an array. Is there a simple solution to this?
You should call the function from outside the function, not in the loop.
The function can just return the array, you can print it in the caller.
points.push is a function, you call it with (), not [].
You're missing {} around the function body.
The function doesn't take any arguments.
function myarray() {
var points = [];
for (var i = 0; i < 100; i++) {
points.push(Math.round(Math.random() * 10));
}
return points;
}
console.log(myarray());
There are too many syntax errors in your code and thsi suggests that you need a proper tutorial than an answer. However, the following snippet shows the conventional way of doing what you want.
function myarray(){
var points = [];
for (var i = 0; i < 10; i++) {
points.push(Math.round(Math.random() * 10));
}
document.getElementById('mySpan').innerHTML = 'Randoms: ' + points.toString();
}
myarray()
<span id="mySpan"></span>
You have some syntax errors as well as logic errors.
As pointed out in comments, for loop isn't executed.
A function is defined like function myarray() {}
A function is called with () like this myarray()
Array.push() is a method that you invoke using ().
You also seem to have rogue < in the HTML.
You can use an HTML element (In this case a <output> to display the contents of Array. The join('') method converts array content to a string.
function myarray() {
const el = document.querySelector('output');
var points = [];
for (var i = 0; i < 10; i++) {
points.push(Math.round(Math.random() * 10));
}
el.innerText = points.join('');
}
<button onclick="myarray()"> OK </button>
Results: <output></output>
You need to call the function to get the result intended.
points is an array and push is a function so it can be called using ().
function myarray() {
var points = [];
for (var i = 0; i < 10000; i++) {
const randomNumber = Math.round(Math.random() * 10);
points.push(randomNumber);
}
document.write(points);
}
<button onclick="myarray()"> OK </button>
You also need to make an another element or tag so we can place and show the result of our random numbers.
And render the result using something like this:
document.getElementById('generate-number').innerHTML = random_array.
Next, if you render the array directly to an element, it will output with a delimiter, which is a comma ,. The sample output would look like: 2,6,2,1,6. So if you don't want any delimiter, you can remove it by using the .join() function: random_array.join('').
Here's a working example to try:
function generateArray() {
// Creates 10 random numbers in an array
const rand_num_arr = new Array(10).fill(null).map(e => Math.floor(Math.random() * 10));
// Converts array into a string using .join()
const rand_num = rand_num_arr.join('');
// Display the random number in your div element "#generate-number"
document.getElementById('generate-number').innerHTML = rand_num;
}
<div id="generate-number"></div>
<button onclick="generateArray()">Generate Random Numbers</button>
//Arrow Function Expression
const demo = () => {
var temp = [];
for (var i = 0; i < 100; i++) {
temp.push(Math.round(Math.random() * 10));
}
return temp;
}
console.log(demo());
//Normal Function Expression
function demo() {
var temp = [];
for (var i = 0; i < 100; i++) {
temp.push(Math.round(Math.random() * 10));
}
return temp;
}
console.log(demo());
I found few mistakes both in javascript and HTML side + 1 never to do mistake
Some points are already mentioned in the accepted answer but here are a few new ones.
JavaScript Part
In your function myarray you have not used curly braces {}. All the codes of a function lie inside it.
The push is an array method so use a small bracket () not square bracket with it.
You are calling myarray function inside myarray function which causes infinite recursion.
(A never to do mistake) - You wanted to print array on webpage, never use document.write method, because when document.write is executed after a webpage is loaded it overwrites everything on the page. Instead you can use console.log or select an element and inject data in it using innerHTML method. (shown in the code below)
To print an array in javascript you can use index value with the array name. You can parallel print array elements as it is being pushed it reduce execution time. See in the code.
<!DOCTYPE html>
<html>
<head>
<title>100-Numbers</title>
</head>
<body>
<<button onclick="myarray()"> OK </button>>
<p id="output"></p>
<script>
const output = document.getElementById("output");
function myarray() {
var points = [];
for (var i = 0; i < 10000; i++) {
points.push(Math.round(Math.random() * 10));
output.innerHTML += points[i]; // printing array
}
}
</script>
</body>
</html>
HTML Part
One can't say these mistake but rather some modifications (also there is a mistake in the button).
(mistake) When you added onclick event listener to the button then call the function there, by adding parenthesis otherwise function will not execute on button click. Ex: onclick="myarray" => onclick="myarray()"
You should not use angle brackets directly in HTML, it confuses the browser whether it is part of a tag or not. Instead use HTML entity. For < use < and for > use >
Also you can put script tag at bottom of body it looks clean.
I have an exercise from my university that i have a string let's say i have that: "hello" and i want to print it like that:
hhehelhellhello (h he hel hell hello).
the thing that i stack is that they want to do it without loop!
Anyone can help me? :/
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
var strin = "hello"
for (i = 0; i < strin.length; i++) {
document.write(strin.slice(0,i+1))
}
</script>
</body>
</html>
Use recursion. Code:
function r (s, i) {
if (i == undefined) i = 0;
if (i == s.length) return "";
return s.slice(0, i + 1) + r(s, i + 1);
}
r("hello"); // hhehelhellhello
There is probably a more efficient solution, but off the top of my head this should work:
var s = "hello";
var index = 0;
var len = 1;
var newString = '';
function appendToResult(str, index, len) {
newString += str.slice(index, len);
len++;
if (len !== s.length + 1) {
appendToResult(s, index, len);
}
}
appendToResult(s, index, len);
console.log(newString);
Maybe you can try a recursive approach:
function print(word, step){
if(word.length<step) return;
console.log(word.substring(1, step));
}
print('hello', 1);
Have you met.... Recursion?
What you need to achieve is something like this (for a string "hello"):
h
he
hel
hell
hello
A recursive call to a method (say, myPrinter()) could behave similarly:
call myPrinter(hello):
call myPrinter(hell):
call myPrinter(hel):
call myPrinter(he):
call myPrinter(h):
print 'h'
print 'he'
print 'hel'
print 'hell'
print 'hello'
done
So how do we go about writing this magical method of ours?
Take notice that at each call we make another call to our method but with a shorter input (in fact, the input has been truncated by one character from the end).
You could write something like this:
function myPrinter(myString):
myPrinter(myString - last character of myString);
print myString; // and maybe some space
if myString is empty:
return; // do nothing. just return
All that's left for you to do is translating the above idea into clean bug-free code.
Of course we have to loop this way or that way. Yet in the below code it is disguised as a recursive function. Yet i am using no counting variables at all. It has the potential to deceive inexperienced eyes. This is how i would do it;
function makeStringWeird(s){
var extend = (s, r=[]) => s !=="" ? (r.push(s),extend(s.slice(0,s.length-1),r)) : r;
return extend(s).reverse().join("");
}
console.log(makeStringWeird("hello"));
I landed up making two solutions for you. One is by using reduce function which doesn't explicitly uses any loop but when I checked its polyfill it uses a while loop to iterate. The code for that is given below and it can also be seen at this fiddle https://jsfiddle.net/vatsalpande/42590tre/
(function(){
var convertedString = [];
function reducer(previousValue, currentValue){
convertedString.push(previousValue+currentValue);
return previousValue+currentValue;
}
var string = "hello";
var stringArray = string.split("");
var totalVersion= stringArray.reduce(reducer,"");
console.info(convertedString.join(""));
})();
Since this was using iteration I created one more by using recursion alone. Below is the code and the fiddle link
https://jsfiddle.net/vatsalpande/tnxsuw75/
(function(){
var string = "hello";
var stringArray = string.split("");
var convertedValue = [];
function convert(initialValue, index){
if(index < stringArray.length){
convertedValue.push(initialValue+stringArray[index]);
convert(initialValue+stringArray[index], index+1);
}
}
convert("",0);
console.info(convertedValue.join(""));
})();
Hope these be of some help.
Any feedback to improve them is highly appreciated.
Happy Learning :)
This is my very first question on this website, I am curious if someone could help me out. In Google Tag Manager I tried to set up a custom JavaScript variable with some jQuery that should return the total amount of all product prices within a specific array.
In the code below I return all product prices within an Enhanced Ecommerce dataLayer. In GTM, I have called this variable "{{product price}}".
function() {
var itemsInC = {{ecommerce.checkout.products}};
itemsincart = [];
for (var i = 0;i < itemsInC.length;i++) {
priceincart.push(itemsInC[i].price);
}
return priceincart;
}
The code above actually works and for example returns a value like: ['9.99', '21.95', '34.99'].
In the second piece of code I try to sum up the total of all returned values in the GTM variable "{{product price}}". However, the code below doesn't work properly. How could I return the total value of the script above in the script below?
This is what I created so far:
function() {
var total = $("{{product price}}").each(function() {
0 += parseInt($(this).val(), 10);
}
return total;
}
Thanks in advance!
Kind regards,
Assuming that you're using the exact code as you've got above, you've got a few syntax errors.
you don't need to wrap GTM variables in quotes
don't use parseInt because that just returns an integer. Use "Number" instead.
you left out a bracket
So you should probably use something like this:
function(){
var total = 0;
$({{product price}}).each(function(){
total += Number(this);
})
return total;
}
I don't know if it is normal to post an answer to my own question but I solved the issue above with the following code:
function() { var total = 0; for (var i = 0; i < {{product price}}.length; i++)
{ total += {{product price}}[i] << 0; } return total + ".00"; }
what I'm hoping to achieve is to increase a count and then append that to the DOM on every pass through using each(). What I have at the moment is the final count added at the end. For example.
Say I have 100 divs, for every pass through it should add the new count as it counts it, like so 1,2,3,4,5,6,7... and so on. But at the moment it counts all the objects and just appends 100 at the end. Please can someone point me in the direction to where I'm going wrong?
I've added a very basic version of what I'm hoping to achieve below... also here is a JSbin (I tried jsfiddle but it seems to be down for me) .
$(".toCount").each(function(i){
$("#count").text(i + 1);
});
$('input').on('click',function () {
var len = $(".toCount").length;
var arr = [];
for (var i = 0; i < len; i++ ) {
arr.push(i+1);
}
$('#count').text(arr.join());
});
I don't know what you mean by 1, 2, 3 ... in case that you want to count the elements step by step you can use setInterval function:
$('input').on('click',function () {
var l = $(".toCount").length,
$c = $('#count'),
i = 0;
var t = setInterval(function() {
i++;
$c.text(i);
if (i === l) clearInterval(t);
}, 10);
});
http://jsbin.com/eronel/17/edit
use append();
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
in your case text() is replacing your div's text so u get 100 at the end ..
$("#count").append(i + 1);
Use append
$("#count").append(i + 1);
I want to run a loop that auto increase the function name by 1. For easier to understand:
My currently code:
for(var i = 1; i <= 2; i++) {
var fn = 'this.getExterior',
el = (fn + i + '()').getInnerItems();
}
I want to increase the function name and retrieve something like this.getExterior1 , this.getExterior2. The above code give me an object not a function. Can someone give me a solution how to achieve it. Thank you very much in advance!
You can't really use strings as code (eval can but it's not necessary here). You can use the [] syntax:
el = this["getExterior" + i]().getInnerItems();
(Also, function is a keyword; you cannot use it as a variable name.)
it will be :
var el = this['getExterior'+i]().getInnerItems();
in javascript any property or object can be accessed this way
object.property is the same as object['property']
Something like the following:
var i, fn;
for (i = 1; i <= 2; ++i) {
fn = 'getExterior' + i;
el = this[fn]().getInnerItems();
}