How to use the output value

1

I would like to know how to use the value of an entry after I use the ok! button, since I need to use the value of the input that will serve as the radius, so I can do 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>
    
asked by anonymous 23.04.2018 / 21:25

3 answers

1

There are several things you need to fix first:

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

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

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

    It is a <input> tag and not <raio> , so it would not work with getElementsByTagName . In addition this function returns a "list" with all the inputs that play with the last name, so you would have to indicate that you want the first with [0] .

  • AreaEsf = entrada * entrada * 3.14; - Assuming that it reaches% required%, it is necessary to interpret its value with <input> and also transform it into number with .value before even using it.

    li>
  • The search for parseInt is done twice without need:

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

    It ends up only complicating the code.

There would be many other things to improve, but only changing those errors that I indicated, and leaving the code as close to what it would look like:

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);
}

Example to work:

<!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>
    
23.04.2018 / 23:50
1

Just a few lines of javascript code.

  

Basically, it retrieves the typed value, makes a comparison if it is a positive, processes the calculations and places the values in the required 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()"/>
  • The function Math.pow() returns the base raised to the exponent, that is, base exponent

    • In the volume example: radius 3
  • document.getElementById , javascript function that serves to return a DOM element that is identified by a specific ID and which must be unique
  • In an HTML control of type textbox , password or textarea , we can use the value property that refers to the value of the field.

      

    If you do not need to use a variable

      

    wecanthendirectlyaccess:

    document.getElementById("area").value = (radius * radius * Math.PI).toFixed(2);
    
        
  • 24.04.2018 / 01:29
    0

    Hello, I gave a code to your code, see if that's what you wanted 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>
        
    23.04.2018 / 23:00