Change border-radious from Javascript

Navigation
2

Good, as you can see if you execute the program, it is a text in which we can basically modify the color, text, etc. However, adding border radious and putting space between words does not work. It may be that the CSS reference in JS is wrong, since they are not named the same as not having - Example: ( font-size, fontSize )

HTML 

<!doctype html>
<html>
<head>
  <script src="DH16.js"></script>
  <link rel="StyleSheet" href="DH16.css" type="text/css">
</head>
<body>
  <p id="principal">
     Modifique este texto a su gusto
  </p>
   <br>
   <br>
   Color de fuente:
   <select onChange="cambiarColorFuente()" id="colorfuente">
     <option value="#000000">Negro</option>
     <option value="#ff0000">Rojo</option>
     <option value="#00ff00">Verde</option>
     <option value="#0000ff">Azul</option>
   </select>
   <br>
   Color de fondo:
   <select onChange="cambiarColorDeFondo()" id="colorfondo">
     <option value="#ffff00">Amarillo</option>
     <option value="#ff0000">Rojo</option>
     <option value="#00ff00">Verde</option>
     <option value="#0000ff">Azul</option>
   </select>
   <br>
   Tamaño de fuente:
   <select onChange="cambiarTamano()" id="cambiartamano">
     <option value="1px">1px</option>
     <option value="5px">5px</option>
     <option value="10px">10px</option>
     <option value="15px">15px</option>
     <option value="20px">20px</option>
     <option value="30px">30px</option>
     <option value="40px">40px</option>
   </select>
   <br>
   Tipo de fuente:
   <select onChange="cambiarFuente()" id="cambiarfuente">
     <option value="Verdana">Verdana</option>
     <option value="Arial">Arial</option>
     <option value="Courier">Courier</option>
   </select>
   <br>
   Estilo de fuente:
   <select onChange="estiloDeFuente()" id="estilofuente">
     <option value="normal">Normal</option>
     <option value="Oblique">Oblique</option>
     <option value="Italic">Italic</option>
   </select>
   <br>
   Alineacion de texto:
   <select onChange="alineacion()" id="alineacion">
     <option value="center">Centrado</option>
     <option value="right">Derecha</option>
     <option value="left">Izquierda</option>
   </select>
   <br>
   Decoracion de texto:
   <select onChange="decoracion()" id="decoracion">
     <option value="none">Ninguno</option>
     <option value="underline">Subrallado</option>
     <option value="overline">Subrallado superior</option>
     <option value="line-through">Tachado</option>
   </select>
   <br>
   Peso de la fuente:
   <select onChange="pesoFuente()" id="peso">
     <option value="normal">Normal</option>
     <option value="bold">Negrita</option>
   </select>
   <br>
   Espacio entre palabras:
   <select onChange="espacioPalabras()" id="ep">
     <option value="3">3</option>
     <option value="6">6</option>
     <option value="9">9</option>
     <option value="12">12</option>
   </select>
   <br>
   Transformacion de texto:
   <select onChange="transformacionTexto()" id="transformacion">
     <option value="uppercase">Mayusculas</option>
     <option value="lowercase">Minusculas</option>
     <option value="none">Ninguno</option>
   </select>
   <br>
   Ancho del borde:
   <select Onchange="anchoDeBorde()" id="anchoborde">
     <option value="0px">0</option>
     <option value="1px">1</option>
     <option value="2px">2</option>
     <option value="3px">3</option>
     <option value="4px">4</option>
     <option value="5px">5</option>
     <option value="6px">6</option>
     <option value="7px">7</option>
   </select>
   <br>
   Estilo de borde:
<select onChange="cambiarEstiloBorde()" id="estiloborde">
<option value="none">none</option>
<option value="hidden">hidden</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
<option value="solid">solid</option>
<option value="double">double</option>
<option value="groove">groove</option>
<option value="ridge">ridge</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
</select>
<br>
Color de borde:
<select onChange="cambiarColorBorde()" id="colorborde">
<option value="#000000">negro</option>
<option value="#ffff00">amarillo</option>
<option value="#ff0000">rojo</option>
<option value="#00ff00">verde</option>
<option value="#0000ff">azul</option>
</select>
<br>
padding:
<select onChange="cambiarPadding()" id="padding">
<option value="0">0</option>
<option value="4" selected="selected">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
<br>
margin:
<select onChange="cambiarMargin()" id="margin">
<option value="0">0</option>
<option value="4" selected="selected">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
<br>
Bordeado redondo:
<select onChange="borderRadious()" id="radious">
  <option value="0px">0</option>
  <option value="1px">1</option>
  <option value="2px">2</option>
  <option value="3px">3</option>

