I'm having trouble identifying the cause of the issue with the line breaking

I recently encountered an issue with a script while using the typed.js library. The code is supposed to output 3 lines followed by 1 final line, but it currently only outputs 2 lines and 1 final line. I attempted to fix the code, but it seems to freeze without displaying any errors.

Fortunately, I was able to modify the code without encountering any errors. It now successfully outputs 2 lines followed by 1 final line.

  const lineNumber = app.id !== 2 ? ++app.id : (app.id += 2);

  setTimeout(() => {
    const typed = new Typed(`#line${lineNumber}`, {
      strings: text,
      typeSpeed: speed,
      onComplete: callback,
    });
  }, timeout);
};

$.getJSON(ipgeolocation, (data) => {
  writeLine(["line1"], 30, () => {
    if (app.skippedIntro) return;

    clearCursor();

    const usernames = ['user', 'dude'];

    const ip = data.ip ? data.ip : usernames[Math.floor(Math.random() * usernames.length)];
    const country = data.country_name ? data.country_name : 'your country';

    writeLine([`line2`], 30, 500, () => {
      if (app.skippedIntro) return;
      
      clearCursor();
        
      writeLine([`start`], 120, 500, () => {
        timeouts.push(
          setTimeout(() => {
            if (app.skippedIntro) return;

            clearCursor();

            setTimeout(() => {
              skipIntro();
            }, 500);
          }, 1000)
        );
      });
    });
  });
});

This particular version of the code does not function as intended. Ideally, it should output 3 lines followed by 1 final line. 1.

  const lineNumber = app.id !== 2 ? ++app.id : (app.id += 2);

  setTimeout(() => {
    const typed = new Typed(`#line${lineNumber}`, {
      strings: text,
      typeSpeed: speed,
      onComplete: callback,
    });
  }, timeout);
};

$.getJSON(ipgeolocation, (data) => {
  writeLine(["line1"], 30, () => {
    if (app.skippedIntro) return;

    clearCursor();

    const usernames = ['user', 'dude'];

    const ip = data.ip ? data.ip : usernames[Math.floor(Math.random() * usernames.length)];
    const country = data.country_name ? data.country_name : 'your country';

    writeLine([`line2`], 30, 500, () => {
      if (app.skippedIntro) return;
      
      clearCursor();

      writeLine([`line3`], 30, 500, () => {
        if (app.skippedIntro) return;
        
        clearCursor();
        
        writeLine([`start`], 120, 500, () => {
        timeouts.push(
          setTimeout(() => {
            if (app.skippedIntro) return;

            clearCursor();

            setTimeout(() => {
              skipIntro();
            }, 500);
          }, 1000)
        );
        });
      });
    });
  });
});

Answer №1

We include the primary groups and once you reach 3, it is necessary to incorporate 2 more in order to understand the fifth.

  const lineNumber = app.id !== 3 ? ++app.id : (app.id += 2);

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

The $_POST value is consistently the final entry within my <tr> element

I'm facing a challenge that has me stuck. I have a basic webpage where I display a table of all Users queried from a database. The idea is that when a user clicks on a table row, they should be redirected to another page where they can edit the select ...

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

Breaking down the steps to flip between two images when clicked in Vue.js

I'm currently trying to implement a feature in Vue.js where images switch on click. The functionality I'm aiming for is as follows: Upon initial load, the image displays in black, then upon clicking/selecting it, the image transitions into a blu ...

HTML code for a grid view that allows users to expand and collapse rows in a

I'm looking for a gridview with 'n' rows, each containing 4 columns/items to be displayed. My goal is to accomplish this using an Html/Javascript/Vuejs template exclusively. The desired view should look like this: https://i.sstatic.net/kSx7 ...

resolved after a new promise returned nothing (console.log will output undefined)

Here is my Promise Function that iterates through each blob in Azure BlobStorage and reads each blob. The console.log(download) displays the values as JSON. However, when trying to close the new Promise function, I want the resolve function to return the ...

Issue with Android app: Incorrect information is shown in the toast notification when clicking on a list view item

Whenever I click on a specific id, it displays data from another id. Please review the code below to understand my issue. What is wrong with this code? It seems like I'm not storing any position in it. If that's the only problem, please provide ...

Sending JSON data using CURL in PHP

Attempting to send JSON data using CURL, I have set up a table to store the information and responses received from the destination URL. However, every response indicates that my "Post data is empty", leaving me puzzled as to why this issue persists. To ...

Reveal the administrator's details exclusively when the associated radio button is chosen

Managing administrators for a post can be done through an editing page with corresponding radio buttons. Each radio button is linked to a different administrator, and selecting one populates the form fields with that admin's details. The issue arises ...

"Encountered an error message: Unable to retrieve property 'getCapabilities' due to a TypeError

Everything was going smoothly with my tests until I encountered an issue when the browser.getCapabilities(); method was called in the OnComplete function, resulting in an error. //The HTMLReport is triggered once all tests are completed onComplete: f ...

Refreshing div with updated form/content using jQuery and AJAX

Is it possible to use jQuery/AJAX functions to replace a form (or any content) with another form when a button is clicked, without reloading the page? Essentially creating a multi-part form dynamically. Can I achieve this with the following code snippet? ...

Utilizing data from a JavaScript array and merging it with basic HTML structure

Every day, a js array source on a remote server gets updated: var io = new Array(); nsi[0] = new Array('','Frank','','Factory worker','Mercedes',374.0,26.2,76,181,'',75,'Audi',1456.5,27 ...

One way to concatenate texts in an array of dictionaries while keeping the order intact in JS/React is to compare and match specific key-value pairs

My dataset looks something like this: Record= [ { "tid":1, token_text": "Canis", "spanid": 1, "label": "Name" }, { "tid":2, "token_text": "Familiaris", "spanid": ...

Why won't the JavaScript work when linking to a carousel slide from another page?

Trying to follow this 6-year-old guide, but my JavaScript isn't triggering when the URL contains #slide_ - have things changed? Linking to a specific Bootstrap carousel slide from another page My code on page 2: <!doctype html> <html> &l ...

Trouble with 'this.function' and handling scope within my code

Hi there! I'm having an issue with this code snippet: Whenever I reach line 109, I encounter an error message that reads "TypeError: Result of expression 'this.allVarsDefined' [undefined] is not a function." I find scope in javascript to b ...

What is the best way to condense a repetitive method declaration and make it more concise?

I'm facing a situation where I have declared similar const values. Here's my current setup... import React from 'react' function Component_a() { const x = 5; const y = 10; const image_a = [...Array(x)].map((e, i) => ...

How can the string '0' be transformed into the number 0 using JavaScript?

My current challenge involves error handling for 2 input values, where I am using regex to ensure that the input is always a number. The issue arises when I want to avoid triggering error handling if the user enters '0'. Currently, I am using the ...

Tips for handling form submissions within an Electron application on your desktop

I came across this question, but I'm still struggling to understand the best approach to handling forms in Electron. I am currently using the code snippet below and aiming to utilize dexie.js to store the form data upon submission. However, I'm ...

How can I code a div to automatically scroll to the top of the page?

I'm attempting to implement something similar in WordPress - I want a div containing an advertisement to initially start 300px down the page, then scroll up with the page until it reaches the top, and finally stay there if the user continues to scroll ...

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

AngularJS checkbox ng-repeat directive not displaying controller data

I am facing an issue with rendering checkbox data from the Controller file in my HTML. Here is the code snippet: HTML: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script& ...