write the result into input field

Question

I have problem with my javascript. I'm not able to display the results in the input field. Please can anyone help me?? And if it possible it will be better to calculate the result without clicking on the button!! Thanks.

<script>
    function cal(){
        
        var bid = document.getElementsByName("bid");
        var result1= bid * 0.1;
        var result2= bid - result1;
        document.getElementsByName("fee").value = result1;
        document.getElementsByName("get").value = result2;

    }
    </script>

<span style="font-size:20px;">Your bid:</span> <input type="number"    name="bid" class="form-control" style="max-width:250px; margin-top:10px;"> <br>
        <input type="button" onClick="cal();">
        <span style="font-size:20px;" >Our Fee (10%):</span><input type="number" name="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;"><br>
        <span style="font-size:20px;">You'll paid:</span> <input type="number"  name="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

Answer 1

Abu Machi.

You are using the wrong function for the job or you have not understood exactly how it works. The function GetElementsByName, as the function names says, gets more than one element. So you need to work with a list of elements, if that's the case.

As you can see in the docs, getElementsByName is used when you need to work with more than one similar element. Otherwise, the best function for this work is getElementById. (And if you're working on modern browsers, IE8+, you can use the helpers querySelector and querySelectorAll)

Besides this issue within your code, there's one more thing to correct. When the bid value is supposedly taken, you just get the element, and not the value itself.

Anyway, let's get to what you can do. You can:

1. Use getElementsByName the "correct" way.

function cal(){
  var bid = Number(document.getElementsByName("bid")[0].value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.getElementsByName("fee")[0].value = result1;
  document.getElementsByName("get")[0].value = result2;
}

<span style="font-size:20px;">Your bid:</span> 
<input type="number" name="bid" class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<input type="button" onclick="cal()">
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" name="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  name="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

2. Use getElementById.

function cal(){
  var bid = Number(document.getElementById("bid").value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.getElementById("fee").value = result1;
  document.getElementById("get").value = result2;
}

<span style="font-size:20px;">Your bid:</span> 
<input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<input type="button" onclick="cal()">
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

3. Use querySelector.

function cal(){
  var bid = Number(document.querySelector("#bid").value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.querySelector("#fee").value = result1;
  document.querySelector("#get").value = result2;
}

<span style="font-size:20px;">Your bid:</span> 
<input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<input type="button" onclick="cal()">
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

And as you asked, if you want that the value change without the need to click on the button, you just need to make the of onKeyUp event on your bid input, like this:

function cal(){
  var bid = Number(document.querySelector("#bid").value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.querySelector("#fee").value = result1;
  document.querySelector("#get").value = result2;
}

<span style="font-size:20px;">Your bid:</span> 
<input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;" onkeyup="cal()">
<br>
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

I hope it can be any helpful.

Answer 2

Only form-field elements have a value attribute/property. For regular elements, you want either the .textContent (for plain text) or the .innerHTML (for strings with HTML in them) properties.

Next, avoid inline styles as they just make the HTML more difficult to read and lead to duplication of code. On the same vein, don't use inline HTML event attributes (onclick). There are many reasons for that.

Next, don't use .getElementsByName() as this returns a "live node list", which is only right for a few use cases and can be wasteful otherwise. Give your form fields, not only a name attribute, but also a (usually) matching id attribute as well.

Next, don't use form elements if you aren't expecting users to interact with them (the fee and total areas).

See comments in code below:

// Get references to the DOM elements you will need just once:
var fee = document.getElementById("fee");
var get = document.getElementById("get");
var bid = document.getElementById("bid")
var btn = document.querySelector("input[type=button]");

// Set up event handling in JavaScript, not HTML:
btn.addEventListener("click", cal);

// You can also have the cal function run as the user enters 
// their bid. No button click needed.
bid.addEventListener("input", cal);

function cal(){
  var result1 = bid.value * 0.1;
  var result2 = bid.value - result1;
  fee.textContent = result1;
  get.textContent = result2;
}

span {
  font-size:20px;
}

.formField {
   max-width:250px; 
   margin-top:10px;
}

<span>Your bid:</span>
<input type="number" id="bid" name="bid" class="form-control" class="formField"><br>
<input type="button">
<span>Our Fee (10%):</span>
<span id="fee"></span><br>
<span>You'll paid:</span>
<span id="get"></span>

Answer 3

You should use id instead of name to get elements in javascript and you saved the input field in the variable bid instead of saving the value of the input field.

<html>

<head>
  <script>
    function cal() {

      var bid = document.getElementById("bid").value;

      var result1 = bid * 0.1;
      var result2 = bid - result1;

      document.getElementById("fee").value = result1;
      document.getElementById("get").value = result2;



    }
  </script>
</head>

<body>
  <span style="font-size:20px;">Your bid:</span> <input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;"> <br>
  <input type="button" onClick="cal();">
  <span style="font-size:20px;">Our Fee (10%):</span><input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;"><br>
  <span style="font-size:20px;">You'll paid:</span> <input type="number" id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

</body>

</html>

Answer 4

try it :

 function cal(){

            var bid = document.querySelector("input[name=bid]");
            var result1= bid * 0.1;
            var result2= bid - result1;
            document.querySelector("input[name=fee]").value = result1;
            document.querySelector("input[name=get]").value = result2;

        }

or

function cal(){

        var bid = document.getElementsByName("bid")[0].value;
        var result1= bid * 0.1;
        var result2= bid - result1;
        document.getElementsByName("fee")[0].value = result1;
        document.getElementsByName("get")[0].value = result2;

    }

Or you can set id to all inputs and use documment.getElementById For use function after change you can use next code:

var bid = document.getElementsByName("bid")[0];
bid.addEventListener('change',function(){
  cal();
});

Answer 5

getElementsByName gives you an array of elements.

Use zeroeth element for value:

<script>
    function cal(){

        var bid = document.getElementsByName("bid")[0].value;
        var result1= bid * 0.1;
        var result2= bid - result1;
        document.getElementsByName("fee")[0].value = result1;
        document.getElementsByName("get")[0].value = result2;

    }
</script>

Edit - without clicking you can update your inputs when you add to your input this:

onkeyup="cal()"