</body>
</html>

JavaScript 

function cambiarColorFuente(){
  var principal=document.getElementById('principal');
  var cf=document.getElementById('colorfuente');
  principal.style.color=cf.value;
}

function cambiarColorDeFondo(){
  var principal=document.getElementById('principal');
  var cdf=document.getElementById('colorfondo');
  principal.style.backgroundColor=cdf.value;
}

function cambiarTamano(){
  var principal=document.getElementById('principal');
  var ct=document.getElementById('cambiartamano');
  principal.style.fontSize=ct.value;
}

function cambiarFuente(){
  var principal=document.getElementById('principal');
  var cff=document.getElementById('cambiarfuente');
  principal.style.fontFamily=cff.value;
}

function estiloDeFuente(){
  var principal=document.getElementById('principal');
  var edf=document.getElementById('estilofuente');
  principal.style.fontStyle=edf.value;
}

function alineacion(){
  var principal=document.getElementById('principal');
  var a=document.getElementById('alineacion');
  principal.style.textAlign=a.value;
}

function decoracion(){
  var principal=document.getElementById('principal');
  var d=document.getElementById('decoracion');
  principal.style.textDecoration=d.value;
}

function pesoFuente(){
  var principal=document.getElementById('principal');
  var p=document.getElementById('peso');
  principal.style.fontWeight=p.value;
}

function espacioPalabras(){
  var principal=document.getElementById('principal');
  var ep=document.getElementById('ep');
  principal.style.wordSpacing=ep.value;
}

function transformacionTexto(){
  var principal=document.getElementById('principal');
  var t=document.getElementById('transformacion');
  principal.style.textTransform=t.value;
}

function anchoDeBorde(){
  var principal=document.getElementById('principal');
  var adb=document.getElementById('anchoborde');
  principal.style.borderWidth=adb.value;
}

function cambiarEstiloBorde(){
  var principal=document.getElementById('principal');
  var ceb=document.getElementById('estiloborde');
  principal.style.borderStyle=ceb.value;
}

function cambiarColorBorde(){
  var principal=document.getElementById('principal');
  var ccb=document.getElementById('colorborde');
  principal.style.borderColor=ccb.value;
}

function cambiarPadding(){
  var principal=document.getElementById('principal');
  var cp=document.getElementById('padding');
  principal.style.padding=cp.value;
}

function cambiarMargin(){
  var principal=document.getElementById('principal');
  var cm=document.getElementById('margin');
  principal.style.margin=cm.value;
}

function borderRadious(){
  var principal=document.getElementById('principal');
  var br=document.getElementById('radious');
  principal.style.borderRadious=br.value;
}

CSS 

#principal {
  font-size:15px;
  border:1px solid #000000;
  background-color: #ffff00;
}
    
asked by Vendetta 08.08.2017 в 20:29
source

3 answers

2

you still needed to add px in some parts of the code and in js is borderRadius , and you type borderRadious here's the code already modified:
JS 

function cambiarColorFuente(){
  var principal=document.getElementById('principal');
  var cf=document.getElementById('colorfuente');
  principal.style.color=cf.value;
}

function cambiarColorDeFondo(){
  var principal=document.getElementById('principal');
  var cdf=document.getElementById('colorfondo');
  principal.style.backgroundColor=cdf.value;
}

function cambiarTamano(){
  var principal=document.getElementById('principal');
  var ct=document.getElementById('cambiartamano');
  principal.style.fontSize=ct.value;
}

function cambiarFuente(){
  var principal=document.getElementById('principal');
  var cff=document.getElementById('cambiarfuente');
  principal.style.fontFamily=cff.value;
}

function estiloDeFuente(){
  var principal=document.getElementById('principal');
  var edf=document.getElementById('estilofuente');
  principal.style.fontStyle=edf.value;
}

function alineacion(){
  var principal=document.getElementById('principal');
  var a=document.getElementById('alineacion');
  principal.style.textAlign=a.value;
}

function decoracion(){
  var principal=document.getElementById('principal');
  var d=document.getElementById('decoracion');
  principal.style.textDecoration=d.value;
}

function pesoFuente(){
  var principal=document.getElementById('principal');
  var p=document.getElementById('peso');
  principal.style.fontWeight=p.value;
}

