Nested function (Javascript)

Question

<form name="f1" method="GET">

    <form name="f1">
<input type="text" name="rd" id="rd">
<input type="text" name="fala" id="rd">
<button onclick="cal()"></button>





    </form>

How to use a nested function in javascript to print some output in HTML.

function abc() {
  var radius = document.f1.rd.value;
  document.write(radius)
}

function def() {
  var fala = document.f1.fala.value;
  document.write(fala)
}

function cal() {
  def()
  abc()
}

The nested functions should be called by single function and then will be used in button on click event

`call()` doesn't have nested functions. It is just calling the functions `def()` and `abc()`. Are you asking how to get `call()` to execute onClick? — Mark, Dec 15 '18 at 19:08
Okay . So how to use that call() function to print output of other two functions in HTML? — adnan, Dec 15 '18 at 19:09
The functions assume that there's an existing form in the HTML with 2 inputs elements. Do you have those? If not the code won't work. — Andy, Dec 15 '18 at 19:13
button onclick="cal();" but since it document.write this might won't work as expected. Start here: https://developer.mozilla.org/bm/docs/Web/JavaScript/Guide — A. Meshu, Dec 15 '18 at 19:18
Possible duplicate and could be easy to find the answer with some more research. https://stackoverflow.com/q/3212477/10424104 — Lloyd Nicholson, Dec 15 '18 at 21:42

score 2 · Accepted Answer · answered Dec 15 '18 at 19:21

// Cache the elements and add a click listener to the button
const out = document.getElementById('out');
const button = document.querySelector('button');
button.addEventListener('click', cal, false);

function abc() {
  var radius = document.f1.rd.value;

  // Instead of using `document.write`
  // append the value to the output div
  out.innerHTML += radius + '<br />';
}

function def() {
  var fala = document.f1.fala.value;
  out.innerHTML += fala + '<br />'
}

function cal(e) {

  // Prevent the form from submitting to the server
  e.preventDefault();
  def();
  abc();
}

<form name="f1">
  <label>RD</label><input name="rd" />
  <label>FALA</label><input name="fala" />
  <button>Cal!</button>
</form>
<div id="out"></div>

score 2 · Answer 2 · answered Dec 15 '18 at 19:25

Two things:

buttons inside forms initiate submit by default, you can "neutralize" them via setting their type to button
document.write() destroys the page, use an element for emitting results (like a div) and its innerHTML:

function cal(){
  result.innerHTML=rd.value+", "+fala.value;
}

<form name="f1" method="GET">
  <input type="text" name="rd" id="rd"><br>
  <input type="text" name="fala" id="fala"><br>
  <button type="button" onclick="cal()">Click me!</button>
</form>
<div id="result"></div>

score 0 · Answer 3 · answered Dec 15 '18 at 19:25

Try with console log and block default form submission.

<form name="f1">
    <input type="text" name="rd" id="rd0">
    <input type="text" name="fala" id="rd1">
    <button onclick="cal(event)">click</button>
</form>

<script type="text/javascript">
function abc() {
  var radius = document.forms.f1.rd.value;
  console.log(radius);
}

function def() {
  var fala = document.forms.f1.fala.value;
  console.log(fala);
}

function cal(event) {
  def();
  abc();
  event.preventDefault();
}
</script>

Nested function (Javascript)

3 Answers3