InnerHTML with js variable, but it's a string

I got a function that generates my HTML (generateIssueCard function). This function receives 2 params and concatenates with the HTML string. Then I add it to my node using innerHTML (getAllIssuesFromProject function). But the onclick event I want to call another function passing as param these 2 params that I've received on the function that generates the HTML string but, when the HTML is generated, these params of the function inside onclick event aren't strings.

I tried to escape, to concatenate in all possible ways but it doesn't work. Here's the code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>JIRA API TEST</title>
  {{ style('style') }}

  <script>
    function showComments(title, key) {
      const request = new XMLHttpRequest();
      request.open('GET', '/get-all-comment/?+issuekey=' + key, true);

      request.onload = function() {
        if (this.status >= 200 && this.status < 400) {

          console.log(this.response)
          var resp = JSON.parse(this.response);

          resp.forEach(function(value, index) {
            document.getElementById('comments' + title).innerHTML += "<p>" + value.body + "</p>"
          })
          document.getElementById('comments' + title).removeAttribute('hidden')
        } else {
          console.log('Error on request')
        }
      }

      request.onerror = function() {}

      request.send();
    }

    function addComment(title) {

      let value = document.getElementById('add-comment').value

      var xhttp = new XMLHttpRequest();
      xhttp.open("POST", "/add-comment", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState === xhttp.DONE) {
          if (xhttp.status == 200) {
            // document.getElementById("comments-"+title).innerHTML += "<p>"+value+"</p>"
            let newEl = document.createElement("p")
            let node = document.createTextNode(value)
            newEl.appendChild(node)

            document.getElementById("comments-" + title).appendChild(node)
          }
        }
      }
      xhttp.send("comment=" + value)

    }

    function getAllIssuesFromProject() {

      const request = new XMLHttpRequest();
      request.open('GET', '/get-all-issues-from-project', true);

      request.onload = function() {
        if (this.status >= 200 && this.status < 400) {
          var resp = JSON.parse(this.response);

          console.log(resp[0].fields.summary)
          resp.forEach(function(value, index) {
            let issueTitle = resp[index].fields.summary
            let issueKey = resp[index].key
            console.log(document.getElementById('issues-container'))
            document.getElementById('issues-container').innerHTML += generateIssueCard(issueTitle, issueKey)
          })

        } else {
          console.log('Error on request')
        }
      }

      request.onerror = function() {}

      request.send();

    }

    function generateIssueCard(issueTitle, issuekey) {


      let resp = '<div class="card"><h2>' + issueTitle + '</h2><hr/><div hidden id="comments-' + issueTitle + '"><input type="text" placeholder="Add a comment" id="add-comment"><input type="button" value="Add" onclick="addComment()"></div><button onclick=\"showComments(\'+issueTitle+\',\'+issuekey+\')\">Get comment</button></div>'

      return resp
    }
  </script>
</head>

<body onpageshow="getAllIssuesFromProject()">
  <section>

    <div id="issues-container">

    </div>
  </section>
</body>


</html>

the generated HTML i get so far is:

<button onclick="showComments(test title,TEST-2)">Get comment</button>

the HTML I want is:

<button onclick="showComments("test title","TEST-2")">Get comment</button>

2 answers

  • answered 2020-05-22 13:00 Selvio Perez

    Try with this:

    function generateIssueCard(issueTitle, issuekey) {
      let resp = `
        <div class="card">
          <h2>${issueTitle}</h2>
          <hr/>
          <div hidden id="comments-${issueTitle}">
            <input type="text" placeholder="Add a comment" id="add-comment" />
            <input type="button" value="Add" onclick="addComment()" />
          </div>
          <button onclick="showComments('${issueTitle}', '${issuekey}')">Get comment</button>
        </div>
      `
    
      return resp;
    }
    
    

  • answered 2020-05-22 13:15 lluisma

    You missed simple quotes before and after the variables.

    Just replace the button generation code on generateIssueCard:

    <button onclick=\"showComments(\'+issueTitle+\',\'+issuekey+\')\">Get comment</button>
    

    using

    <button onclick=\"showComments(\''+issueTitle+'\',\''+issuekey+'\')\">Get comment</button>
    

    function generateIssueCard(issueTitle, issuekey) {
      let resp = '<div class="card"><h2>' + issueTitle + '</h2><hr/><div hidden id="comments-' + issueTitle + '"><input type="text" placeholder="Add a comment" id="add-comment"><input type="button" value="Add" onclick="addComment()"></div><button onclick=\"showComments(\''+issueTitle+'\',\''+issuekey+'\')\">Get comment</button></div>'
      return resp
    }
        
    function showComments(title, key) {
    	  alert(title);
        alert(key);
    }
        
    document.getElementById('demo').innerHTML = generateIssueCard('Your Title', 123);
    <div id="demo">
    </div>