Botón que copia texto aleatorio de lista enumerada con Javascript

kiroprac · 20 Feb 2018

Hola betas lo que busco hacer es Como un boton que copie un texto al azar sacado de una lista enumerada.

Ejemplo:

<Boton Funcion "2" (copiar texto aleatorio 1 a 100)> Click aqui <boton>

.Funcion "2"
Copiar uno (Texto 1,Texto 2, texto 3, Etc 100 )

Creo que se entiende un poco mi idea también es necesario javascript.

Disculpen aun estoy verde en programación.

Wizard · 20 Feb 2018

[MENTION=189283]kiroprac[/MENTION] Compañero, he preparado algo rápido por acá, creo que te puede servir para lo que buscas:

HTML:

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Frases aleatorias</title>
</head>
<body>
   <button id="boton">Clic sobre mi</button>
   <p id="frase"></p>
   <script src="retazo.js"></script>
</body>
</html>

JAVASCRIPT:

Insertar CODE, HTML o PHP:

let num;
const frases = [
   "Los hombres incapaces de pensar por sí mismos, no piensan en absoluto. Oscar Wilde.",
   "Nunca llegarás al éxito por el ascensor, sino utilizando las escaleras. Joe Girard.",
   "No hay mejor maestro que la experiencia más amarga de uno mismo. Kovo.",
   "La vida es muy simple, pero nos empeñamos en hacerla difícil. Confucio.",
   "Cuando las oportunidades no llamen a tu puerta, construye una. Milton Berle.",
   "Antes de hablar, piensa, pero antes de pensar, lee. Frances Ann Lebowitz.",
   "Surgiendo de la nada, alcanzamos las cimas más elevadas de la miseria. Groucho Marx.",
   "Si hubiese seguido las reglas establecidas, no habría llegado a nada. Marilyn Monroe.",
   "Tanto si piensas que puedes como si no, estarás en lo cierto. – Henry Ford.",
   "Si algo no te gusta, cámbialo. Si no lo logras, cambia tu actitud. Maya Angelou."
]

document.getElementById('boton').addEventListener('click', function () {
   num = Math.floor(Math.random()*frases.length);
   document.getElementById('frase').innerHTML = `<p>${frases[num]}</p>`;
});

Para probarlo, pega el código html obviamente en un documento .html, y el javascript en uno que se llame retazo.js , espero esto te sirva, puedes modificarlo a tu gusto :encouragement:

kiroprac · 21 Feb 2018

Hola pedro Si me ha sido de ayuda tu respuesta gracias pero hay un inconveniente solo quería que cuando se haga clic en el boton copie la frase en el portapapeles y no se la muestre al usuario, se puede hacer ?

rahernande · 2 Mar 2018

Modifica el archivo retazo.js con el siguiente código para que se copie al portapapeles.

Insertar CODE, HTML o PHP:

let num;
const frases = [
   "Los hombres incapaces de pensar por sí mismos, no piensan en absoluto. Oscar Wilde.",
   "Nunca llegarás al éxito por el ascensor, sino utilizando las escaleras. Joe Girard.",
   "No hay mejor maestro que la experiencia más amarga de uno mismo. Kovo.",
   "La vida es muy simple, pero nos empeñamos en hacerla difícil. Confucio.",
   "Cuando las oportunidades no llamen a tu puerta, construye una. Milton Berle.",
   "Antes de hablar, piensa, pero antes de pensar, lee. Frances Ann Lebowitz.",
   "Surgiendo de la nada, alcanzamos las cimas más elevadas de la miseria. Groucho Marx.",
   "Si hubiese seguido las reglas establecidas, no habría llegado a nada. Marilyn Monroe.",
   "Tanto si piensas que puedes como si no, estarás en lo cierto. – Henry Ford.",
   "Si algo no te gusta, cámbialo. Si no lo logras, cambia tu actitud. Maya Angelou."
]

document.getElementById('boton').addEventListener('click', function () {
   function copiarAlPortapapeles(frase) {

  // Crea un campo de texto "oculto"
  var aux = document.createElement("input");

  // Asigna el contenido del elemento especificado al valor del campo
  aux.setAttribute("value", document.getElementById(frase).innerHTML);

  // Añade el campo a la página
  document.body.appendChild(aux);

  // Selecciona el contenido del campo
  aux.select();

  // Copia el texto seleccionado
  document.execCommand("copy");

  // Elimina el campo de la página
  document.body.removeChild(aux);

}


   num = Math.floor(Math.random()*frases.length);
   document.getElementById('frase').innerHTML = `<p>${frases[num]}</p>`;
   copiarAlPortapapeles('frase');
});

Botón que copia texto aleatorio de lista enumerada con Javascript

kiroprac

Wizard

kiroprac

rahernande

Temas similares