How to capture a typed value and use to define the value of a class attribute (css)

Question

How to capture a typed value and use to define the value of a class attribute (css)

Asked 5 years ago

Viewed 81 times

0

I’m a layman, so even to find something like this is hard for me. Here’s what I wanna do. Type a 2-digit number value in an input and automatically type the value in a bar. This bar is set to "widht:0" If I type 50, then the style would be "widht:50%" Something like that...

.bar-porcent {
  overflow: hidden;
  width: 50%;
}
.bar-porcent span {
    width: 100%;
    height: 14px;
    background-image: linear-gradient(-90deg, red, yellow);
}

<input type='text' id='porc1' value="50" >
  <div class="bar-porcent">
      <div class="porcentagem">
          <span></span>
      </div>
  </div>

To better understand, the layout is getting like this. I need to type the number and the bar already get the size of what I typed http://gtecprovisorio.hospedagemdesites.ws/grafeno-digital/sistema/cadastro-cedente/participacao.html

3 answers

Browser other questions tagged javascript jquery

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

by Renan Gomes • **19,011** points · Answer 1 · 2019-09-17T22:53:27+00:00

You can do it like this:

const percent = document.querySelector('.porcentagem')

document.querySelector('input').addEventListener('input', function(event){
  
  if(!this.value) percent.style.width = 0
  
  percent.style.width = (this.value > 100 ? 100 : this.value) + '%'
})

.bar-porcent {
  border: 1px solid #ccc;
  height: 20px;
  width: 50%;
}
.bar-porcent .porcentagem {
    width: 50%;
    height: 100%;
    background-image: linear-gradient(-90deg, red, yellow);
}

<input type='number' value="50" max="100" >
<div class="bar-porcent">
  <div class="porcentagem"></div>
</div>

Remembering that in HTML5 there is already a tag to treat this type of behavior: <progress>

const progress = document.querySelector('progress')

document.querySelector('input').addEventListener('input', function(event){
  progress.value = this.value  
})

<input type='number' value='50' max='100'>
<progress max='100' value='50'>

by hugocsl • **65,517** points · Answer 2 · 2019-09-17T23:17:15+00:00

I made a simple option, in humility even rss

First you have to pass your input for number, then you have to put a max="100" to the counter of input only go up to 100, and min="0" to not accept negative numbers by the counter, but this does not prevent the user to type a higher number...

Then you use the keyup and change if the user uses the input to activate the function that passes the . value of the input to the width bar. Tb put in function a if() in case there is no value the bar is 0 width.

As I said is a simple JS, but I hope it helps in something...

let inp = document.getElementById('porc1');

function mostraBarra() {
    let barra = document.querySelector('.bar-porcent');
    let x = inp.value;
    barra.style.width = x + "%";

    if (inp.value == '') {
        barra.style.width = "0%";
    }
}


inp.addEventListener('keyup', mostraBarra);
inp.addEventListener('change', mostraBarra);

.bar-porcent {
    overflow: hidden;
    width: 0%;
}

.bar-porcent span {
    display: inline-block;
    width: 100%;
    height: 14px;
    background-image: linear-gradient(-90deg, red, yellow);
}

<input type='number' id='porc1' value="0" max="100" min="0">
<div class="bar-porcent">
    <div class="porcentagem">
        <span></span>
    </div>
</div>

by André Junior • 93 points · Answer 3 · 2019-09-17T23:31:56+00:00

<!DOCTYPE html>
<html>
<head>
  <title> Porcentagem na barra </title>
  <style type="text/css">
    .bar-porcent {
  overflow: hidden;
  width: 400px;
  height: 30px;
  background: #ccc;
}
  </style>

</head>
<body>
  <input type='text' id='porc1' onkeyup="contador()" maxlength="3" onfocus="this.select()">
      <div class="bar-porcent">
      <div class="porcentagem">
          <span id="porcen"></span>
      </div>
  </div>
</body>
</html>

<script type="text/javascript">

  function contador(){
    var porc1 = window.document.getElementById('porc1').value;
    var barra = window.document.querySelector('div.porcentagem');
    var porcen = window.document.getElementById('porcen');
    barra.style.background=  'linear-gradient(-90deg, red, yellow)'
    barra.style.height = '30px'   

    if(porc1 <= 100){
    barra.style.width = porc1 + '%';
    }

    if(porc1 == '' || porc1 == 0){
      barra.style.width = '0%'
    }
    porcen.value = porc1;
  } 
</script>