CODEWITHSUNDEEP
javascripthtml
novemberrain
novemberrain

Reputation: 11

Why innerHTML return null

I need div to show an user's message, where is : [name] : [text of message], and when I click the button to send it, message should be shown in appropriate div. But when I write a message and click the button, than I see in div: null : null. Why it happens?

I have alredy tried to change name of variable and name of div's id that contains name and text.

HTML:

<form class="login" onsubmit="return false">
    <input type="text" id="name" placeholder="name"><br>
    <textarea type="text" id="message" placeholder="message"> 
    </textarea><br>
    <input type="submit" id="btn" value="Send">
</form>

JavaScript:

var chat = document.getElementById('chat'); //chat
var name = document.getElementById('name'); //username
var message = document.getElementById('message'); //message 
var btn = document.getElementById('btn');

btn.onclick = function(){
    chat.innerHTML = name + " : " + message;
}

Upvotes: 1

Views: 1545

Answers (1)

Swati
Swati

Reputation: 28522

You have not put .value to get value of input . Try like below :

btn.onclick = function(){
var chat = document.getElementById('chat'); //chat
var name = document.getElementById('name').value; //username
var message = document.getElementById('message').value; //message 
var btn = document.getElementById('btn');
    chat.innerHTML = name + " : " + message;
}
<form class="login" onsubmit="return false">
    <input type="text" id="name" placeholder="name"><br>
    <textarea type="text" id="message" placeholder="message"> 
    </textarea><br>
    <input type="submit" id="btn" value="Send">
</form>

<div id="chat">
</div>

Upvotes: 2

Related Questions