We Keep Coding

How to get console messages in iframe with javascript?

I've gone through all the other asked questions but none of them work. I'm trying to do it on the code block below. How can I get console messages from within an iframe? I can get it from outside the iframe, but I can't add console messages inside the iframe to the html. I had some trouble adding the script tag.
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

You can add following to the iframe js code. This will replace the original window.console.log with a custom log method that also sends the data to the parent frame.
const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};
And in your parent you can listen to these message events:
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
So here is a working example:
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
js = `const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};` + js
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

adding and deleting input fiel dynamically

I have a form in which I have add and minus buttons. On click event it should add a new input field and delete the selected input field correspondingly. Add button functions well in my case but deleting selected input field is not working.
I hope I explained my question properly if not let me know.
Thanks in advance.
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multivaluebox ">
<input asp-for="#Model" class=" form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
<br />
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
<script>
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" />';
document.getElementById('wrapper').appendChild(newdiv);
 
}
function deletetextbox() {
var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');
for (i = 0; i < inputlist.length; i++) {
if (document.getElementsByClassName('form-multivaluebox-textbox').isActive) {
$(this).remove();
}
}
 
}

I've put this together but it's not perfect.
It will allow you to add items to the wrapper and remove a selected item. However I'd suggest having a remove button at the end of each textbox to be more precise and user friendly.
var currentSelection;
function makeCurrentSelection(element){
currentSelection = element;
}
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" onfocus="makeCurrentSelection(this)"/>';
document.getElementById('wrapper').appendChild(newdiv);
}
function deletetextbox() {
currentSelection.remove();
}
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
<input asp-for="#Model" class=" form-multivaluebox-textbox" value="hello" onfocus="makeCurrentSelection(this)">
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+">
<br>
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-">
</div>

Not perfect but this will give you some idea regarding how to add/delete elements in JavaScript.
Add elements in wrapper div
Removes element from wrapper div
Please expand the snippet while executing.
Hope this helps !
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" />';
document.getElementById('wrapper').appendChild(newdiv);
 
}
function deletetextbox() {
var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');// document.getElementsByClassName()
for (i = 0; i < inputlist.length; i++) {
var elem = inputlist[0];
return elem.parentNode.removeChild(elem);
}
 
}
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
<input asp-for="#Model" class="form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
<br />
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
<div ></div>

Why the following button does not work?

This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,
I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:
<textarea cols="70" rows="15" id="text" ></textarea>
to the press the button called: Generate tables:
<button id="generate">Generate tables</button><br>
That calles the function called: generate
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
to produce the tables in the second text area called: out1
<div cols="3" rows="15" id="out1" ></div>
I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,
<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
color:GreenYellow ;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float:center;
width:700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>

Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.
Look at my snippet, I've correcting your script.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
textarea {
color: GreenYellow;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {
background-color: #000C17;
}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float: center;
width: 700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1"></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function () {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g
, '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</body>
</html>

Display default text inside a p tag if there is no value

I have a content editable <p> and an input of type submit. So, if there is no value inside the <p>, I want to display a default text (eg. "Add comment..."). If contenteditable is in focus remove the default text. Now if contenteditable is not in focus and user has input some text, leave the user typed text. However, if contenteditable is not in focus and theres not value display the default text. How can I do this in css or javascript (no jquery) ?
#add_comment {
width: 100%;
max-width: 720px;
margin: 1px auto;
background: white;
}
#divLeft {
vertical-align: top;
display:table-cell;
width: 100%;
}
#add_comment #comment {
display: block;
padding: 10px;
margin: 10px;
outline: 1px solid lightgrey;
}
#divRight {
display:table-cell;
width: 120px;
vertical-align: top;
}
#divRight #submit {
background: #2ec76e;
border: none;
color: white;
padding: 10px;
margin-top: 10px;
margin-right: 10px;
border-radius: 3px;
cursor: pointer;
}
<div id="add_comment">
<div id="divLeft">
<p id="comment" contenteditable="true"></p>
</div>
<div id="divRight">
<input type="submit" value="Comment" id="submit" />
</div>
</div>

