Textbox value returns weird code instead of what's inside of it

Question

I found a bit of an issue when I wanted to add a smiley to an existing textbox. The code

	$cnt=$("#comContent").val
	
	$("#addSmiley").click(function() {
		console.log($cnt);
		$cnt = $cnt + ":)";
		console.log($cnt);
	});

#comContent {
	width: 100%;
	height: 120px;
	border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

<textarea id="comContent" cols="70" rows="20"></textarea>
<i style="margin-left: 10px;overflow:visible;cursor:pointer;" id="addSmiley" class="em em-smiley"></i>

and basically what I wanted to do is that after a user clicked on an icon of a smiley, the code should add ':)' to the textbox. I added console.log to see why it doesn't add anything. And then I saw this:

function (a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(gb,""):null==c?"":c)}}:)

I thought it was going to be a simple code, but I don't know what's wrong with it, and why it doesn't work

Answer 1

$cnt=$("#comContent").val();
	
	$("#addSmiley").click(function() {
		console.log($cnt);
		$cnt = $cnt + ":)";
		console.log($cnt);
	});

#comContent {
	width: 100%;
	height: 120px;
	border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

<textarea id="comContent" cols="70" rows="20"></textarea>
<i style="margin-left: 10px;overflow:visible;cursor:pointer;" id="addSmiley" class="em em-smiley"></i>

Add parenthesis to your .val. Like $cnt=$("#comContent").val();