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

Question

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>

Answer 1

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 "\.