function espacioPalabras(){
  var principal=document.getElementById('principal');
  var ep=document.getElementById('ep');
  principal.style.wordSpacing=ep.value;
}

function transformacionTexto(){
  var principal=document.getElementById('principal');
  var t=document.getElementById('transformacion');
  principal.style.textTransform=t.value;
}

function anchoDeBorde(){
  var principal=document.getElementById('principal');
  var adb=document.getElementById('anchoborde');
  principal.style.borderWidth=adb.value;
}

function cambiarEstiloBorde(){
  var principal=document.getElementById('principal');
  var ceb=document.getElementById('estiloborde');
  principal.style.borderStyle=ceb.value;
}

function cambiarColorBorde(){
  var principal=document.getElementById('principal');
  var ccb=document.getElementById('colorborde');
  principal.style.borderColor=ccb.value;
}

function cambiarPadding(){
  var principal=document.getElementById('principal');
  var cp=document.getElementById('padding');
  principal.style.padding=cp.value;
}

function cambiarMargin(){
  var principal=document.getElementById('principal');
  var cm=document.getElementById('margin');
  principal.style.margin=cm.value;
}

function borderRadious(){
  var principal=document.getElementById('principal');
  var br=document.getElementById('radious');
  principal.style.borderRadius=br.value;
}

And the html 

<!doctype html>
<html>
<head>

</head>
<body>
  <p id="principal">
     Modifique este texto a su gusto
  </p>
   <br>
   <br>
   Color de fuente:
   <select onChange="cambiarColorFuente()" id="colorfuente">
     <option value="#000000">Negro</option>
     <option value="#ff0000">Rojo</option>
     <option value="#00ff00">Verde</option>
     <option value="#0000ff">Azul</option>
   </select>
   <br>
   Color de fondo:
   <select onChange="cambiarColorDeFondo()" id="colorfondo">
     <option value="#ffff00">Amarillo</option>
     <option value="#ff0000">Rojo</option>
     <option value="#00ff00">Verde</option>
     <option value="#0000ff">Azul</option>
   </select>
   <br>
   Tamaño de fuente:
   <select onChange="cambiarTamano()" id="cambiartamano">
     <option value="1px">1px</option>
     <option value="5px">5px</option>
     <option value="10px">10px</option>
     <option value="15px">15px</option>
     <option value="20px">20px</option>
     <option value="30px">30px</option>
     <option value="40px">40px</option>
   </select>
   <br>
   Tipo de fuente:
   <select onChange="cambiarFuente()" id="cambiarfuente">
     <option value="Verdana">Verdana</option>
     <option value="Arial">Arial</option>
     <option value="Courier">Courier</option>
   </select>
   <br>
   Estilo de fuente:
   <select onChange="estiloDeFuente()" id="estilofuente">
     <option value="normal">Normal</option>
     <option value="Oblique">Oblique</option>
     <option value="Italic">Italic</option>
   </select>
   <br>
   Alineacion de texto:
   <select onChange="alineacion()" id="alineacion">
     <option value="center">Centrado</option>
     <option value="right">Derecha</option>
     <option value="left">Izquierda</option>
   </select>
   <br>
   Decoracion de texto:
   <select onChange="decoracion()" id="decoracion">
     <option value="none">Ninguno</option>
     <option value="underline">Subrallado</option>
     <option value="overline">Subrallado superior</option>
     <option value="line-through">Tachado</option>
   </select>
   <br>
   Peso de la fuente:
   <select onChange="pesoFuente()" id="peso">
     <option value="normal">Normal</option>
     <option value="bold">Negrita</option>
   </select>
   <br>
   Espacio entre palabras:
   <select onChange="espacioPalabras()" id="ep">
     <option value="3px">3</option>
     <option value="6px">6</option>
     <option value="9px">9</option>
     <option value="12px">12</option>
   </select>
   <br>
   Transformacion de texto:
   <select onChange="transformacionTexto()" id="transformacion">
     <option value="uppercase">Mayusculas</option>
     <option value="lowercase">Minusculas</option>
     <option value="none">Ninguno</option>
   </select>
   <br>
   Ancho del borde:
   <select Onchange="anchoDeBorde()" id="anchoborde">
     <option value="0px">0</option>
     <option value="1px">1</option>
     <option value="2px">2</option>
     <option value="3px">3</option>
     <option value="4px">4</option>
     <option value="5px">5</option>
     <option value="6px">6</option>
     <option value="7px">7</option>
   </select>
   <br>
   Estilo de borde:
