CODEWITHSUNDEEP
javascripthtml
PHPDev
PHPDev

Reputation: 152

HTML Tag containing quotes inside JavaScript code with quotes

I am writing JavaScript code that on click assigns the function getImage the source of the image that is later supposed to be display in the page. However, the quotation marks are giving me a problem.

<img src="bill.jpg" class="captify" 
id="teamformat" alt="Bill Gates" onclick="getName('Bill Gates'); 
getMotto('Bill\'s motto'); 
getImage ('<img src=\"http://www.somepage.com/images/team/bill.jpg\"/>');" />

How would I fix the quotation marks in the getImage function? Thank you.

Upvotes: 0

Views: 1572

Answers (2)

Oded
Oded

Reputation: 499002

Normally, you don't need to escape double quotes in single quote delimited strings:

getImage ('<img src="http://www.somepage.com/images/team/bill.jpg"/>');" />

Similarly, getMotto can be re-written as:

getMotto("Bill's motto");

You are getting a problem because you are using both style of quotes within a single attribute - you have way too much JavaScript there and you do need to escape the inner double quotes (using &quot;).

Both of these should be placed within a javascript function that you attach the click event to - don't directly place them in the onclick event handler, it is bad practice.

Something like:

function getDetailsForBill(){
     getName('Bill Gates'); 
     getMotto('Bill\'s motto'); 
     getImage ('<img src="http://www.somepage.com/images/team/bill.jpg" />');
}

Making the onclick:

onclick="getDetailsForBill();"

Though you really should be registering an event listener, using addEventListener.

Upvotes: 3

Marcin Orlowski
Marcin Orlowski

Reputation: 75629

Do not escape it:

getImage ('<img src="http://www.somepage.com/images/team/bill.jpg"/>');" />

Upvotes: 0

Related Questions