0

Cree una sección con 9 cajas div adentro. mi idea es que al agregar un color en el input "color de margen" y picar al botón a la derecha, el borde de tanto las 9 cajas pequeñas como de la caja que las contiene cambie al color al introducirlo. El problema es que para eso debería usar “getElementById” con cada id de las cajas pequeñas y modificar sus estilos. Quisiera saber cómo podría hacerlo de una forma en la cual tome todos los elementos div. Pensaba que podría ser por el nombre de su clase, pero ya probé “getElementByClassName” y no funciona, las modificaciones de estilos que realizo desde Javascript no se aplican me arrojan error. Lo ideal sería una solución sin la necesidad de usar Jquery, entiendo el uso de los JquerySelectors pero me gustaría hacerlo sin el uso de estos y muchas gracias.en la imagen solo hice el cambio de la borde general que contiene las cajas pequeñas y de las internas agregue borde a las 2 y 9

                <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>crear unas tablas las cuales pueda modificar su color desde el 
navegador</title>

                <!--el CSS-->
                <style>
                    .group-form{
                        display: inline-block;
                    }
                    .group-form > label{
                        display: block;
                    }
                    .group-form > input{
                        display: block;
                    }
                    .main-table{
                        max-width: 50%;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 0.25rem;
                        border: transparent 5px solid ;;
                    }
                    
                    .main-table > div{
                        height: 3rem;
                        text-align: center;
                        display: grid;
                        border: transparent 5px solid ;
                        background: slategray; 
                    }
                </style>
            </head>

            <!--el html-->
            <body>
                <form action="">
                    <fieldset class="group-form">
                        <label for="#changeTable">color de fondo</label>
                        <input id="changeTable" type="text" placeholder="Valor hexadecimal">
                    </fieldset>
                    <fieldset class="group-form">
                        <button id="clickHere1" type="button">Click me</button>
                    </fieldset>

                    <fieldset class="group-form"> <!--este campo es el que uso-->
                        <label for="#changeBorder">color del margen</label>
                        <input id="changeBorder" type="text" placeholder="Valor hexadecimal">
                    </fieldset>
                    <fieldset class="group-form">
                        <button id="clickHere2" type="button">Click me</button>
                    </fieldset>
                </form>
                <br>
                <section id="mainTable" class="main-table">
                    <div id="element1" class="boxes">...</div>
                    <div id="element2" class="boxes">...</div>
                    <div id="element3" class="boxes">...</div>
                    <div id="element4" class="boxes">...</div>
                    <div id="element5" class="boxes">...</div>
                    <div id="element6" class="boxes">...</div>
                    <div id="element7" class="boxes">...</div>
                    <div id="element8" class="boxes">...</div>
                    <div id="element9" class="boxes">...</div>
                </section>
            </body>

            <!--Javascript-->
            <script>
                let mainTable = document.getElementById("mainTable")
                let changeborder = document.getElementById("changeBorder")
                let clickHere = document.getElementById("clickHere2")
                let boxes = document.getElementsByClassName("boxes") 
                let element9 = document.getElementById("element9")
                let element8 = document.getElementById("element8")
                let element7 = document.getElementById("element7")
                let element6 = document.getElementById("element6")
                let element5 = document.getElementById("element5")
                let element4 = document.getElementById("element4")
                let element3 = document.getElementById("element3")
                let element2 = document.getElementById("element2")
                let element1 = document.getElementById("element1") //cajas escritas directamente uno 

a uno

                clickHere2.addEventListener("click", () => {
                    console.log(changeborder.value);
                    mainTable.style.borderColor = "#"+ changeborder.value;
                    /*let boxes = document.getElementsByClassName("boxes")
                    boxes.style.borderColor = "#" + changeborder.value;*/
                    element9.style.borderColor = "#" + changeborder.value;
                    element2.style.borderColor = "#" + changeborder.value;
                })

            </script>
            </html>
1
  • Lo ideal es que agregues que error obtienes
    – user128299
    el 16 oct. 2020 a las 0:41

3 respuestas 3

2

Si funciona, lo que ocurre es que tienes que iterar cada elemento que tenga la clase deseada, modifiqué solo esa parte.

Me informas como va.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>crear unas tablas las cuales pueda modificar su color desde el navegador
  </title>

  <!--el CSS-->
  <style>
    .group-form {
      display: inline-block;
    }
    
    .group-form>label {
      display: block;
    }
    
    .group-form>input {
      display: block;
    }
    
    .main-table {
      max-width: 50%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.25rem;
      border: transparent 5px solid;
      ;
    }
    
    .main-table>div {
      height: 3rem;
      text-align: center;
      display: grid;
      border: transparent 5px solid;
      background: slategray;
    }
  </style>
</head>

<!--el html-->