Perhaps with the :empty pseudo-class and a pseudo-element?
#add_comment {
width: 100%;
max-width: 720px;
margin: 1px auto;
background: white;
}
#divLeft {
vertical-align: top;
display: table-cell;
width: 100%;
}
#add_comment #comment {
display: block;
padding: 10px;
margin: 10px;
outline: 1px solid lightgrey;
}
#divRight {
display: table-cell;
width: 120px;
vertical-align: top;
}
#divRight #submit {
background: #2ec76e;
border: none;
color: white;
padding: 10px;
margin-top: 10px;
margin-right: 10px;
border-radius: 3px;
cursor: pointer;
}
p:empty:before {
content: 'Add Comment';
color: grey
}
p:focus::before {
content: '';
}
<div id="add_comment">
<div id="divLeft">
<p id="comment" contenteditable="true"></p>
</div>
<div id="divRight">
<input type="submit" value="Comment" id="submit" />
</div>
</div>

Just put a control inside the p tag like this:
<p> <asp:Label ID="Label1" runat="server" Text=""></asp:Label></p>
or you can use html input tag.

https://jsfiddle.net/moongod101/jcma31L8/
$(function(){
$dfText = 'How was your day hum?'
$p = $('p');
$p.text($dfText);
$('input').on('input',function(){
$text = $(this).val();
if( $text == '' ){
$p.text($dfText)
}else{
$p.text($text)
}
});
});

With jQuery you could do something like this
jQuery
var placeHolder = 'Add Comment';
$("#comment").text(placeHolder);
$("#comment").bind("focusin blur", function () {
if ($(this).text() === placeHolder) {
$(this).text('');
} else if($(this).text() === ''){
$("#comment").text(placeHolder);
}
});

You can try,
p:empty:not(:focus)::before
{
content: attr(data-placeholder);
}
<p data-placeholder="Insert text here..." contenteditable></p>

Why is my page directing back to the login page when I press enter to add a comment

