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
– Mark, Commented Dec 15, 2018 at 19:08
Okay . So how to use that call() function to print output of other two functions in HTML? — Usman Rafiq
– Usman Rafiq, Commented Dec 15, 2018 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
– Andy, Commented Dec 15, 2018 at 19:13

Andy · Accepted Answer · 2018-12-15 19:21:28Z

2

// 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>

answered Dec 15, 2018 at 19:21

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

1 Comment

Usman Rafiq Over a year ago

Thanks for the help :)

tevemadar · Accepted Answer · 2018-12-15 19:25:16Z

2

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>

answered Dec 15, 2018 at 19:25

tevemadar

13.3k3 gold badges27 silver badges63 bronze badges

Comments

n1md7 · Accepted Answer · 2018-12-15 19:25:48Z

0

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>

answered Dec 15, 2018 at 19:25

n1md7

3,5292 gold badges19 silver badges37 bronze badges

Collectives™ on Stack Overflow

Nested function (Javascript)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related