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 :(

Answer 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 */
}

Answer 2

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/

Answer 3

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