How to Input and Output Javascript?

Question

Ok Guys I need help in this case and please help if you can :( I have following div created with text-type input

<div class="footer">

 <div id="footerInner">

    <form>
    <input type="text" name="enter" value="" id="input"/>
    </form>

 </div>
 </div>

I have also created above .footer .mainBody

<div class="mainBody">

    <script src="Scripts/main.js">

    var h = document.getElementById('input').value;

    document.write(h);

    </script>

</div>

And I have included Javascript in it I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"? Guys onkeyup="writeThis()" isn't working it just reloads page :(

Don't use document.write. If you use that method after the page is loaded, it will overwrite the entire page. Instead, select the target element and set the value that way. — Gary
– Gary, Commented Jan 9, 2014 at 19:42
I'm removing HTML5 tag and word from the title because it is JS general question and explanation, not related with HTML5 specifically. — Alberto Montellano
– Alberto Montellano, Commented Jan 9, 2014 at 19:57

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-01-09 19:42:20Z

1

To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.

You then need to use this:

<input type="text" id="input" onkeyup="writethis()" />

And the function would be:

function writethis() { // the function 
  var h = document.getElementById('input').value; // the value
  document.getElementsByClassName('mainBody').innerHTML = h; // the input
}

This way, you will get the input written on a keypress!

You can also try and use some keyevents such as:

if(event.keyCode == 13) { // enter key event
  /* key code for enter is 13 
   * do what so ever you want */
}

answered Jan 9, 2014 at 19:42

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

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

7 Comments

Afzaal Ahmad Zeeshan Over a year ago

@Pointy sorry I was just updating my answer :)

Pointy Over a year ago

OK yes much better now :)

Gary Over a year ago

His answer shows the better technique. Get the value and write it to the 'mainBody' div via .innerHTML method or another.

Afzaal Ahmad Zeeshan Over a year ago

You can use .innerHTML = @userdevastator :)

gdz Over a year ago

Great Thanks to all of you guys! Thanks again! :)

|

Alberto Montellano · Accepted Answer · 2014-01-09 19:50:13Z

0

Ok, try this as your JS script content in html head section:

function writeOnBody() {
    var inputText = document.getElementById('input').value;
    var mainBodyEl = document.getElementById('mainBody');
    mainBodyEl.innerHTML = inputText;
}

your HTML code:

<div class="footer">
    <div id="footerInner">
        <form>
            <input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
        </form>
    </div>
</div>
<div id='mainBody' class="mainBody"></div>

I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/

answered Jan 9, 2014 at 19:50

Alberto Montellano

6,4168 gold badges45 silver badges59 bronze badges

2 Comments

Gary Over a year ago

You should always explain what is going on instead of just writing code and saying "try this", otherwise the OP learns nothing and they (or others) will continue asking the same questions.

Alberto Montellano Over a year ago

Sure. Thanks for the feedback @Gary. I'll think about that next time.

Alaf Azam · Accepted Answer · 2014-01-09 20:14:38Z

0

var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;

avoid using getElementsByClassName instead give you div a id and use getElementById.. rest is in my opinion the best solution..

and yes you can also you a button also all you have to do is call you function on onclick event like this

<button onclick="functionZ()">click me</button>

and define that functionZ in your java script

What we are doing here is.. Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us.. Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body

edited Jan 9, 2014 at 20:14

answered Jan 9, 2014 at 19:52

Alaf Azam

1012 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to Input and Output Javascript?

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related