JS function output to HTML input element

Question

How do I return the output of JS function to my HTML input element.

Form like this .

Now on my click Run - Script i execute simple script

<button type="submit" class="btn btn-success form-control" onclick="$('#output').toggle();"  onclick="Task_1(document.getElementById('word').value,document.getElementById('repeat').value)">Run script</button>

function Task_1(word, repeat_number) {
  console.log("------------------------------------");
  var Output = "";
  for (var i = 0; i < repeat_number; i++) {
     Output = Output + word;
  }
 console.log(Output);
 return Output;
}

An the output of that script should be show on additional input box

I tried with

document.getElementById("output").innerHTML = Output.toString();

Complete : JS FIDDLE - Task#1

Also: If i rotate two commented lines

<link rel="stylesheet" ...
<script src="h ...

it gives me the great output as i wanted but then the modal window doesn't work. The only difference is in version 4.1.2 and 3.3.7 how to bypass it.

Note: Learner who is going through tutorials. Point me at start so i wont go in wrong direction.

If you want to cheat a bit: var result = word.repeat(repeat_number) :) — Jonas Wilms
– Jonas Wilms, Commented Sep 22, 2018 at 8:55
@JonasWilms hahah let me first get the syntax here. Its just an example tomorrow ill need to use the for loops to access the world banks transactions and i wont be able to use libraries :P :P — PyDeveloper
– PyDeveloper, Commented Sep 22, 2018 at 8:59
Could you show us the version with the i tried with part? that should actually work. — Jonas Wilms
– Jonas Wilms, Commented Sep 22, 2018 at 9:14

jla · Accepted Answer · 2018-09-23 09:04:43Z

1

The problem is with your submit button.

You have:

<button type="submit" class="btn btn-success form-control" onclick="$('#output').toggle();"  onclick="Task_1(document.getElementById('word').value,document.getElementById('repeat').value)">Run script</button>

Notice that you have two onclick attributes within the button. Only the first one is executed. To execute multiple JavaScript statements on each click you need a single onclick attribute with the statements separated by a semi colon.

<button type="submit" class="btn btn-success form-control" onclick="$('#output').toggle(); Task_1(document.getElementById('word').value,document.getElementById('repeat').value)">Run script</button>

You might like to consider attaching the event handler in your JavaScript code rather than in your HTML. This is usually considered best practice.

answered Sep 23, 2018 at 9:04

jla

4,8293 gold badges32 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

JS function output to HTML input element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related