JavaScript - manejar el width de un <p> x variable

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 25 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

manejar el width de un <p> x variable

Publicado por Carla (1 intervención) el 28/05/2019 00:44:53
Hola gente, tengo que resolver este ej. y no logro variar el width de los <p>

Me podran ayudar?

pd: Los comentarios es lo que considere apropaiado escribir en el codigo para que funcione pero, no logro mover el width.

La consigna es:

Hacer un programa que pida al usuario dos números y dos colores. El programa deberá dibujar en la página dos bloques. Cada bloque debe mostrar el número, debe medir de ancho el porcentaje correspondiente a dicho número y debe tener el color de fondo elegido. Agregar un evento que intercambie colores de fondo y pueda ser reutilizado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
<title>Ej 3</title>
</head>
<body>
    <p id=aca>Click</p>
    <p id=alla>Click</p>
    <p><script>
        var num1
        var num2
        var col1
        var col2
 
        num1 = Number(prompt('Ingrese un número: ', ''))
        num2 = Number(prompt('Ingrese otro número: ', ''))
        col1 = prompt('Ingrese un color: ', '')
        col2 = prompt('Ingrese otro color: ','')
        texto1 = document.getElementById('aca').innerHTML; document.getElementById('aca').innerHTML = num1 + '%';
        document.write('<br>');
        texto2 = document.getElementById('alla').innerHTML; document.getElementById('alla').innerHTML = num2 + '%';
 
        document.getElementById('aca').style.backgroundColor = col1;
        document.getElementById('alla').style.backgroundColor = col2;
 
        //document.getElementById('aca').style.widh = num1;
        //document.getElementById('alla').style.width = num2 %;
 
        /*<p onclick="col2;document.getElementById('alla').innerHTML = col1"> Cambiar color</p>*/
 
</script></p>
</body>
</html>
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
Imágen de perfil de xve
Val: 2.998
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

manejar el width de un <p> x variable

Publicado por xve (2096 intervenciones) el 28/05/2019 08:35:56
Hola Carla, tienes que ponerlo así si lo quieres con %:
1
2
document.getElementById('aca').style.width = num1+"%";
document.getElementById('alla').style.width = num2+"%";

o así si lo quieres con pixeles:
1
2
document.getElementById('aca').style.width = num1+"px";
document.getElementById('alla').style.width = num2+"px";
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar