How to use the output value

Asked

Viewed 65 times

1

I would like to know how I use the value of an input after I use the button ok!, because I need to use the value of the input that will serve as the radius, in order to be able to make the calculation that will be printed inside the other two labels.

<!DOCTYPE html>
<html>
<head>
    <title>area da esfera</title>
    <meta charset="utf-8">
</head>


<style type="text/css">
    label{
        display: inline-block;
        width: 200px;
        text-align: right;
    }
</style>

<body>
        <label for="">Informe o raio</label><input type="text" name="raio">
        <button id="BUTTON" name = "button">OK!</button><br>        
        <label for "" >Área</label><input type="text" name="area" id = "circunferencia" disabled="" /><br>
        <label for "" >Volume</label><input type="text" name="circunferencia" id = "circunferencia" disabled="" /><br>

        <script>
            var buttons = document.getElementById("BUTTON");
            number entrada = document.getElementsByTagName("raio");
            document.getElementById("BUTTON").onclick = function() {
            number AreaEsf =  entrada * entrada  * 3.14; 
            number VolEsf  = (4/3) * 3.14 * entrada * entrada * entrada;  
            document.writeln(AreaEsf);
            document.writeln(VolEsf);
        }

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

3 answers

1

There’s a lot of things you need to fix first:

  • number entrada = - This does not exist. To declare a variable you have to use one of the three possibilities: var, let or const.

  • entrada = document.getElementsByTagName("raio"); - The <input> that you want to go get:

    <input type="text" name="raio">
    

    Is a label <input> and not <raio>, for this reason would not work with getElementsByTagName. In addition this function returns a "list" with all inputs that play with the name passed, so you would have to indicate that you want the first with [0].

  • AreaEsf = entrada * entrada * 3.14; - Assuming I made it to <input> necessary, it is necessary to interpret its value with .value and turn into a number with parseInt before it is even used.

  • The search for BUTTON is done twice without need:

    var buttons = document.getElementById("BUTTON");
    ...
    document.getElementById("BUTTON").onclick = function() {
    

    Ending up only complicating the code.

There would be many other things to improve, but just changing those mistakes that I pointed out, and making the code as close to what I had would look like this:

var buttons = document.getElementById("BUTTON");

//getElementsByName em vez de ByTagName e a posição [0]
var entradaInput = document.getElementsByName("raio")[0];

buttons.onclick = function() { //utilizar o buttons de cima
    //interpretar o valor do input com .value e transformar em numero com parseInt
    var entrada = parseInt(entradaInput.value); 

    var AreaEsf =  entrada * entrada  * 3.14; //com var em vez de number
    var VolEsf  = (4/3) * 3.14 * entrada * entrada * entrada; //com var em vez de number
    document.writeln(AreaEsf);
    document.writeln(VolEsf);
}

Working example:

<!DOCTYPE html>
<html>
<head>
    <title>area da esfera</title>
    <meta charset="utf-8">
</head>


<style type="text/css">
    label{
        display: inline-block;
        width: 200px;
        text-align: right;
    }
</style>

<body>
        <label for="">Informe o raio</label><input type="text" name="raio">
        <button id="BUTTON" name = "button">OK!</button><br>        
        <label for "" >Área</label><input type="text" name="area" id = "circunferencia" disabled="" /><br>
        <label for "" >Volume</label><input type="text" name="circunferencia" id = "circunferencia" disabled="" /><br>

        <script>
            var buttons = document.getElementById("BUTTON");

            //getElementsByName em vez de ByTagName e a posição [0]
            var entradaInput = document.getElementsByName("raio")[0];

            buttons.onclick = function() { //utilizar o buttons de cima
                //interpretar o valor do input com .value e transformar em numero com parseInt
                var entrada = parseInt(entradaInput.value); 

                var AreaEsf =  entrada * entrada  * 3.14; //com var em vez de number
                var VolEsf  = (4/3) * 3.14 * entrada * entrada * entrada; //com var em vez de number
                document.writeln(AreaEsf);
                document.writeln(VolEsf);
            }

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

1

Just a few lines of javascript code.

Basically, it retrieves the entered value, makes a comparison if it is a positive, processes the calculations and places the values in due course inputs

function Calcular() {
//recupera valor digitado
var radius = document.getElementById('raio').value;
      	
  if (0 < radius){
    var resultArea = document.getElementById("area").value = (radius * radius * Math.PI).toFixed(2);
    var resultCirc = document.getElementById("circunferencia").value = (2 * (Math.PI) * radius).toFixed(2);
    var resultVolume = document.getElementById("volume").value = ((4/3) * (Math.pow(radius, 3)) * (Math.PI)).toFixed(2);
  }else{
    alert("Erro - o raio deve ser um número inteiro maior que 0.");
    return false;
  }
}
label{
    display: inline-block;
    width: 200px;
    text-align: right;
}
  <label for="">Informe o raio</label>
  <input type="text" id="raio" size="10" />
  <br>
  <label for "" >Área</label> <input type="text" name="area" id="area" disabled="" /><br>
  <label for "" >Volume</label> <input type="text" name="volume" id="volume" disabled="" /><br>
  <label for "" >Circunferência</label> <input type="text" name="circunferencia" id="circunferencia" disabled="" />
  <input type="button" value="OK!" onclick="Calcular()"/>

  1. The function Math.pow() returns the base raised to the exponent, i.e., baseexponent

    • In the volume example: radius3
  2. document.getElementById, javascript function that serves to return an DOM element that is identified by a specific ID and that must be unique

  3. In a type HTML control textbox, password or a textarea, we can use the property value which refers to the value of the field.

If there is no need to use a variable

inserir a descrição da imagem aqui

we can then directly access:

document.getElementById("area").value = (radius * radius * Math.PI).toFixed(2);

0

Hello, I tweaked your code, see if that’s what you were trying to do.

var button = document.getElementById('BUTTON');
var inputRaio = document.getElementById('raio')
var inputArea = document.getElementById('area')
var inputCircunferencia = document.getElementById('circunferencia')

button.addEventListener('click', function () {
    var raio = inputRaio.value;
    
    if (!raio.length) {
      alert('Por favor, insira um valor no raio');
      inputRaio.focus();
      return false;
    }

    inputArea.value = raio * raio * 3.14;
    inputCircunferencia.value = (4 / 3) * 3.14 * raio * raio * raio;
});
<style type="text/css">
    label{
        display: inline-block;
        width: 200px;
        text-align: right;
    }
</style>
<label for="">Informe o raio</label>
<input type="text" name="raio" id="raio"><br>

<label for="">Área</label>
<input type="text" name="area" id="area" disabled="" /><br>

<label for "" >Volume</label>
<input type="text" name="circunferencia" id="circunferencia" disabled="" /><br>

<button id="BUTTON" name="button" type="button">OK!</button><br>

Browser other questions tagged

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