I have created an Instagram clone and all of my functionality (Like photos, add comments) is working fine when in jsbin: http://jsbin.com/tecaha/edit?js,output
For example, when I type a comment and press enter, the comment is added. However, when I copy this code into Atom and upload to my server, or use my local environment, when I press enter the page just loops back to the login.
Can someone tell me what is wrong here?
Here is the link to the page on the server http://jshuadvd.com/instagram/feed.html
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="top">
<ul>
<li><i class="fa fa-home fa-2x"></i>
</li>
<li id="logo">
<img src="http://i.imgur.com/SmdPZ6T.png" />
</li>
<li id="profile-photo">
<img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
<p class="username">username</p>
</li>
</ul>
</div>
</header>
<div id="container">
<main>
<div id="feed-container">
<ul id="images">
</ul>
</div>
</main>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
}
li {
list-style: none;
}
#container {
margin: 0 auto;
display: block;
}
header {
margin: 0 auto;
display: block;
background-color: #3E6D93;
height: 50px;
}
.top {
background: #467ea6;
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
background: linear-gradient(#467ea6 1%, #27608c 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
width: 100%;
}
.top li {
display: inline-block;
margin: 0 auto;
}
#home-button, .fa-home {
float: left;
background-color: #305F87;
color: #ccc;
padding: 7px;
margin-left: 200px;
width: 35px;
}
.fa-home {
padding-left: 12px;
}
#logo img {
float: right;
width: 110px;
margin-left: 400px;
padding: 6px;
}
#profile-photo {
float: right;
margin-right: 200px;
padding: 10px;
border-left: 1px solid #305F87;
border-right: 1px solid #305F87;
width: auto;
}
#profile-photo img {
width: 30px;
height: 30px;
border-radius: 5px;
}
#profile-photo p {
color: #fff;
font-weight: bold;
font-size: 14px;
text-align: center;
float: right;
margin-left: 10px;
padding: 5px;
}
#feed-container {
background-color: #DFDFDF;
width: 650px;
height: auto;
margin: 0 auto;
display: block;
}
#images {
margin: 0 auto;
display: block;
padding-top: 50px;
padding-bottom: 30px;
}
#images img {
margin: 0 auto;
display: block;
width: 550px;
height: 550px;
}
.below-image {
margin: 0 auto;
display: block;
width: 550px;
height: 52px;
background-color: #fff;
border: 1px solid #ccc;
}
.like {
float: left;
}
.fa-heart {
color: #5a5a5a;
padding: 10px;
border-right: 1px solid #ccc;
}
.liked {
color: #ff0000;
}
.image-info {
float: left;
text-align: left;
width: 437px;
height: 52px;
border-right: 1px solid #ccc;
}
.image-info p {
color: #467ea6;
font-weight: bold;
padding-top: 15px;
padding-left: 20px;
float: left;
}
.more {
float: right;
color: #5a5a5a;
}
.more, .info {
display: inline-block;
font-size: 45px;
color: #5a5a5a;
padding: 0 5px;
background-color: transparent;
border: 0;
cursor: pointer;
outline: none;
}
.clear {
clear: both;
}
.comment-container {
width: 550px;
margin-bottom: 65px;
}
.add-a-comment {
margin: 0 auto;
display: block;
background-color: #fff;
width: 550px;
height: auto;
margin-bottom: 50px;
}
.add-a-comment p {
margin: 0 auto;
display: block;
}
.add-a-comment input[type=text] {
width: 420px;
border: 1px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border: 0;
bottom: 40px;
padding: 15px;
outline: none;
background: transparent;
}
input, select, textarea{
color: #f00;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.inserted {
cursor: pointer;
}
.post-liked .fa-heart {
color: #f00;
}
.comment-click {
width: 30px;
text-align: center;
border: 1px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border: 0;
bottom: 40px;
padding: 15px;
outline: none;
background: transparent;
cursor: pointer;
float: right;
}
.comment-list {
width: 400px;
text-align: left;
}
.comment-list li{
margin-left: 20px;
color: #4f4f4f;
font-weight: 600;
padding-top: 5px;
}
.fixed-container {
height: 250px;
width: 530px;
overflow: scroll;
}
.un {
color: #467ea6;
}
JavaScript / jQuery
// Variable of html strings
var bottom = '<div class="below-image">' +
'<div class="like">' +
'<i class="fa fa-heart fa-2x"></i>' +
'</div>' +
'<div class="image-info">' +
'<p>User Info</p>' +
'</div>' +
'<div class="more">' +
'<button class="info">···</button>' +
'</div>' +
'<div class="clear"></div>' +
'</div>' +
'<div class="add-a-comment">' +
'<div class="comment-container">' +
'<form class="comment" action="index.html" method="post">' +
'<input id="enter" type="text" name="newcomment" value="" autocomplete="off" placeholder="Add a comment...">' +
'<button class="comment-click"></button>' +
'</form>' +
'<ul class="comment-list fixed-container">' +
'</ul>' +
'</div>' +
'</div>' +
'</li>' +
'</div>' +
'</div>';
// GET Request to grab the data from the JSON file
$(document).ready(function() {
var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";
$.getJSON(jsonURL, function(json) {
var imgList = "";
$.each(json, function (i) {
imgList += '<div class="post"><li><img class="inserted" src= " ' + json[i] + ' ">' + bottom;
});
$('#images').append(imgList);
// Like Photos
$('#images').on('click', '.inserted', function() {
// $('.fa-heart').toggleClass('liked');
var post_block = $(this).parents('.post').first();
post_block.toggleClass('post-liked');
});
// Add Comment
$('.comment-click').on('click', function() {
var userName = "Username";
//debugger;
//console.log("username", userName, $(userName));
var userComment = $(this).siblings('input[name=newcomment]').val();
$(this).parent().siblings('.comment-list').append("<li>" + userName + ' ' + userComment + "</li>");
$.each($('input'), function () {
$(this).val("");
});
});
});
});

The issue you have is that the form gets submitted when the user presses the enter key, so how to fix that is to hook the onSubmit event of the form.
To make this work, you need to apply these two changes:
1. convert your button to a submit button so that clicking the button will submit the form
<button class="comment-click" type="submit"></button>
2. Hook the on submit event, which will be called either when the user presses enter or the user clicks the submit button:
$('form.comment').on('submit', function(evt) {
var userName = "Username";
// note: "this" references the <form> element!
var userComment = $(this).find('input[name=newcomment]').val();
$(this).siblings('.comment-list').append("<li>" + userName + ' ' + userComment + "</li>");
$(this).find('input[name=newcomment]').val("");
// prevents the standard behaviour
evt.preventDefault();
return false;
});
3. remove your old code i.e the $('.comment-click').on('click', function() { ...
Also you should escape the user's input to prevent HTML/JS injection:
$(this).siblings('.comment-list').append($("<li></li>").text(userName + ' ' + userComment));
You can try this by entering something like <h1>big! on your current implementation.

because your comment form's action points to index.html
your index.html asks for login: http://jshuadvd.com/instagram/index.html
<form class="comment" action="index.html" method="post">
---
---
---
</form>