Variable that contains a string is empty when passed through an onclick function

Question

I am trying to pass a string into a function using the onclick Event. However when I click the link the variable inside the function returns nothing. It is empty. I have no issues when I pass a number as an argument and that is displayed in the alert with no issues. I am not sure what I am doing wrong.

for (var j=0;j<current_order.length;j++){   
    var note_id = "note" + (j+1);
    text = text + "<button onClick= 'deleteItemfromOrder("+j+")'>Delete</button>";  
    text = text + "<a id = '"+note_id+"' onClick= 'toggleNote("+note_id+")'>Notes</a>";
    alert(text);
}

This is the function I am trying to pass note_id to:

function toggleNote(showHideDiv) {
    alert(showHideDiv);
}

I have tried multiple methods to pass the string as an argument to the function EG:

text = text + "<a id = '"+note_id+"' onClick= 'toggleNote('"+note_id+"')'>Notes</a>";

and

text = text + "<a id = '"+note_id+"' onClick= 'toggleNote(\'"+note_id+"\;)'>Notes</a>";

However every time the string appears empty on the other side in the function. There is no issues if I pass a number eg:

text = text + "<a id = '"+note_id+"' onClick= 'toggleNote("+2+")'>Notes</a>";

Also can someone say why this has been downvoted?

F Khan
– F Khan

2016-11-15 23:36:29 +00:00
Commented Nov 15, 2016 at 23:36 — F Khan
– F Khan, Commented Nov 15, 2016 at 23:36

adeneo · Accepted Answer · 2016-11-15 23:41:47Z

1

Your problem is that you're missing quotes, numbers don't need quotes, as in

onclick='toggleNote(3)'

but a string does

onclick='toggleNote("string")'

Also, using the same quotes won't work either

onclick='toggleNote('string')'

meaning you have to do

text = text + "<a id = '"+note_id+"' onClick= 'toggleNote(\""+note_id+"\")'>Notes</a>";

But really what you should do, is create elements

for (var j = 0; j < current_order.length; j++) {
    (function(i) {
        var btn = document.createElement('button');
        var anc = document.createElement('a');

        btn.addEventListener('click', function() {
            deleteItemfromOrder(i);
        });

        btn.textContent = 'Delete';

        anc.addEventListener('click', function() {
            toggleNote("note" + (i+1))
        });

        anc.textContent = 'Notes';
    })(j);
}

edited Nov 15, 2016 at 23:41

answered Nov 15, 2016 at 23:37

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

or just reference the id and do not worry about passing the string.

F Khan Over a year ago

That works great. Everywhere I looked however they use single quotes and speech mark like double quotes for strings in javascript. How do I know when and where to use the different ones and when to use escaping I think its called ( these \ backslashes).

adeneo Over a year ago

@FKhan - if you have an attribute, and that attribute uses single quotes, anything inside it must use double quotes, otherwise the attribute is closed when you add a single quote, and since your string is defined with doublequotes in javascript, they must be escaped to not close the string literal.

Collectives™ on Stack Overflow

Variable that contains a string is empty when passed through an onclick function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related