1

So I found this comment box the user Rick Hitchcock submitted here

What I need to do is a dd a generic user image and a user name (can be anonymous) when a user submits a comment. Thing is I have no idea how to go about doing this.

Can someone please help? Here is the code.......

document.addEventListener("DOMContentLoaded", function(event) {
  var form= document.querySelector('form');
  var textarea= document.querySelector('textarea');

  textarea.onkeypress= function(e) {
    if(e.which === 13 && !e.shiftKey) {
      this.parentNode.onsubmit(e);
    }
  }

  form.onsubmit= function(e) {
    var textarea = form.querySelector('textarea');
    var response = textarea.value;
    var node = document.createElement('div');
    node.innerHTML= response.replace(/\n/g,'<br>') + '<hr>';
    form.appendChild(node);
    textarea.value= '';
    e.preventDefault();
  }
});
textarea {
  width: 50%;
  height: 5em;
  float: left;
}

p {
  clear: both;
}
<form>
  <textarea></textarea>
  <input type="submit">
  <p>
    Comments Below:
  </p>
</form>
Community
  • 1
  • 1
caribou
  • 53
  • 5

1 Answers1

0

I assume that you want your website to have some kind of login functionality, so that users can register, choose a username and upload a picture. Probably you want to persist comments so that they are not lost when the user logs out or leaves your website. Last but not least you want your users to see the comments of other users.

The problem is that you cannot do that with HTML/Javascript/CSS only. You need to create a server application. There you would run a database where you store users, comments, whatever. You should really consider doing some tutorials on the web or read some proper book about web development.

I recommend you do this free and extensive Tutorial. When you have finished you will know a lot about the web and developing server side applications.

Edit:

If you really want to just play around without being able to persistenly save the comments: Well you know how to create a div element:

var node = document.createElement('div');

And you know how to append it to another element:

form.appendChild(node);

So why don't you just create an img tag and append it to the comment?

var img = document.createElement("img");
img.src = "path/to/your/generic/image.jpg";
node.append(img);

Or you get a random image from some api like this one. Create a p-tag or span-tag or whatever to display a random username.

Community
  • 1
  • 1
haffla
  • 1,056
  • 8
  • 15
  • Thanks for the reply but what I need is just to fake it really as its not going to be for a functional site and I don't have the time to figure out how to do it for real. But I still need it. There will not be any login as the comments can be made by anonymous users – caribou Nov 22 '15 at 22:26
  • My understanding is that comments are there so that other people (in other browsers) can read them. How do you want to save these comments??? Right, you need a database for that... no webserver, no database. – haffla Nov 24 '15 at 09:57
  • might have just been easier if I said it was for testing proposes. thanks for the replies though. – caribou Nov 28 '15 at 01:22