Skip to main content
se añadieron 370 caracteres en el cuerpo
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40

NOTA: Se podría hacer sin pasar ningún parametro y coger dentro de la función el valor del input con document.getElementById(idInput).value

Tendrás que controlar el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla.

Tendrás que controlar el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla.

NOTA: Se podría hacer sin pasar ningún parametro y coger dentro de la función el valor del input con document.getElementById(idInput).value

Tendrás que controlar el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla.

se añadieron 370 caracteres en el cuerpo
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40

Al hacer esto tendrás que cambiar el método en como se llama a la función y pensar como le puedes ir pasando:

foo();foo(param); o foo("Mensaje a imprimir");

Tendrás que controlar el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla.   

param = param.slice(1);

function typing(param) {
    var bubble = document.getElementById('bubble');
    
    if(param.length >0) {
        bubble.innerHTML += param.charAt(a);
        param = param.slice(1);
        setTimeout(function(){
          typing(param)
        }, 50)
    }
}

Quitas el a++; para que siempre imprima el primer carácter ya que ahora se va borrando segunsegún se imprime.

Al hacer esto tendrás que cambiar el método en como se llama a la función y pensar como le puedes ir pasando el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla.  param = param.slice(1);

Quitas el a++; para que siempre imprima el primer carácter ya que ahora se va borrando segun se imprime.

Al hacer esto tendrás que cambiar el método en como se llama a la función:

foo();foo(param); o foo("Mensaje a imprimir");

Tendrás que controlar el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla. 

param = param.slice(1);

function typing(param) {
    var bubble = document.getElementById('bubble');
    
    if(param.length >0) {
        bubble.innerHTML += param.charAt(a);
        param = param.slice(1);
        setTimeout(function(){
          typing(param)
        }, 50)
    }
}

Quitas el a++; para que siempre imprima el primer carácter ya que ahora se va borrando según se imprime.

Origen Enlace
x3k
  • 3.8k
  • 12
  • 40

Lo que deberías de hacer en primer lugar es que la función sea reutilizable mediante un parámetro: function foo(){}function foo(param){}

Al hacer esto tendrás que cambiar el método en como se llama a la función y pensar como le puedes ir pasando el parámetro de manera que sea útil cuando la llamas tu, y cuando la función se llama por si misma para que no imprima siempre el mismo parámetro. Yo lo que he pensado, viendo que imprimes la primera letra del string es borrar la letra después de imprimirla. param = param.slice(1);

Quitas el a++; para que siempre imprima el primer carácter ya que ahora se va borrando segun se imprime.

Lo demás que he añadido al snippet son comprobaciones para saber cuando ha sido llamada desde el botón para así poder limpiar el output.

Snippet con el ejemplo:

var object = {
    name: 'Marcelo'
}

var array = [
    'Hola ' + object['name'],
    'Hola de nuevo ' + object['name']
];

function random(array) {
    return array[Math.floor(Math.random() * array.length)]
}

var msg    = random(array);
var a      = 0;
var buttonClick = false;

function typing(param) {
    var bubble = document.getElementById('bubble');
    if(document.activeElement.id != null && document.activeElement.id == "actionButton" && buttonClick == false){
      buttonClick = true;
      bubble.innerHTML = "";
    }
    
    if(param.length >0) {
        bubble.innerHTML += param.charAt(a);
        param = param.slice(1);
        setTimeout(function(){
          typing(param)
        }, 50)
    } else{
      buttonClick = false;
    }
}

window.onload = function() {
    typing(msg);
}
<div id="bubble"></div>

<input type="text" id="inputParam">
<button id="actionButton" onclick="typing(document.getElementById('inputParam').value)">Escribir</button>