Javascript won’t output values from input box

by

Here’s a working version of your code.

  1. There’s no method getElementByName (but getElementsByName) – you should use document.getElementById() (Read about it here)
  2. You should use the value of the input element.
<!doctype html>
<html>
<head>

<style>
.formdiv{
    align: center;
}
</style>
</head>
<body>

<script language="javascript" type="text/javascript">
    function output(){
        var name = document.getElementById('firstName').value;
        var Age= document.getElementById('age').value;
        document.getElementById('output').value = name+Age;
    }
</script>

<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" id="firstName" placeholder="John" required="required"></input> 
<br/>
<br/>
<label>Age </label>
<input type="number" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
        <button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" id="output"></input>
</center>
</div>
</body>
</html>

More Related Contents:

  1. Make function wait until element exists
  2. anchor jumping by using javascript
  3. How does the location of a script tag in a page affect a JavaScript function that is defined in it?
  4. Class methods as event handlers in JavaScript?
  5. Change onClick attribute with javascript
  6. Passing parameters to a JQuery function
  7. JavaScript button onclick not working
  8. Link Replacement With JavaScript [closed]
  9. Make file not show anything in console [closed]
  10. Changing HTML with Javascript when a link is clicked on? [duplicate]
  11. How to get the selected radio button’s value?
  12. JQuery: How to call RESIZE event only once it’s FINISHED resizing?
  13. Are eval() and new Function() the same thing?
  14. JavaScript not running on jsfiddle.net
  15. Open links made by createObjectURL in IE11
  16. How to Implement DOM Data Binding in JavaScript
  17. Calling a javascript function recursively
  18. HTML5 Canvas drawImage ratio bug iOS
  19. How to get html elements from an object tag?
  20. Detect if HTML5 Video element is playing [duplicate]
  21. get a list of all folders in directory [closed]
  22. location.host vs location.hostname and cross-browser compatibility?
  23. How to save data from a form with HTML5 Local Storage?
  24. Close a div by clicking outside
  25. Change form values after submit button pressed
  26. How do you automatically set the focus to a textbox when a web page loads?
  27. JavaScript on the bottom of the page?
  28. Vue.js data-bind style backgroundImage not working
  29. Use JavaScript variable as function name?
  30. How to parse html to React component?

Leave a Comment