<select onChange="cambiarEstiloBorde()" id="estiloborde">
<option value="none">none</option>
<option value="hidden">hidden</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
<option value="solid">solid</option>
<option value="double">double</option>
<option value="groove">groove</option>
<option value="ridge">ridge</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
</select>
<br>
Color de borde:
<select onChange="cambiarColorBorde()" id="colorborde">
<option value="#000000">negro</option>
<option value="#ffff00">amarillo</option>
<option value="#ff0000">rojo</option>
<option value="#00ff00">verde</option>
<option value="#0000ff">azul</option>
</select>
<br>
padding:
<select onChange="cambiarPadding()" id="padding">
<option value="0px">0</option>
<option value="4px" selected="selected">4</option>
<option value="8px">8</option>
<option value="12px">12</option>
<option value="16px">16</option>
<option value="20px">20</option>
</select>
<br>
margin:
<select onChange="cambiarMargin()" id="margin">
<option value="0px">0</option>
<option value="4px" selected="selected">4</option>
<option value="8px">8</option>
<option value="12px">12</option>
<option value="16px">16</option>
<option value="20px">20</option>
</select>
<br>
Bordeado redondo:
<select onChange="borderRadious()" id="radious">
  <option value="0px">0</option>
  <option value="1px">1</option>
  <option value="2px">2</option>
  <option value="3px">3</option>

</body>
</html>

I hope you greetings

    
answered by 08.08.2017 / 20:53
source
2

You wrote the name wrong. Instead of borderRadious it should be borderRadius (without the o). and you have to specify px to wordSpacing. 

function cambiarColorFuente(){
  var principal=document.getElementById('principal');
  var cf=document.getElementById('colorfuente');
  principal.style.color=cf.value;
}

function cambiarColorDeFondo(){
  var principal=document.getElementById('principal');
  var cdf=document.getElementById('colorfondo');
  principal.style.backgroundColor=cdf.value;
}

function cambiarTamano(){
  var principal=document.getElementById('principal');
  var ct=document.getElementById('cambiartamano');
  principal.style.fontSize=ct.value;
}

function cambiarFuente(){
  var principal=document.getElementById('principal');
  var cff=document.getElementById('cambiarfuente');
  principal.style.fontFamily=cff.value;
}

function estiloDeFuente(){
  var principal=document.getElementById('principal');
  var edf=document.getElementById('estilofuente');
  principal.style.fontStyle=edf.value;
}

function alineacion(){
  var principal=document.getElementById('principal');
  var a=document.getElementById('alineacion');
  principal.style.textAlign=a.value;
}

function decoracion(){
  var principal=document.getElementById('principal');
  var d=document.getElementById('decoracion');
  principal.style.textDecoration=d.value;
}

function pesoFuente(){
  var principal=document.getElementById('principal');
  var p=document.getElementById('peso');
  principal.style.fontWeight=p.value;
}

function espacioPalabras(){
  var principal=document.getElementById('principal');
  var ep=document.getElementById('ep');
  principal.style.wordSpacing=ep.value + "px";
}

function transformacionTexto(){
  var principal=document.getElementById('principal');
  var t=document.getElementById('transformacion');
  principal.style.textTransform=t.value;
}

function anchoDeBorde(){
  var principal=document.getElementById('principal');
  var adb=document.getElementById('anchoborde');
  principal.style.borderWidth=adb.value;
}

function cambiarEstiloBorde(){
  var principal=document.getElementById('principal');
  var ceb=document.getElementById('estiloborde');
  principal.style.borderStyle=ceb.value;
}

function cambiarColorBorde(){
  var principal=document.getElementById('principal');
  var ccb=document.getElementById('colorborde');
  principal.style.borderColor=ccb.value;
}

function cambiarPadding(){
  var principal=document.getElementById('principal');
  var cp=document.getElementById('padding');
  principal.style.padding=cp.value;
}

function cambiarMargin(){
  var principal=document.getElementById('principal');
  var cm=document.getElementById('margin');
  principal.style.margin=cm.value;
}

function borderRadious(){
  var principal=document.getElementById('principal');
  var br=document.getElementById('radious');
  principal.style.borderRadius=br.value;
}
#principal {
  font-size:15px;
  border:1px solid #000000;
  background-color: #ffff00;
}
<!doctype html>
<html>
<head>
  <script src="DH16.js"></script>
  <link rel="StyleSheet" href="DH16.css" type="text/css">
