4

Tengo el siguiente código:

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;

function typing() {
    var bubble = document.getElementById('bubble');
    
    if(a < msg.length) {
        bubble.innerHTML += msg.charAt(a);
        a++;
        setTimeout(typing, 50)
    }
}

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

La función typing() simula una máquina de escribir, cuyos textos los saca de un conjunto de ítems aleatorios predefinidos dentro de un array.

Mi intención es no solo poder simular una máquina de escribir con los ítems del array, sino también de la forma typing('¡Hello World!'), para poder añadir solo esta línea dentro de otra función distinta como respuesta a una acción del usuario.

Para aclarar la intención del código, es como un chat.

Os pido ayuda porque no controlo el tema de parámetros en funciones de Javascript, por no decir que soy novato en el lenguaje.

1 respuesta 1

2

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:

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

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.

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.

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>

1
  • He modificado un poco el snippet de modo que borre lo escrito antes de escribir el nuevo string dado por el input. Era exactamente lo que necesitaba, gracias por tu ayuda.
    – user128841
    Commented el 10 jun. 2019 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.