<body>
  <form action="">
    <fieldset class="group-form">
      <label for="#changeTable">color de fondo</label>
      <input id="changeTable" type="text" placeholder="Valor hexadecimal">
    </fieldset>
    <fieldset class="group-form">
      <button id="clickHere1" type="button">Click me</button>
    </fieldset>

    <fieldset class="group-form">
      <!--este campo es el que uso-->
      <label for="#changeBorder">color del margen</label>
      <input id="changeBorder" type="text" placeholder="Valor hexadecimal">
    </fieldset>
    <fieldset class="group-form">
      <button id="clickHere2" type="button">Click me</button>
    </fieldset>
  </form>
  <br>
  <section id="mainTable" class="main-table">
    <div id="element1" class="boxes">...</div>
    <div id="element2" class="boxes">...</div>
    <div id="element3" class="boxes">...</div>
    <div id="element4" class="boxes">...</div>
    <div id="element5" class="boxes">...</div>
    <div id="element6" class="boxes">...</div>
    <div id="element7" class="boxes">...</div>
    <div id="element8" class="boxes">...</div>
    <div id="element9" class="boxes">...</div>
  </section>
</body>

<!--Javascript-->
<script>
  let mainTable = document.getElementById("mainTable")
  let changeborder = document.getElementById("changeBorder")
  let clickHere = document.getElementById("clickHere2")
  let boxes = document.getElementsByClassName("boxes")

  clickHere2.addEventListener("click", () => {
    mainTable.style.borderColor = "#" + changeborder.value;
    let boxes = document.getElementsByClassName("boxes")
    Array.prototype.forEach.call(boxes, function(box) {
      box.style.borderColor = "#" + changeborder.value;
    });
  })
</script>

</html>

2
  • Si llega a aplicar el color, si pongo ff0000 dentro del input se coloca en los demás, al menos si logro verlo. el 16 oct. 2020 a las 1:00
  • Realmente quedo muy agradecido por la respuesta, me fue bastante útil me dio una muy buena guía de que documentación debía buscar mas en concreto para ello, aunque me quedan algunas dudas de los métodos que usaste imagino será cuestión de documentarme y programar más, muchas gracias. el 16 oct. 2020 a las 3:25
1

Lo que te recomiendo es que en el evento de tu botón para cambiar el borde recorras todos tus divs de la siguiente manera:

//Accedemos a todos tus divs y los recorremos con foreach

document.querySelectorAll('.boxes').forEach(div =>{
 // A cada div que recorras le cambias el borde

})

Intenta hacerlo y si tienes dudas, con gusto las aclaramos.

0

Para tu caso podria servir esto

  • crear la constante que guader todos los elementos del dom con la clase box en tu caso ( podes agregarle la misma clase al contenedor , pero deberias agregar otra para todo asi modificas solo el borde)
  • si bien es un nodo con todos los elementos , comparte metodos de los arrays como el forEach
  • haces un evento de escucha que guarde primero el valor hexa del input y luego con ese valor recorres con el forEach todos los elementos y le agregas el borde con style.setProperty
  • fijate que te coloque el template string para setear el color

const allBoxes = document.querySelectorAll ('.bc')
const changeBorderBotton = document.getElementById('clickHere2')
changeBorderBotton.addEventListener('click', ()=>{
  const colorValueHexa = document.getElementById('changeBorder').value
  allBoxes.forEach(box => {
    box.style.setProperty('border',`10px solid ${colorValueHexa}`)
  })
  
})
<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>crear unas tablas las cuales pueda modificar su color desde el 
navegador</title>

                <!--el CSS-->
                <style>
                    .group-form{
                        display: inline-block;
                    }
                    .group-form > label{
                        display: block;
                    }
                    .group-form > input{
                        display: block;
                    }
                    .main-table{
                        max-width: 50%;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 0.25rem;
                        border: transparent 5px solid ;;
                    }
                    
                    .main-table > div{
                        height: 3rem;
                        text-align: center;
                        display: grid;
                        border: transparent 5px solid ;
                        background: slategray; 
                    }
                </style>
            </head>

            <!--el html-->
            <body>
                <form action="">
                    <fieldset class="group-form">
                        <label for="#changeTable">color de fondo</label>
                        <input id="changeTable" type="text" placeholder="Valor hexadecimal">
                    </fieldset>
                    <fieldset class="group-form">
                        <button id="clickHere1" type="button">Click me</button>
                    </fieldset>

                    <fieldset class="group-form"> <!--este campo es el que uso-->
                        <label for="#changeBorder">color del margen</label>
                        <input id="changeBorder" type="text" placeholder="Valor hexadecimal">
                    </fieldset>
                    <fieldset class="group-form">
                        <button id="clickHere2" type="button">Click me</button>
                    </fieldset>
                </form>
                <br>
                <section id="mainTable " class="main-table bc">
                    <div id="element1" class="boxes bc ">...</div>
                    <div id="element2" class="boxes bc">...</div>
                    <div id="element3" class="boxes bc">...</div>
                    <div id="element4" class="boxes bc">...</div>
                    <div id="element5" class="boxes bc">...</div>
                    <div id="element6" class="boxes bc">...</div>
                    <div id="element7" class="boxes bc">...</div>
                    <div id="element8" class="boxes bc">...</div>
                    <div id="element9" class="boxes bc">...</div>
                </section>
            </body>

recursos

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

0

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.