Output contents of HTML Element into console

user_12920821 0
Viewed 56

I know only a little bit of JavaScript. I need to output in my terminal a message input by user in a html form, but my current JavaScript solution isn't displaying the right output.

HTML

<h2 class="heading">Send e-mail to someone@example.com:</h2>
<input name="myText" id="myText" type="text" placeholder="enter your message here">
<button id="btn" onclick="sendMail()">Send</button>
<script src="./server.js"></script>

javascript

console.log(document.getElementById('myText').innerText());
html javascript
3 Answers

Use this and you get the value inside input

document.getElementById('myText').value
user_124067630

You can use JQuery.

$(':input').keyup(function() {
    console.log($(this).val())
});
user_157407450

Presumably you wish to get the value from the text field when some sort of event occurs? Assign an event handler to the input element - like so:

document.querySelector('input[name="myText"]').addEventListener('keyup',function(e){
  console.log(this.value)
})
<h2 class="heading">Send e-mail to someone@example.com:</h2>
<input name="myText" id="myText" type="text" placeholder="enter your message here">
<button id="btn" onclick="sendMail()">Send</button>

To assign an event handler to the button

document.querySelector('button#btn').addEventListener('click',function(e){
  e.preventDefault();
  console.log(this.previousElementSibling.value)
})
<h2 class="heading">Send e-mail to someone@example.com:</h2>
<input name="myText" id="myText" type="text" placeholder="enter your message here">
<button id="btn">Send</button>

user_36036810
Related