Argument-based recursive method

Why is the script only printing 'Hello' and not 'Good bye' as well, even though both are passed as arguments on the function call? What could be causing this issue?

Note: The script used to work before. It stopped working after adding the recursion call line.

<html>
<head>
</head>
<body>
<script type="text/javascript">
    function writing(i,first,second) { 
        len=arguments.length;
        if (i<=len) {
            current=arguments[i];
            c=0;
            inter=setInterval(function() {
                    if (c>=current.length) {
                        clearInterval(inter);
                    } else {
                        field=document.getElementById('div1');
                        field.innerHTML+=current[c];
                        c+=1;
                    }
                },200);
        } 
        i<len?writing(i+1,first,second):writing(i=0,first,second);          
     }
    writing(1,'Hello','Good bye');
</script>
<div id="div1"></div>
</body>

Answer №1

The code faced several issues such as an infinite loop and variable declaration errors.

I have provided a snippet for you to run and verify if it meets your requirements.

To meet your needs, I had to include a setTimeout function.

var interval_counter = 0;

function writing(i, first, second) {
    var len = arguments.length;
    if (i != 0 && i <= len) {
        var current = arguments[i];
        var c = 0;
        setTimeout(function() {
            var inter = setInterval(function() {
                if (c >= current.length) {
                    clearInterval(inter);
                } else {

                    field = document.getElementById('div1');
                    field.innerHTML += current[c];
                    c += 1;
                }
            }, 200);
        }, 200 * interval_counter);
        interval_counter = interval_counter + current.length;
        i < (len - 1) ? writing(i + 1, first, second) : writing(i = 0, first, second);
    } else {
        return false;
    }

}
writing(1, 'Hello', 'Good bye');
<div id="div1"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for extracting parameters from a URL using Express JS in a custom manner

Recently, I set up a server using the express package and encountered an issue while trying to extract parameters from the URL in a specific format. The URL structure is as follows: (notice there's no '?' indicating parameters). I am lookin ...

-g option must be enabled for jscoverage to function properly

To install jscoverage globally, use the following command: npm install jscoverage -g Do you know what purpose the -g option serves? Without using the -g option, my system does not recognize jscoverage as a valid command. ...

Achieving synchronous function execution with a single click in React

In my current project, I am utilizing ReactJs and Redux. I have encountered a scenario where I need to trigger two functions sequentially with just one click on the mainfunc(). The second function should only execute after the first function has complete ...

`Welcome to the World of AngularJS with IntelliJ IDEA`

Hey there! I'm currently diving into the world of Angular.js and IntelliJ IDEA, but seems like I've hit a roadblock. I'm attempting to create a basic "hello world" example from a book in the IDE, but it's just not cooperating. After dow ...

extracting values from deeply nested JSON array in JavaScript

Is there a way to extract values from a deeply nested JSON array? I'm looking to retrieve all pairs of (nameValue and value) from the JSON provided below var json = [{ name: 'Firstgroup', elements: [{ ...

Hovering over a Raphael animation - What's preventing it from functioning?

I'm currently working on a pie chart using Raphael, and I want to add a tooltip that displays text when hovering over a specific segment of the chart. The hover event is functioning correctly, but I'm having trouble adjusting the tooltip text coo ...

Issue with Gulp Watch failing to detect modifications in Browserify files

Currently, I am utilizing the laravel-elixir-vueify npm package for my project. Gulp watch functionality performs as expected when I make changes to files within the "scripts" or "styles" functions. However, there seems to be an issue when it comes to moni ...

django ajax request returning a 403 error

While attempting to compile project https://github.com/kannan4k/django-carpool, I encountered an error during an ajax call. The error message displayed was: "Failed to load resource: the server responded with a status of 400 (BAD REQUEST)." I suspect that ...

Trouble arises when attempting to create a two-column layout using Material UI's <Grid> component

My goal is to create a two-column layout where each column takes up half of the screen and has equal height. To better illustrate, take a look at this image. The code I've tried so far is not working as expected: import React from "react"; import { ...

AngularJS - encountering a 404 error when reloading the page after removing the Hashbang

After taking out the hashbang from my routes by using $locationProvider.html5Mode(true); Now, when I go to a page like "domain.com/download", it works. But if I refresh this same page, I get a 404 Error. URLs like "domain.com/download" can only be acce ...

What is the best way to incorporate an apostrophe into a string so that it can be displayed in a tooltip using jQuery

There is a text or string stored inside the 'data' variable, containing some texts with apostrophes. The issue I'm facing is that the tool tip is not displaying the text after the apostrophe symbol. How can I include all texts, including apo ...

What is the best way to reset a dropdown list value in angular?

Is there a way to erase the selected value from an Angular dropdown list using either an x button or a clear button? Thank you. Code <div fxFlex fxLayout="row" formGroupName="people"> <mat-form-field appearance=&quo ...

Ways to increase the values in a textbox

My task involves handling checkboxes that are populated with data from a database. The goal is to have certain checkboxes pre-checked based on the retrieved data, and if any are not checked, their values should be entered into a textbox. For instance, con ...

Incorporating an HTML/Javascript game into a reactJS website: A step-by-step

After developing a game using plain javascript and HTML along with a few JS libraries, I find myself inquiring about the process of integrating this game into my ReactJS website. Typically, the game is initiated by opening the index.html file located with ...

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

After working on the provided code, I have managed to create a functionality where text from one textarea is copied to another textarea when a button is clicked using JavaScript. <head> <script type="text/javascript"> function displayOut(){ ...

Experience real-time updates on webpages with Node.js and Socket.io

Seeking to integrate real-time push notification updates from a node.js server to the browser client. Explored socket.io at http://socket.io/docs/rooms-and-namespaces/ The business requirement involves users viewing a page with customer information and o ...

One Functionality on Button is Failing to Execute among Several Tasks

I've encountered an issue with one of the tasks triggered by a button click. The button successfully executes two out of three tasks (hides them on click), except for the last task which involves a text-blinking JavaScript function. I've used the ...

Is Next.js the Ultimate Serverless Rendering Tool with Cloudflare Workers?

I am currently using Next.js version 9 and I am interested in utilizing Next's serverless deployment feature by integrating my application with Cloudflare Workers. According to the documentation for Next.js, all serverless functions created by Next f ...

Using JavaScript to insert a value through AJAX

I'm currently working on a website that displays the value of a .TXT file, and here is the progress I've made so far: <script> $(document).ready(function() { $("#responsecontainer").load("info.txt"); var refreshId = setInterval(function( ...

Modify HTML content according to the response received from the backend

I am trying to dynamically update the text content of an HTML tag based on a response from the backend. My application is running on a Django server where I have a timer in the backend measuring the processing time. I need to send this processing time to t ...