I can’t replace characters from one string to another - Is this a Javascript bug?

Asked

Viewed 80 times

-2

I am trying to make a substitution effect from one string to another, but without deleting the contents of the first string altogether. As if it were a special effect, each letter of a string turns into another word. At first I’m trying to do it like a typewriter, but later I want to do it randomly. However, I’m not able to make it work, it seems that is some bug.

Here’s the code:



    import { onMount } from "svelte";

    let title1 = "Seu lugar de vendas";
    let title2 = "Hub do Software";
    
    var k = 0;
    var speed = 150;

    onMount(() => {
        typeWriter();
    });

    function typeWriter() {
        if (k < title1.length) {
            if (k >= title2.length) {
                title2 += title1.charAt(k);
            }
            title2 = title2.replace(title2.charAt(k), title1.charAt(k));
            document.getElementById("demo").innerHTML = title2;
            k += 1;
            setTimeout(typeWriter, speed);
        }
    }

output:

EUGLU SV DEARENDAS
javascript string svelte
  • 1

    "I’m not getting to make it work, it seems like it’s some bug" debug to try to understand what’s wrong?

  • Hello Ricardo Punctual, apparently no error appears. The Code works, but does not work, it is difficult to explain. It automatically replaces the entire string and then makes two exchanges for itself. When it was to do otherwise, keep the first string and exchange for the second.

  • I added the tag [tag:svelte] on account of the event onMount(). Correct?

  • > "Debugged your code" You initialize temp2 with the final text, which causes that already in the first call to typeWriter() page element is modified to contain the value stored in temp2. Therefore, the visual impression that nothing happens.

  • I am not initiating with the final text, the final text is "random text 1". But it automatically switches to random text 1, it should receive the same text at the beginning as the original, with the difference of the first character of the final text. Next is to switch to the second character, that’s what the code says, but what happens is the opposite. It switches to the final text at first and then swaps each character of the final text with the respective characters of the original text, back to the final text. So I think you’re bugged, what happens is different than what’s written.

  • I’ll edit the code because I found the bug in my code and I fixed it, but it’s still bugged.

  • If I got it right, just do it: https://jsfiddle.net/tevc5rnL/

Show 2 more comments

1 answer

0

Here is the correct code to do this effect:

import { onMount } from "svelte";

    let title1 = "Your sales place";
    let title2 = "Software Hub";
    var part = "";
    var k = 0;
    var speed = 150;

    onMount(() => {
        typeWriter();
    });

    function sliceReplace(origin, final, k) {

        part = part.slice(0,k);
        part += final.charAt(k) + origin.slice(k+1);
        return part;

    }

    function typeWriter() {
        if (k < title1.length) {
            if (k >= title2.length) {
                title2 += title1.charAt(k);
            }
            document.getElementById("demo").innerHTML = sliceReplace(title2, title1, k);
            k += 1;
            setTimeout(typeWriter, speed);
        }
    }

Browser other questions tagged javascript string svelte

You are not signed in. Login or sign up in order to post.