Difficulty encountered when utilizing an if statement within a function

Question

Difficulty encountered when utilizing an if statement within a function

I have encountered a simple issue while using an if statement within a function.

The following code is working as intended:

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

However, when I declare the variables inside the function, it seems to continuously repeat the first letter of the variable text. What could be causing this?

Here's the modified code:

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>


function typeWriter() {

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

javascript

Answer 1

Answer №1

Within the typeWriter() function, a local variable "i" is declared, creating its own context where it is initialized to 0 each time the function is called. On the other hand, when the variable is declared outside of the function, it becomes part of the global context. In the second scenario described, variable "i" remains within the local context.

Take the time to debug both versions of the code line by line to determine which instance of variable "i" retains its last value and which one does not.

Answer 2

Within the typeWriter() function, a local variable "i" is declared, creating its own context where it is initialized to 0 each time the function is called. On the other hand, when the variable is declared outside of the function, it becomes part of the global context. In the second scenario described, variable "i" remains within the local context.

Take the time to debug both versions of the code line by line to determine which instance of variable "i" retains its last value and which one does not.

Answer 3

Answer №2

One possible reason for this issue is the repetitive calling of the typeWriter function every time it runs within your setTimeout, leading to a continuous loop. Consequently, the variable i gets reset to 0 with each iteration or function call.

In contrast, in the first scenario you provided, the variables are declared globally, preventing them from being reinitialized each time the typeWriter function is invoked. This aspect enables the recursive function to reach its designated base case and conclude successfully. On the other hand, in the second example, the value of i remains perpetually at 0 during the execution of the function.

To address this dilemma, you might want to consider utilizing local arguments if you prefer to maintain the variables within a localized scope:

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter('Lorem ipsum dummy text blabla.', 0)">Click me</button>

<p id="demo"></p>

<script>
var speed = 50;
function typeWriter(txt, i) {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    setTimeout(_ => typeWriter(txt, ++i), speed);
  }
}
</script>

</body>
</html>

Answer 4

One possible reason for this issue is the repetitive calling of the typeWriter function every time it runs within your setTimeout, leading to a continuous loop. Consequently, the variable i gets reset to 0 with each iteration or function call.

In contrast, in the first scenario you provided, the variables are declared globally, preventing them from being reinitialized each time the typeWriter function is invoked. This aspect enables the recursive function to reach its designated base case and conclude successfully. On the other hand, in the second example, the value of i remains perpetually at 0 during the execution of the function.

To address this dilemma, you might want to consider utilizing local arguments if you prefer to maintain the variables within a localized scope:

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter('Lorem ipsum dummy text blabla.', 0)">Click me</button>

<p id="demo"></p>

<script>
var speed = 50;
function typeWriter(txt, i) {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    setTimeout(_ => typeWriter(txt, ++i), speed);
  }
}
</script>

</body>
</html>

Answer 5

Answer №3

The issue arises from the declaration of var i = 0; within the function.

Each time the function is called, it resets the value of i to zero, causing only the first character to be printed on the screen. To prevent this from happening, it is recommended to define the counter outside of the function.

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>

var i = 0;
function typeWriter() {
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

Answer 6

The issue arises from the declaration of var i = 0; within the function.

Each time the function is called, it resets the value of i to zero, causing only the first character to be printed on the screen. To prevent this from happening, it is recommended to define the counter outside of the function.

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>

var i = 0;
function typeWriter() {
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

Difficulty encountered when utilizing an if statement within a function

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api

Executing `removeChild` within a timeout during page load does not yield the expected results

What is the method to display the Vue.js component's identifier?

Setting up a secure Node.JS HTTPS server on Cloud9 IDE

Is there a way to set up a global web socket in NextJs?

Error: Unable to locate module: 'material-ui/styles/colors'

Is there a way to use a single function to fill and calculate multiple input fields with PHP, Javascript, and

Is iterating through object with a hasOwnProperty validation necessary?

Insert well-formed JSON into an HTML element

Using jQuery to create transitions when a class is changed and adding a delay to the transition

Employing jQuery to redirect to a different URL when a button is clicked

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

A step-by-step guide to adding an object to an already existing array in Vue.js

Variations of a particular software package are necessary

The ng-click event is not triggering the Controller Function as expected

Can you save or transfer a localStorage JSON file to your computer's hard drive?

Retrieve a specific key value from a dictionary within a Flask function by employing JavaScript

Extract a free hour from the JavaScript time array without any filtering

Trigger a function when <a> is clicked, which will then increment the count by one and reflect this change in the database

chaotic telerik editor arrangement