String passed with spaces inside javascript onclick function does not get recognised

Question

Below is the code snippet

var docd = {message: 'hi'};

chatHTML += `<div class="message"> ${docd.message} </div>
     <i class="fas fa-reply" onclick=expand('${docd.message}')></i>
         </div>`;

$(".message-container").html(chatHTML);

function expand(message,)
{
console.log(message);
}

So the above code works just Fine.

Now if i change the variable value as

var docd = {message: 'hi hello how are you'}; // Added spaces inbetween

Now when the onclick event is called I am getting a error as

Unexpected or Invalid token

Is it because the second string what i am passing is having spaces? Or is there any other issues? How to solve this? Any help appreciated.

onclick=expand('${docd.message}) must be onclick=expand('${docd.message}') instead. — connexo
– connexo, Commented May 12, 2021 at 9:22

trincot · Accepted Answer · 2021-05-12 09:39:29Z

1

You have missing quotation marks in your HTML onclick attribute. Instead of building HTML as a string, consider using the jQuery methods that link the handler via JavaScript:

var docd = {message: 'hi there'};

$(".message-container").append(
    $("<div>").addClass("message").text(docd.message).append(
         $("<i>").addClass("fas fa-reply").click(() => expand(docd.message))
    )
);

function expand(message,) {
    console.log(message);
}

.fa-reply:before {
    content: "⮪"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message-container"></div>

answered May 12, 2021 at 9:39

trincot

357k38 gold badges282 silver badges339 bronze badges

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

1 Comment

julien.giband Over a year ago

That's the only answer that addresses the issues with string escaping in the OP's question. There's your answer!

chrwahl · Accepted Answer · 2021-05-12 09:45:02Z

0

You are missing the quotes around the value of the attribute onclick: onclick="expand('${docd.message}')" and also there is no text inside the i element, so I just added "test". I see no problem with spaces missing.

var docd = {
  message: 'hi there'
};

var chatHTML = `<div class="message"> ${docd.message} </div>
     <i class="fas fa-reply" onclick="expand('${docd.message}')">test</i>
         </div>`;

$(".message-container").html(chatHTML);

function expand(message, ) {
  console.log(message);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message-container"></div>

edited May 12, 2021 at 9:45

answered May 12, 2021 at 9:38

chrwahl

14.2k2 gold badges25 silver badges40 bronze badges

Comments

AndrewL64 · Accepted Answer · 2021-05-12 10:02:24Z

0

Your onclick is missing double-quotes as well as single-quotes around the function and the function parameter.

In your <i> tag, change this:

onclick=expand('${docd.message}')

To this:

onclick="expand('${docd.message}')"

Check and run the Code Snippet below for a live example of the above corrected code (Vanilla JS version):

function expand(message){
    console.log(message);
}

let chatHTML ='';
var docd = {message: 'hi hello how are you'};



chatHTML += `<div class="message"> ${docd.message} </div>
     <i class="fas fa-reply" onclick="expand('${docd.message}')">Click Me</i>
         </div>`;

document.querySelector('.someElement').innerHTML += chatHTML;

<section class="someElement"></section>

But as @julien.giband pointed out, this approach will have issues with escaping quotes if docd.message has a quote in it. You can prevent the escaping issue by using an event listener instead like this:

let chatHTML ='';
var docd = {message: `hi hello's how are"s you`};



chatHTML += `<div class="message"> ${docd.message} </div>
     <i class="fas fa-reply">Click Me</i>`;
         
document.querySelector('.chatHTML').innerHTML += chatHTML;

document.querySelector('i.fa-reply').addEventListener('click', () => console.log(`${docd.message}`));

<section class="chatHTML"></section>

edited May 12, 2021 at 10:02

answered May 12, 2021 at 9:38

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

2 Comments

julien.giband Over a year ago

There are much bigger problems with escapes and using variable values instead of variables themselves here. What will happen to ` expand('${docd.message}') ` when the message contains a single quote '? What result will this yield? Same questions to @chrwahl

AndrewL64 Over a year ago

@julien.giband Good point. Answer updated.

Collectives™ on Stack Overflow

String passed with spaces inside javascript onclick function does not get recognised

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related