String parameters in a javascript function

Question

Im having a function:

<script>
function params(a,b,c,d) {
// alert (c); 
var question = document.getElementById("question");
question.value = c;
var answer = document.getElementById("answer");
answer.value = d;
var catid = document.getElementById("catid");
catid.value = a;
var qid = document.getElementById("qid");
qid.value = b;
}

<button class="modalInput" rel="#prompt" onClick="params(29,29,'In a FOX TV show, what did &#039;The OC&#039; stand for','Orange County');"><img src=/images/exclamationmark1.png title="Is there an error in this question, report it here." ></button>


<button class="modalInput" rel="#prompt" onClick="params(29,16,'Which reality show is named after a George Orwell character','Big Brother');"><img src=/images/exclamationmark1.png title="Is there an error in this question, report it here." ></button>

First button doesnt Work, because of the #&039; - Second one does... But the first one did come from using htmlspecialchars() on a string... So I thought this would do the trick?

You can see the page its on here:

http://www.quizboard-cheat.com/component/com_rquote/Itemid,176/catid,29/number_items,999/quotation_marks,0/show_author,1/show_createdate,0/show_notes,0/show_quote,1/sort_column,0/sort_order,0/view,rquotes/

Bergi · Accepted Answer · 2013-05-19 20:23:04Z

4

It's not the HTML that needs to be escaped there. The HTML character escape sequence ' will yield a single apostrophe, so the JavaScript code you get is

params(29,29,'In a FOX TV show, what did 'The OC' stand for','Orange County');

Obviously a syntax error. You just would need to escape the string delimiters with a backslash:

<button … onClick="params(29,29,'In a … did \'The OC\' stand for',…);">

Or you would need to use quotes as string delimiters - which then would indeed need to be HTML-escaped, since they are used as HTML attribute delimiters:

<button … onClick="params(29,29,&#034;In a … did 'The OC' stand for&#034;,…);">

Of course, @Kirill Ivlev is right. You shouldn't have used inline event handler attributes in the first place, but unobtrusive javascript. If you attach your listeners from scripts code, you won't have any encoding problems.

edited May 19, 2013 at 20:23

answered May 19, 2013 at 20:17

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

3 Comments

7stud Over a year ago

Another way to think about it is: the whole button tag is rendered by the browser. The browser converts those html entities to quote mark characters. Later, when a user clicks on the button, the text including the quote mark characters is sent to the javascript function.

Bergi Over a year ago

@7stud: Now, not exactly (replace render with parse and the JS will be parsed as well before it is interpreted) but the idea gets it right…

7stud Over a year ago

Yeah, I was not satisfied with my explanation after I posted it.

Quentin · Accepted Answer · 2013-05-19 20:17:41Z

3

htmlspecialchars will stop the character from causing problems to the HTML. When the attribute value is parsed it is converted back to ' before being passes to the JS engine and at that point it breaks the string. You need to escape it with \.

answered May 19, 2013 at 20:17

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

sites · Accepted Answer · 2013-05-19 20:18:04Z

0

See here, you can escape characteres with backslash, is an option:

\'The OC\'

answered May 19, 2013 at 20:18

sites

21.9k18 gold badges90 silver badges147 bronze badges

Comments

7stud · Accepted Answer · 2013-05-19 20:25:40Z

0

The error in Firebug is:

params(29,29,'In a FOX TV show, what did 'The OC' stand for','Orange County');
                                         ^

answered May 19, 2013 at 20:25

7stud

48.8k14 gold badges107 silver badges136 bronze badges

Comments

Useless Code · Accepted Answer · 2013-05-19 23:13:32Z

A better approach might be to use data attributes. Instead of jamming everything into an inline click handler where you have to escape it not only for HTML but also for JS, put each of the parameters in a separate data-paramname attribute. Aside from making escaping easier to manage, it will also make the code cleaner and easier to read.

<div id="questioncontainer">
  <button class="modalInput" rel="#prompt" data-catid="29" data-qid="29"
    data-question="In a FOX TV show, what did &#039;The OC&#039; stand for"
    data-answer="Orange County"><img src=/images/exclamationmark1.png
    title="Is there an error in this question, report it here." >Q1</button>
  <button class="modalInput" rel="#prompt" data-catid="29" data-qid="16"
    data-question="Which reality show is named after a George Orwell character"
    data-answer="Big Brother"><img src=/images/exclamationmark1.png
    title="Is there an error in this question, report it here." >Q2</button>
</div>

The below code uses event delegation to attach a single event handler to handle all of the modalinput buttons inside it.

(function () { // prevent our vars from leaking into the global name-space
  "use strict";
  // querying the DOM is slow, we will be accessing
  // these elements frequently, store references to them
  var question = document.getElementById("question"),
    answer = document.getElementById("answer"),
    catid = document.getElementById("catid"),
    qid = document.getElementById("qid"),

    displayQuestion =  function (evt) {
      var target = evt.target,
        getData = function (name) {
          return target.getAttribute('data-' + name);
        };

      if (target.className.match(/\bmodalinput\b/i)) {
        question.value = getData('question');
        answer.value = getData('answer');
        catid.value = getData('catid');
        qid.value = getData('qid');
      }
    },
    questionContainer = document.getElementById('questioncontainer');

  questionContainer.addEventListener('click', displayQuestion, false);
}());

Functioning example

Collectives™ on Stack Overflow

String parameters in a javascript function

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related