1

Problem: I'm trying to pass a return value from a function into a input field.

I get no errors the field is just blank.

Question: Why is my code not working?

HTML

<tr>
<td>Quantity to be dredged</td>
<td><input type="number"  class="" id="shorePipe"></input></td>
</tr>

JavaScript

var shorePipe = function() {
  var val = 100;
  var val2 = 100;
  var total = val * val2 / 100;
  // return total;
  document.getElementById('shorePipe').value = total;
};

Thanks in advance!

Improve this question
6
  • readyonly isn't a valid HTML attribute. Commented Apr 12, 2016 at 20:40
  • 1
    do you get any errors? also, please read our How to Ask page to help you improve the question Commented Apr 12, 2016 at 20:40
  • I guess you know it, but you have a typo in readyonly, should be readonly. also, you don't need </input> Commented Apr 12, 2016 at 20:40
  • Are you sure you don't have an error in the console? Also, does your code do anything? Or you simply have no result at all? Commented Apr 12, 2016 at 20:43
  • Basically, It runs some calculations and returns the sum. however I am working on codepen maybe that;s my problem Commented Apr 12, 2016 at 20:45

4 Answers 4

Reset to default
2

Since your code works perfectly fine (beside </input>), the only issue I see here is that you're probably not calling shorePipe(); once the DOM is read and ready.

jsBin demo

So put your JS right before the closing </body> tag 

<script>
var shorePipe = function() {
  var val = 100;
  var val2 = 100;
  var total = val * val2 / 100;
  // return total;
  document.getElementById('shorePipe').value = total;
};
shorePipe();
</script>

</body>

notice also that </input> is invalid. <input> is in the group of void elements and should not have a closing tag.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

It's a joke. they are all the same, where's your sense of humor?
lol I was simply being a bit cheeky. Was meant as an aid for you since you hadn't posted a plunkr/fiddle/bin yet. :)
@EvanBechtol BTW your jsfiddle does not show that <script> is placed right before </body> so it's not much of a help. :(
0

You have to call the function

shorePipe();

Here's a fiddle: https://jsfiddle.net/2vxdyvgz/

Improve this answer

Comments

0
  1. Input doesn't need to close itself.
  2. Make sure you actually call your JS function somewhere.

I created this JSFiddle for you: https://jsfiddle.net/pd12edbp/2/

<input type="number"  class="" id="shorePipe" readyonly>

JS:

var shorePipe = function() {
   var val = 100;
   var val2 = 100;
   var total = val * val2 / 100;
   // return total;
   document.getElementById('shorePipe').value = total;
};

$(document).ready(function(){
    shorePipe();
});
Improve this answer

Comments

0

in your original post, you were passing the value to the element with ID shorePipe, and your input had ID avgSubPipe

element ID's have to match. ANd, you have to fire the function

the HTML

<tr>
<td>Quantity to be dredged</td>
<td><input type="number"  class="" id="avgSubPipe" readonly ></td>
</tr>

and the Javascript:

var shorePipe = function() {
  var val = 100;
  var val2 = 100;
  var total = val * val2 / 100;
  // return total;
  document.getElementById('shorePipe').value = total;
};

// calling function
shorePipe();

https://jsfiddle.net/yhz7syhs/1/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.