</head>
<body>
  <p id="principal">
     Modifique este texto a su gusto
  </p>
   <br>
   <br>
   Color de fuente:
   <select onChange="cambiarColorFuente()" id="colorfuente">
     <option value="#000000">Negro</option>
     <option value="#ff0000">Rojo</option>
     <option value="#00ff00">Verde</option>
     <option value="#0000ff">Azul</option>
   </select>
   <br>
   Color de fondo:
   <select onChange="cambiarColorDeFondo()" id="colorfondo">
     <option value="#ffff00">Amarillo</option>
     <option value="#ff0000">Rojo</option>
     <option value="#00ff00">Verde</option>
     <option value="#0000ff">Azul</option>
   </select>
   <br>
   Tamaño de fuente:
   <select onChange="cambiarTamano()" id="cambiartamano">
     <option value="1px">1px</option>
     <option value="5px">5px</option>
     <option value="10px">10px</option>
     <option value="15px">15px</option>
     <option value="20px">20px</option>
     <option value="30px">30px</option>
     <option value="40px">40px</option>
   </select>
   <br>
   Tipo de fuente:
   <select onChange="cambiarFuente()" id="cambiarfuente">
     <option value="Verdana">Verdana</option>
     <option value="Arial">Arial</option>
     <option value="Courier">Courier</option>
   </select>
   <br>
   Estilo de fuente:
   <select onChange="estiloDeFuente()" id="estilofuente">
     <option value="normal">Normal</option>
     <option value="Oblique">Oblique</option>
     <option value="Italic">Italic</option>
   </select>
   <br>
   Alineacion de texto:
   <select onChange="alineacion()" id="alineacion">
     <option value="center">Centrado</option>
     <option value="right">Derecha</option>
     <option value="left">Izquierda</option>
   </select>
   <br>
   Decoracion de texto:
   <select onChange="decoracion()" id="decoracion">
     <option value="none">Ninguno</option>
     <option value="underline">Subrallado</option>
     <option value="overline">Subrallado superior</option>
     <option value="line-through">Tachado</option>
   </select>
   <br>
   Peso de la fuente:
   <select onChange="pesoFuente()" id="peso">
     <option value="normal">Normal</option>
     <option value="bold">Negrita</option>
   </select>
   <br>
   Espacio entre palabras:
   <select onChange="espacioPalabras()" id="ep">
     <option value="3">3</option>
     <option value="6">6</option>
     <option value="9">9</option>
     <option value="12">12</option>
   </select>
   <br>
   Transformacion de texto:
   <select onChange="transformacionTexto()" id="transformacion">
     <option value="uppercase">Mayusculas</option>
     <option value="lowercase">Minusculas</option>
     <option value="none">Ninguno</option>
   </select>
   <br>
   Ancho del borde:
   <select Onchange="anchoDeBorde()" id="anchoborde">
     <option value="0px">0</option>
     <option value="1px">1</option>
     <option value="2px">2</option>
     <option value="3px">3</option>
     <option value="4px">4</option>
     <option value="5px">5</option>
     <option value="6px">6</option>
     <option value="7px">7</option>
   </select>
   <br>
   Estilo de borde:
<select onChange="cambiarEstiloBorde()" id="estiloborde">
<option value="none">none</option>
<option value="hidden">hidden</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
<option value="solid">solid</option>
<option value="double">double</option>
<option value="groove">groove</option>
<option value="ridge">ridge</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
</select>
<br>
Color de borde:
<select onChange="cambiarColorBorde()" id="colorborde">
<option value="#000000">negro</option>
<option value="#ffff00">amarillo</option>
<option value="#ff0000">rojo</option>
<option value="#00ff00">verde</option>
<option value="#0000ff">azul</option>
</select>
<br>
padding:
<select onChange="cambiarPadding()" id="padding">
<option value="0">0</option>
<option value="4" selected="selected">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
<br>
margin:
<select onChange="cambiarMargin()" id="margin">
<option value="0">0</option>
<option value="4" selected="selected">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
<br>
Bordeado redondo:
<select onChange="borderRadious()" id="radious">
  <option value="0px">0</option>
  <option value="1px">1</option>
  <option value="2px">2</option>
  <option value="3px">3</option>

</body>
</html>
    
answered by 08.08.2017 в 21:04
0

Hello, you can use this: 

document.getElementById(id).style.property = nuevo estilo

for example: 

document.getElementById("p2").style.color = "blue";
    
answered by 08.08.2017 в 20:32
why do these pieces of code not work when I put or? How to add inputs dynamically and that the result appears in other input?