We Keep Coding

onclick() event is not working in javascript and span tag

I have written the below code to display textarea in the form but it is not working in javaascript. the real requirement is when i click on reply in span tag a text area with a button should appear but it is not happening. Is it happening because the script part is below the span tag or something else is the reason for it just asking.
echo "<center>";
echo "<span class=c20 id=like1>Like</span>";
echo "<span class=c21 id=reply1 onclick='myFunction()'>Reply</span>";
echo "<span class=c22 id=display1>Display</span>";
echo "</center>";
echo "<br><br>";
echo "<span id=reply3></span>";
echo "<br><br>";
'$row01["Email"]'; '$row01["Name"]'; '$row01["Message"]'; '$row01["Picture"]'; '$row01["Status"]'; '$replybymail'; '$replybyname'; '$row01["Password"]';
<script type="text/javascript">
document.getElementById("reply1").addEventListener("click", myFunction);
function myFunction() {
reply();
}
function reply() {
var x = document.getElementById("reply3").value;
var email1 = document.getElementById("i1").value;
var pass1 = document.getElementById("i8").value;
var name1 = document.getElementById("i2").value;
var pict1 = document.getElementById("i4").value;
var status1 = document.getElementById("i5").value;
var message1 = document.getElementById("i3").value;
var replybymail1 = document.getElementById("i6").value;
var replybyname1 = document.getElementById("i7").value;
var email;
var picture;
var name;
var status;
var password;
var mess;
var replybymail;
var replybyname;
var url= 'profileto.php?email='+ email1+'&picture='+ pict1+'&name='+ name1+'&status=' + status1+'&password='+ pass1+'&mess=' + message1+'&replybymail='+ replybymail1 +'&replybyname='+ replybyname1+' ';
var forms = "<form id='replyform' method='POST' class='form1' onsubmit = 'myFunction2()'>
<center><textarea cols='40' rows='50' class = 'c61' name='reply' style= 'height: 27px'></textarea></center><br>
<center><input type='submit' value ='Reply' class='c60'></center></form><br><br>";
document.getElementById("reply3").innerHTML = forms;
document.getElementById("replyform").action = url;
if(x.style.display === "none" )
{
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2()
{
alert("Your post is published");
}
</script>

The problem is that you are getting the element to set OnClickListener
JS is not able to find the element!
You are not using inverted commas when set attribute value.
Change this line:
echo "<span class=c21 id=reply1 onclick='myFunction()'>Reply</span>";
To:
echo "<span class=\"c21\" id=\"reply1\" onclick='myFunction()'>Reply</span>";
\ is used to escape " OR '.
Always add \ before " OR '. Like this \".
Not like this "\.

Get element from HTML object javascript

I have a HTML String and I want to get img element and initialize it.
var discountItem = '<li class="sidebar-brand" style="font-weight: bold; color: #9999 class="col-item">' +
'<div class="post-img-content">' +
'<img src=" " class="img-responsive" id="mimo" />'+
'<span class="post-title">'+
'<b>Perfumes</b><br>'+
'<b>Clássico</b>'+
'</span>'+
'<span class="round-tag">-15%</span>'+
'</div>'+
'</li>';
var k = app.clone(discountItem);
var df = document.createDocumentFragment();
// create a placeholder node to hold the innerHTML
var el = document.createElement('body');
el.innerHTML = k;
// append to the document fragment
df.appendChild(el);
// execute .getElementById
console.log(df.getElementByClassName('img-responsive');
view += k;
clone : function(obj){
try{
var copy = JSON.parse(JSON.stringify(obj));
} catch(ex){
console.log("you are using an old navigator");
}
return copy;
}
I tried this but it doesn't work.
My goal is to initialize the src of the image.
Could someone help me ?

If you're trying to find the img element, you can do a lot less work: Just create a body, append that HTML to it, and use querySelector:
var discountItem = '<li class="sidebar-brand" style="font-weight: bold; color: #9999 class="col-item">' +
'<div class="post-img-content">' +
'<img src=" " class="img-responsive" id="mimo" />'+
'<span class="post-title">'+
'<b>Perfumes</b><br>'+
'<b>Clássico</b>'+
'</span>'+
'<span class="round-tag">-15%</span>'+
'</div>'+
'</li>';
var body = document.createElement("body");
body.innerHTML = discountItem;
var img = body.querySelector(".img-responsive");
img.src = "source path here";

jquery added html code not worked

I started new project and I use jquery to add content to article
when I create a slider with this code:
$(".inserttabtext1").click(function () {
var count = parseInt($(".firsttabtextcount").attr("name"), 10);
var name = parseInt($(this).attr("name"));
var id = "#" + name;
var idi,idt,content,idic,idtc;
content = "<div class='short-tabs'><ul>";
for (var i = 1; i <= count; i++)
{
idi = "#ftti" + i;
idic = $(idi).val();
if (i == 1)
{
content += "<li class='active'><a href='#'> " + i + idic + "</a></li>";
}
else
{
content += "<li><a href='#'> "+ i + idic +"</a></li>";
}
}
content += "</ul>";
for (var i = 1; i <= count; i++)
{
if (i==1)
{
content += "<div class='active'>";
}
else
{
content += "<div>";
}
idt = "#fttt" +i;
idtc = $(idt).val();
content += "<p class='text-go-center'>"+idtc+"</p></div>";
}
content += "</div>";
$(id).html(content);
});
and put them into html code my text slider not worked
but when I put manual html code in my page it work
I use these code for copy my html code
$(id).html(content);
$(id).append(content);
where is my wrong?

create a function and put your slider codes inside it, then call it in $(document).ready, and call it again after adding html
$(document).ready(function(){
Init();
});
function Init(){
//Call your slide function here
}
call Init after Adding Html
$(id).html(content);
$(id).append(content);
Init();

parse HTMLElmentObject with innerHTML in javascript

I am building a cat clicker game. Where I Have five cat and each one has click function which increase count on every click.
I have created a DOM from javascript function, I have create image from document.create method so that I can attached event to it. So my javascript code contains both pure HTML and HTMLElementObj. fiddle.
But innerHTML is not paring the element which is creating by the document.createElement
function fac(name) {
this.name = name;
this.count = 0;
}
var cats = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']
function $(name) {
return document.querySelector(name);
}
var html = "";
for (var i = 0; i < cats.length; i++) {
var cat = new fac(cats[i])
html += "<div>";
html += "<div>" + cat.name + "</div>";
var elem = document.createElement('img');
elem.src = 'https://c2.staticflickr.com/2/1126/625069434_db86b67df8_n.jpg';
html += elem;
html += "<div class='count " + i + "'></div>";
html += "</div>";
elem.addEventListener('click', function() {
$('.count' + i).innerText = ++cat.count;
}, false);
$('#getClicked').innerHTML = html
}

You are mixing strings and dom elements and that won't work. Just do everything as strings
html += "<div>";
html += "<div>" + cat.name + "</div>";
var elem = "<img src='https://c2.staticflickr.com/2/1126/625069434_db86b67df8_n.jpg'>";
html += elem;
html += "<div class='count " + i + "'></div>";
or as dom elements (a bit more learning needed to start with but better in the long run)

Changing the content of all <pre> tags using JavaScript

I want to know how I change all the pre tags inside a document...
I'm using this:
var preContent = document.getElementById('code').innerHTML;
but this only changes the content of 1 pre tag... the one with the ID 'code'.
If you can show me how i can change all the pre tags using JavaScript I appreciate
Here's all the code:
window.onload = function () {
var preContent = document.getElementById('code').innerHTML;
var codeLine = new Array();
var newContent = '<table width="100%" border="1" '
+ 'cellpadding="0" cellspacing="0" >';
codeLine = preContent.split('\n');
for (var i = 0; i < codeLine.length; i++) {
newContent = newContent + '<tr><td class="codeTab1" >'
+ i.toString() + '</td><td class="codeTab2">'
+ codeLine[i] + '</td></tr>';
}
newContent = newContent + '</table>';
document.getElementById('code').innerHTML = newContent;
}
PS: This is to make a look like a normal compiler with numbers before the line
PPS: Each pre tag will have a different content and I want the same script to change it (if possible).

You can use getElementsByTagName:
var preElements = document.getElementsByTagName('pre');
for(var i = 0; i < preElements.length; ++ i)
{
var element = preElements[i];
/* modify element.innerHTML here */
}

First problem in you code . No two elements in a document can have same id .
So you can change it easily with jquery . look at the code .
$('pre').html("what ever text you want to show ");
Or with javascript you can do like this :
var x = document.getElementsByTagName('pre');
for(var i = 0; i < x.length; ++ i)
{
x.innerHTML = "what ever text you want to show";
}