how to change div border-color by input value?-CodePudding

How to change div border-color by input value?

My Code

function myFunction() {
   var color = document.getElemntByID("inpx").value; document.getElementById("divx").style.borderColor = color;
  }

<!DOCTYPE html>
<html>
<head> </head>
<body> 
  <div id=divx"> </div>
  <button onClick=""> </button>

  <script>
  
  </script>
</body>
</html>

CodePudding user response：

const EL = (sel, EL) => (EL||document).querySelector(sel);
const setBorderColor = (el, color) => el.style.borderColor = color;

const EL_inpx = EL("#inpx");
const EL_divx = EL("#divx");

EL_inpx.addEventListener("input", () => {
  setBorderColor(EL_divx, EL_inpx.value);
});

setBorderColor(EL_divx, EL_inpx.value);

#divx {border: 10px solid transparent;}

<input id="inpx" type="color" value="#ff0088">
<div id="divx">test</div>

CodePudding user response：

function myFunction() {
    const color = document.getElementById("inpx").value;
    document.getElementById("divx").style.borderColor = color;
  }

#divx
{
    width: 50px; 
    height: 50px; 
    border-width: 1px; 
    border-style: solid;
    margin-bottom: 1rem;
}

<html>
    <body>
        <div id="divx"></div>
        <input type="text" value="blue" id="inpx">
        <button onClick="myFunction()">Set border color</button>
    </body>
</html>