1

I have a problem.

I am using a javascript that call the HTML elements and now i want to add another element that also uses javascript but i dont know how to combine them. This is the first:

list_options+='<li><input type="checkbox" value="Fuction 1 [first]" name="html_options[]" class="check-opt" data="1">Function 1 <span>[first]</span</li>';

The secound js i need to integrate into the first:

<p>Coockie warning, <a onmouseover="nhpup.popup(' Coockie stuff text ');" style="cursor:pointer;" > read more </a>!</p>

So now if i want to combine the to like this it does not work becuse of the '' in the document:

list_options+='<li><input type="checkbox" value="Function 1 [1$]" name="html_options[]" class="check-opt" data="1">Function 1 <span>[1$]</span><p><a onmouseover="nhpup.popup(' TEXT THAT SHOULD GET DISPLAYED ');" style="cursor:pointer;" > ? </a>!</p></li>';

What should i do?

4
  • 1
    Adding a backslash will escape the quotation: 'My quote\'s quote' Commented May 29, 2015 at 23:19
  • Hopefully you'll find that creating HTML in JS is not a very maintainable approach. Commented May 29, 2015 at 23:26
  • @FelixKling yes i know but i needed dinamic updatineg of some HTML fields without refreshing the whole page. Commented May 29, 2015 at 23:34
  • 1
    No problem. You you can create DOM elements dynamically or use templates. Learn more about the DOM: quirksmode.org/js/contents.html#dom. Especially with jQuery, this becomes quite easy: learn.jquery.com/using-jquery-core/manipulating-elements/… Commented May 29, 2015 at 23:35

2 Answers 2

1

You can escape the single quote with a backslash \ character.

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

Comments

0

First off: when I refer to String literals I am referring to the creation of string primitives, as shown below. There are two types of strings, primitives and objects. String objects are created like new String(..).

In javascript, string literals are created with quotation marks, or double quotation marks. This means you can define a string like

str = 'a string'

or

str = "a string"

Single Quotation mark

But say you define your string with a quotation mark, like the first example, and you put the word "can't" in it. Now the definition will look like below.

str = 'this can't work'

This will cause an error, because the actual string is considered to be 'this can'. If we want to use quotation marks in a string literal defined with quotation marks, we must escape those characters, with the escape character \ before them. (NOTE: this escape character isn't displayed in the final string, or even in it, as Felix points out in the comments, and is explained in more detail below)

To get the string to actually work and print 'this can't work', this means we would have to do something like this:

str = 'this can\'t not work'

Double Quotation mark

If we define your string with a double quotation mark, like the second example, we can put quotation marks in them without having to escape it, so the following works:

str = "this can't not work"

Now, say we wanted to put a quote into the string. We can use either single or double quotation marks. If we use double quotation marks in a string literal defined with double quotation marks, we will have to escape those characters like when we used single quotation marks in a string literal defined with a single quotation mark, like so:

str = "he said \"foo bar baz\""

If you define you string literal in a single quotation mark, you don't need to escape double quotation marks within that string, like so:

str = 'he said "foo bar baz"'

programmatically creating strings

Say we have a variable that can be true or false and we want to tell a user. to do this, we can create a string variable, and add the value straight into it, like so:

var someValue = true;
var str = 'hey some value is ' + someValue + '.'

You can add to the string as much as you want or like.

Original question

It seems like you want to embed some variable into your string list_options. To do this, try something like below:

list_options+='<li><input type="checkbox" value="Function 1 [1$]" name="html_options[]" class="check-opt" data="1">Function 1 <span>[1$]</span><p><a onmouseover="nhpup.popup(' + SOME_VARIABLE_YOU_WANT_TO_DISPLAY + ');" style="cursor:pointer;" > ? </a>!</p></li>';

If however, you don't want to embed a variable into the string, and want to just display fixed text, try either of the following:

This uses escaped characters:

list_options+='<li><input type="checkbox" value="Function 1 [1$]" name="html_options[]" class="check-opt" data="1">Function 1 <span>[1$]</span><p><a onmouseover="nhpup.popup(\' TEXT THAT SHOULD GET DISPLAYED \');" style="cursor:pointer;" > ? </a>!</p></li>';

This uses double quotation marks:

list_options+='<li><input type="checkbox" value="Function 1 [1$]" name="html_options[]" class="check-opt" data="1">Function 1 <span>[1$]</span><p><a onmouseover="nhpup.popup(" TEXT THAT SHOULD GET DISPLAYED ");" style="cursor:pointer;" > ? </a>!</p></li>';

Escaping Characters

So, escaping characters is something you will need to learn to use when defining your strings, as some characters in strings can break the string creation. Also, there are special characters which do things in a string which you may want, like a new line(use \n), or tab character(use \t). If you want to read more about these characters, just google 'javascript escape characters', or alternatively, MDN has great documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

2 Comments

"String literals are string object definitions" I think that will be confusing. String literals create primitive values, which are very different from String objects (i.e. new String(...)). "this escape character isn't displayed in the final string, and is explained in more detail below" Where exactly are you explaining this more? FWIW, the escape character is not even contained in the string (maybe that's what you mean?). It's not part of the value. It's purely an indicator for the parser to treat the following character differently.
I ran out of time when writing the answer and I need to edit in the correct information, and information on the escape character. You are right in your two points, and I should edit it in. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.