JavaScript - repetir la palabra ingresada tantas veces como lo indique el usuario

 
Vista:

repetir la palabra ingresada tantas veces como lo indique el usuario

Publicado por dvid (1 intervención) el 23/08/2020 01:42:01
Diseñar e implementar una página web (html+javascript) que le solicite al usuario una palabra cualquiera y el número de veces que la desea imprimir. Al dar click en un determinado botón en la página se debe repetir la palabra ingresada tantas veces como lo indique el usuario.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 26
Ha aumentado su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

repetir la palabra ingresada tantas veces como lo indique el usuario

Publicado por Jonay Zevenzui (4 intervenciones) el 23/08/2020 15:29:59
html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <label for="word">
            Escriba una palabra
        </label>
        <input type="text" id="word"/><br>
        <label for="repeat">
            Numero de repeticiones
        </label>
        <input type="number" id="repeat" min="0"/><br>
        <button id="btn">Click</button>
        <div id="container">
 
        </div>
    </body>
</html>

javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload= function(){
    repeat = document.getElementById('repeat');
    word = document.getElementById('word');
    btn = document.getElementById('btn').addEventListener('click', btnClick);
    container = document.getElementById('container');
};
var repeat;
var n;
var word;
var btn;
var i;
var container;
 
function btnClick(){
    n = repeat.value;
    for(i = 0; i < n; i++){
        let p = document.createElement('p');
        p.setAttribute('id', 'parrafo'+i);
        p.setAttribute('class', 'parrafo');
        p.innerText = word.value;
        container.appendChild(p);
    }
}

y aunque no lo pide un poco de estilo con css:
1
2
3
4
5
6
7
8
9
@keyframes show{
    from{opacity:0;}
    to{opacity:1;}
}
.parrafo{
    animation-name:show;
    animation-duration:0.5s;
    animation-timing-function:linear;
}

Epero te sirva. Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar