Html form input to variable for use in a js function

Question

<form onsubmit="calculos(); return false;">
 <label for="gasto">
        <span> Valor </span>
        <input
          required
          type="number"
          id="gasto"
          class="gasto"
          name="gasto"
          placeholder="Valor.."
        />
      </label>
      <input type="submit" value="submit"/>
</form>

script trying to take that input into a variable for a function to return that inpunt and * to print in web

<script language="javascript">

      function calculos() {
        document.getElementById("gasto").value;
        var num1 = document.getElementById("gasto").value;
        Honorarios = num1 * 0.3;
        Escribania = num1 * 0.2;
        sellos = num1 * 0.05;
        return (Honorarios, Escribania, sellos);
        console.log(gasto);
        console.log(Honorarios);
        console.log(Escribania);
        console.log(sellos);
        alert(gasto, Honorarios, Escribania, sellos);
      }
      calculos();
    </script>

sorry if i dont explain good enough im learing html and js and wanted to make a calculator that you input a amount and the algorithm gives you back that amount * by 0.05 and others thanks

Answer 1

I edited your code, and removed the unnecessary lines, also moved the label HTML element which was badly placed, it works now, watch out for console log. I also combined all results into a single string before alert line.

 function calculos() { document.getElementById("gasto").value; var num1 = document.getElementById("gasto").value; Honorarios = num1 * 0.3; Escribania = num1 * 0.2; sellos = num1 * 0.05; console.log(Honorarios); console.log(Escribania); console.log(sellos); let allOfThem = `Honorarios: ${Honorarios} Escribania: ${Escribania} sellos: ${sellos}` alert(allOfThem); } //calculos(); This function SHOULD never be here, as it will be called everytime.

 <form onsubmit="calculos(); return false;"> <label for="gasto"> <span> Valor </span> </label> <,-- This was moved here to the right place. it was at the end of form --> <input required type="number" id="gasto" class="gasto" name="gasto" placeholder="Valor.." /> <input type="submit" value="submit"/> </form>