How to insert a value into an input and dynamically change an element through it?

Asked

Viewed 141 times

0

Hello, I’m developing a little project using HTML/JS/CSS, which consists of changing the radius of the edge of an element, here an example: https://border-radius.com/

The problem is that I want the radius value of the border to change dynamically, without having to click the button for this event to happen.

function borderTopLeft() {
    let bordertopleft = document.getElementById("border-top-left").value;
    
    if(!bordertopleft) {
        bordertopleft = 0;
        
    }
    
    document.getElementById("border").style.borderTopLeftRadius = `${bordertopleft}px`;

    
    return;
}

function borderTopRight() {
    let bordertopright = document.getElementById("border-top-right").value;


    if(!bordertopright) {
        bordertopright = 0;
        
    }
    
    document.getElementById("border").style.borderTopRightRadius = `${bordertopright}px`;
    
    return;
}

function borderBottomRight() {
    let borderbottomright = document.getElementById("border-bottom-right").value;

    if(!borderbottomright) {
        borderbottomright = 0;
        
    }

    document.getElementById("border").style.borderBottomRightRadius = `${borderbottomright}px`;

    return;
}

function borderBottomLeft() {
    let borderbottomleft = document.getElementById("border-bottom-left").value;

    if(!borderbottomleft) {
        borderbottomleft = 0;
        
    }

    document.getElementById("border").style.borderBottomLeftRadius = `${borderbottomleft}px`;

    return;
}

function handleButton() {
    borderTopLeft();
    borderTopRight();
    borderBottomRight();
    borderBottomLeft();
}
* {
    margin: auto;
    text-align: center;
}

p {
    margin-top: 100px;
    height: 100px;
    width: 150px;
    padding: 10px;
    background: #73AD21;;
}

input {
    margin-top: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border-Radius Previewer</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="border"></p>

    <div id="inputAndButtons">
    <input type="text" id="border-top-left" placeholder="Border top left" value="0">
    <input type="text" id="border-top-right" placeholder="Border top right" value="0">
    <input type="text" id="border-bottom-right" placeholder="Border bottom right" value="0">
    <input type="text" id="border-bottom-left" placeholder="Border bottom left" value="0">
    <button onclick="handleButton()" id="buttonBottomLeft">Apply</button>
    </div>

    <script src="index.js"></script>
</body>
</html>

javascript html dinâmico

  • Use the onKeyDown event on inputs. https://www.w3schools.com/jsref/event_onkeydown.asp

  • Da to use oninput in inputs.

1 answer

0

Here’s a suggestion with input type="number" and who uses the event input to call the function that applies the values.

I refactored your code to make it more compact and easy to maintain.

const borderEl = document.getElementById('border');

const propMapper = [
  ["border-top-left", "borderTopLeftRadius"],
  ["border-top-right", "borderTopRightRadius"],
  ["border-bottom-left", "borderBottomLeftRadius"],
  ["border-bottom-right", "borderBottomRightRadius"],
];


for (let [cssID, cssProp] of propMapper) {
  const input = document.getElementById(cssID);
  input.addEventListener('input', handleChange(input, cssProp));
}

function handleChange(input, cssProp) {
  return function() {
    borderEl.style[cssProp] = `${input.value}px`M
  }
}
* {
  margin: auto;
  text-align: center;
}

p {
  margin-top: 10px;
  height: 100px;
  width: 150px;
  padding: 10px;
  background: #73AD21;
  ;
}

input {
  margin-top: 10px;
  width: 45px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-Radius Previewer</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p id="border"></p>

  <div id="inputAndButtons">
    <input type="number" id="border-top-left" placeholder="Border top left" value="0">
    <input type="number" id="border-top-right" placeholder="Border top right" value="0">
    <input type="number" id="border-bottom-right" placeholder="Border bottom right" value="0">
    <input type="number" id="border-bottom-left" placeholder="Border bottom left" value="0">


    <script src="index.js"></script>
</body>

</html>

Browser other questions tagged javascript html dinâmico

You are not signed in. Login or sign up in order to post.