CODEWITHSUNDEEP
javascript
Jonas Aabye Olsen
Jonas Aabye Olsen

Reputation: 9

String parameters in a javascript function

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/

Upvotes: 0

Views: 139

Answers (5)

Useless Code
Useless Code

Reputation: 12402

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

Upvotes: 0

7stud
7stud

Reputation: 48599

The error in Firebug is:

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

Upvotes: 0

Bergi
Bergi

Reputation: 664385

It's not the HTML that needs to be escaped there. The HTML character escape sequence &#039; 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.

Upvotes: 4

sites
sites

Reputation: 21785

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

\'The OC\'

Upvotes: 0

Quentin
Quentin

Reputation: 943214

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 \.

Upvotes: 3

Related Questions