Creating DOM inner HTML from script

programming
1

Hi Guys,

i am having difficulty understanding the below code(the code works fine), i means how can we read the \' (\'' + id + '\') when writing the inner HTML from the Js file. i mean why we add \' to (' + id + ') in the below code, the id is the local variable in js file

the below is just the snippet of the code, if you think i should post all of the code then please let me know.

issuesList.innerHTML =
   '<div class="well">'+
        '<a href="#" onclick="setStatusosed(\'' + id + '\')" class="btn btn-warning"> close</a>' +'</div>';

Thanks in Advance.

2

The id lets you put the value of id in JavaScript into the HTML string being generated. Otherwise the HTML would have the text “id” in it when you really wanted whatever was in the id variable.

In more modern JavaScript this can be done with template literals which would look like this:

`<a href="#" onclick="setStatusosed('${id}')" class="btn btn-warning">`

So given different values of id…

id = 'myId';
`<a href="#" onclick="setStatusosed('${id}')" class="btn btn-warning">`
//= <a href="#" onclick="setStatusosed('myId')" class="btn btn-warning">

id = 'another';
`<a href="#" onclick="setStatusosed('${id}')" class="btn btn-warning">`
//= <a href="#" onclick="setStatusosed('another')" class="btn btn-warning">

etc.

3

Thanks Senocular, got it. :slightly_smiling_face:
i have now tried to use the template literal ('${id}') but it is coming up with unexpected identifier error, not use why but if i change it back to (\'' + id + '\') it works fine.
below is the link for my code if you like to have a look, the code is in main.js file and line number 111 and 112

[https://github.com/rock-007/Java-HTML-Project/tree/master/Protfolio-updated/project2]

4

Template varriables usin ${} require the strings to use backticks (`) rather than single or double quotes. Your example uses single quotes so each of the wrapping single quotes would need to change to backticks too.

1 Like
5

Thanks, i have now using backticks and all the errors are gone but the functionality of Delete and Close button is not working anymore(i.e they are not deleting or closing even after i click on the button) but when i use (\'' + id + '\') it works fine , cant see a reason why.
although the template variable is working fine for other variable that are only displaying desc,severity and assignedTo.

Below is the snippet of the code,

// it will fetch the list of issue objects in an array available locally in the browser local storage
function fetchIssues() {
    // from local storage(browser) it will get the item with the name issues and parse from the json format
    // i think issues here as an collection of an object in an array 
    var issues = JSON.parse(localStorage.getItem('issues'))
    var issuesListe = document.getElementById('issuesList')
    // the below to make sure it is enpty
    issuesList.innerHTML = '';
    for (var i = 0; i < issues.length; i++) {
        var id = issues[i].id;
        var desc = issues[i].description;
        var severity = issues[i].severity;
        var assignedTo = issues[i].assignedTo;
        var status = issues[i].status;
        issuesList.innerHTML += '<div class="well">' +
            '<h6> Isssue ID' + `${id}` + '</h6>' +
            '<p> <span class="label label-info">' + `${status}` + '</span></p>' +
            '<h3>' + `${desc}` + '</h3>' +
            '<p><span class="glyphicon glyphicon-time"></span>' + `${severity}` + '</p>' +
            '<p><span class="glyphicon glyphicon-user"></span>' + `${assignedTo}` + '</p>' +
            // `${id}` still the functionalty of botton is not working but when i chage to (\'' + id + '\') it works fine 
            '<a href="#" onclick="setStatusosed(`${id}`)" class="btn btn-warning"> close</a>' +
            // '+ and +' is added but still the button doesnt work
            '<a href="#" onclick="deleteIssue('+`${id}`+')"class="btn btn-danger"> Delete</a>' +
            '</div>';
    }

}

and the HTML part related to this is as

<div class="col-lg-12">
    <div id="issuesList">
    </div>
</div>
6

You’re not quite using them right :wink: . Look back at my examples.

'<h6> Isssue ID' + `${id}` + '</h6>'

would be

`<h6> Isssue ID ${id}</h6>`

The backticks go around the whole string. The only quotes are those that are actually supposed to be in the string itself (BTW Issue ^ has too many s’s).

Right now your close button is messed up to, but if you make the fixes like shown above, you should be able to get things working again.

7

yes i was a bit confused earlier with the template string, thanks for your help :slightly_smiling_face:

yes it all working fine now thanks, so i am now using like below code.
I still using ‘${id}’ having single quotein statement onclick=“deleteIssue(’${id}’)”, the only logic i can understand is that the function deleteIssue(id) that is triggered when we click on delete button and in that function id is having type of string thats why we need to use ’ ’ around ${id}.

        issuesList.innerHTML += ` <div class="well"> 

            <h6> Isssue ID  ${id}  </h6> 

            <p> <span class="label label-info">  ${status} </span></p> 

            <h3>  ${desc}  </h3> 

            <p><span class="glyphicon glyphicon-time"></span> ${severity}  </p>

            <p><span class="glyphicon glyphicon-user"></span>  ${assignedTo} </p> 

            <a href="#" onclick="setStatusClosed('${id}')" class="btn btn-warning"> close</a> 

            <a href="#" onclick="deleteIssue('${id}')"class="btn btn-danger"> Delete</a> 

            </div> `;

    }
8

Yeah the quotes around the variable are to make it a string. It wouldn’t be a problem if the value of id in javascript were a number, but chances are its not.

This is needed because if id is a string and you put its value into another string, it won’t get added with quotes around it. This makes sense normally, but when you’re added a variable to a string like this where the string is code, the code needs to know that the value is a string and not a variable name. To make that distinction, you need the quotes.

For example

id = 'window' // the string "window"
`<a href="#" onclick="deleteIssue('${id}')"class="btn btn-danger">`

becomes in HTML

<a href="#" onclick="deleteIssue('window')"class="btn btn-danger">

This calls the deleteIssue() function with the string 'window'. But if the quotes weren’t there…

id = 'window' // the string "window"
`<a href="#" onclick="deleteIssue(${id})"class="btn btn-danger">`

becomes in HTML

<a href="#" onclick="deleteIssue(window)"class="btn btn-danger">

Now, instead of passing the string “window”, its passing the global window object which is much different. If you’re placing string variables into code that need to stay strings, you need to add those extra quotes to make sure they’re seen as strings and not variable names or other kinds of code.

1 Like