Is the utilization of javascript functions intertwined with the specific version of bootstrap being used?

I wrote a function that breaks down each letter in a paragraph to create a typing effect. However, after taking a break for a few days, I noticed that the effect was now the opposite – the letters were disappearing. To solve this, I decided to animate the paragraph letter by letter to achieve a typewriting effect. Initially, everything worked perfectly, but then I updated the bootstrap version and the function started behaving incorrectly. Now, when I load the web page, the paragraph gradually fades away. What could be causing this issue? I have included the code below. Thank you in advance!

   <pre>
    index.html
    </pre> 
        

      <div class="id">

              <h1 class="title">

                  Hot Beans Coffee Shop
              </h1> 

            <p class="subtitle">

                "Born out of unique appreciation for coffee"
                
            </p>

            <script src="./app.js"></script>
            
            
        </div>
    
    
  <pre>
       app.js
    </pre>
    
    
       const text= document.querySelector(".id.subtitle");

       const strText=text.textContent;

       const splitText= strText.split("");

       text.textContent = "";
    
       for ( let i=0 ; i<splitText.length; i++){

           text.innerHTML+="<span>" + splitText[i] + "</span>";
      }
    
        let char=0;

        let timer=setInterval(onTick, 50);
    
       function onTick(){

           const span=text.querySelectorAll("span")[char];

           span.classList.add("fade");

           char++;

            if(char === splitText.length){

            complete();

            return; 
           }
        }
    
        function complete(){

            clearInterval(timer);

             timer=null;
      }
    
    
   <pre>
       app.js
    </pre>
        
   

         
            span{

                opacity: 0;
 
                transition: all 0.3 s ease;
    
            } 

          span.fade{
        
             opacity: 1;
    
           }

Answer №1

Everything seems to be running smoothly with a few tweaks made. I adjusted the selector from ".id.subtitle" to ".id .subtitle" and changed the span opacity from 1 to 0.

const text = document.querySelector(".id .subtitle");
const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for (let i = 0; i < splitText.length; i++) {
  text.innerHTML += "<span class='typing-text'>" + splitText[i] + "</span>";
}

let char = 0;
let timer = setInterval(onTick, 50);
function onTick() {
  const span = text.querySelectorAll(".typing-text")[char];
  span.classList.add("custom-fade");
  char++;
  if (char === splitText.length) {
    complete();
    return;
  }
}

function complete() {
  clearInterval(timer);
  timer = null;
}
span.typing-text{
    opacity: 0;
    transition: all 0.3 s ease;
} 

span.typing-text.custom-fade{
    opacity: 1;
}
 <div class="id">
      <h1 class="title">Hot Beans Coffee Shop</h1> 
      <p class="subtitle">"Born out of unique appreciation for coffee"</p>
 </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

Having difficulty extracting specific data from the table

I am currently utilizing selenium and Python to extract data from a website. However, I am encountering difficulties while trying to scrape a specific table using Beautiful Soup. Here is the code snippet: from selenium import webdriver from selenium.webdr ...

Looking at a web page within another web page by utilizing XMLHttpRequest

Recently, I created a web app featuring a preview window that displays the content of an HTML page. To keep up with the constant updates to the HTML page, I have set the preview window to refresh every 0.5 seconds. Although the functionality works correct ...

JavaScript Equivalent of jQuery's removeClass and addClass Functions

I am faced with the challenge of rewriting the following code without using jQuery: document.querySelector('.loading-overlay').classList.remove('hidden'); Can anyone provide guidance on how this can be achieved? ...

Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...

Steps to add a label below a text input field

Within a form, I have two text boxes and I would like to add labels underneath each of them for better clarification. To illustrate my idea, here is a simple diagram: (input1)<--space-->(input2) <label1><--space--><label2> Is ther ...

Alter the webpage's background color using setInterval while also implementing automatic scrolling based on active records

I've created a row of blinking div elements with a time interval, ensuring that only one div blinks at any given moment. To see it in action, please view the demo below: var arr = $(".boxes"); var current = 0; function bgChange() { if (a ...

Typescript: Shifting an image to the left and then returning it to the right

As a newcomer to Typescript, JavaScript, and front-end development, I am experimenting with creating a simulation of an AI opponent's "thinking" process when playing cards in a game. The idea is to visually represent the AI's decision-making by s ...

Design incisions on Cylinder Structure

I am facing a challenge while attempting to replicate a scene. The specific detail I am struggling with is quite intricate. The scene features a surface made of cylinder geometry with numerous small circular notches. Inside these notches, there are white ...

Fetching User Details Including Cart Content Upon User Login

After successfully creating my e-commerce application, I have managed to implement API registration and login functionalities which are working perfectly in terms of requesting and receiving responses. Additionally, I have integrated APIs for various produ ...

The Bootstrap grid column remains steady and does not fluctuate

Trying to get a grasp on Bootstrap 4, I've set up my page with a three-column layout and defined the following properties for each column: Column 1: col-sm-9 col-md-8 Column 2: col-sm-3 col-md-2 order-sm-first Column 3: col-xs-12 col-md-2 My expecta ...

attempting to fulfil a promise through a resolution

I am currently attempting to use a resolve with a promise in response to an issue with filters that I am currently tackling. However, my resolve function is not yet functioning as expected. I have decided to implement this approach based on advice I recei ...

Can you explain the distinction between the controls and get methods used with the FormGroup object?

I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome: this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value; this.data.affiliateLinkUrl = this.bookLinkForm.get(' ...

Tips for setting up Craigslist email forwarding through Node.js (receiving emails to a dynamically generated email address and redirecting them)

After extensive searching, I only came across this Stack Overflow post about Email Forwarding like Craigslist in Rails: Email Forwarding like Craigslist - Rails I spent a significant amount of time googling, but couldn't find any solutions using Node ...

Achieving a minimum width while centering a row in Bootstrap

Excuse me for this somewhat odd query about Bootstrap, but I seem to be a bit scattered today... I would like to change the background color of my container-fluid div so that it covers the entire width of the page. However, I want the child row-fluid div t ...

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

cross-domain policy file

Currently, I am attempting to make a web service call from JavaScript using AJAX: $.ajax({ type: "GET", url: "http://[REMOTE-SERVER-IP]:8080/api/service", contentType: "application/jsonp", crossDomain: true, success: successFunc, ...

Transform a hexadecimal string into a hexadecimal color representation within SCSS

I have a plethora of colors stored in JSON format. I am utilizing rootbeer with gulp to convert them into Sass maps for processing by SCSS: { "blue": "33A2FF" } into $colors: ( "blue": "33A2FF" ); I am able to use ...

Sending data using Ajax to the server-side code in ASP.NET

Struggling to successfully pass a series of values through Ajax to a code-behind method in order to insert the data into a database table. However, encountering issues where string variables are being received as empty strings and int variables as 0. The ...

Run a Python script to capture mouse coordinates using Selenium

Greetings, I am currently utilizing selenium webdriver to retrieve the X,Y coordinates of the cursor at a specific moment on the webdriver screen. However, I am facing challenges with the implementation of a method that involves using driver.execute_script ...

Removing duplicate entries from a dropdown menu can be achieved by implementing

As a newcomer to the world of PHP PDO, I've learned that the database connection should be in a separate PHP file. However, after spending an entire day trying different things, I'm still facing issues. I suspect that the duplicate entries are a ...