How do I use quotation marks correctly in JavaScript?

Question

In my JavaScript code I have the following line:

document.write("</form><button style='margin-top:100px; width:150px; position:absolute; left:50%; margin-left:-75px' type='button' onclick='Proceed('test')'>Se resultat</button>");

The style and type properties work fine but when I try to pass a parameter to the JavaScript function Proceed it doesn't work. I have also tried (\'test\')

How do I solve this problem?

Edit: full html script

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title here.</title>
    <script>
        function Proceed(var test)
        {
            alert(test);
        }
    </script>
</head>
<body style="font-family:Palatino">
    <img src="logo.png"/>
    <hr/>
    <h1 style="text-align:center">Description here.</h1>        

    <script>

        if (window.XMLHttpRequest)
        {
            request=new XMLHttpRequest();
        }
        else
        {
            request=new ActiveXObject("Microsoft.XMLHTTP");
        }
        request.open("GET","data.xml",false);
        var XMLdocument;
        request.onreadystatechange=function()
        {
            if (request.readyState==4)
            {
                XMLdocument = request.responseXML;
            }
        };
        request.send();
        var questions = XMLdocument.getElementsByTagName("question");
        for(i = 0; i < questions.length; i++)
        {
            var x = questions[i];
            var questionvalue = x.getElementsByTagName("questionvalue");
            document.write("<p style='margin-top:50px; font-size:20px; font-weight:bold; text-align:center'>" + questionvalue[0].childNodes[0].nodeValue + "</p>");
            var answers = XMLdocument.getElementsByTagName("answer");
            document.write("<form>");
            for(n = 0; n < answers.length; n++)
            {
                y = answers[n];
                var answervalue = y.getElementsByTagName("answervalue");
                document.write("<input style='margin-left:43%; margin-right:20px;' type='radio' name='" + questionvalue[0].childNodes[0].nodeValue + "' value='" + answervalue[0].childNodes[0].nodeValue + "'>" + answervalue[0].childNodes[0].nodeValue + "<br/>");
            }
            document.write("</form><button style='margin-top:100px; width:150px; position:absolute; left:50%; margin-left:-75px' type='button' onclick='Proceed(\"test\")'>Se resultat</button>");
        }
    </script>
</body>
    </html>

Creating these elements "by hand" instead of using document.write() would alleviate that problem. The current consensus is to avoid document.write() in the first place. — Frédéric Hamidi
– Frédéric Hamidi, Commented Aug 7, 2013 at 12:28
possible duplicate of How to write quotation marks in JavaScript — guido
– guido, Commented Aug 7, 2013 at 12:29

Simon Belanger · Accepted Answer · 2013-08-07 12:43:23Z

2

It doesn't work because it's invalid HTML:

document.write("</form><button ... onclick='Proceed('test')'>...</button>");

Will be written as:

</form><button ... onclick='Proceed('test')'>...</button>

When it's written to the DOM, the quoting style of onclick dictates where it ends, essentially making the value of onclick Proceed(. You need to change your quoting characters:

document.write("</form><button ... onclick=\"Proceed('test')\">...</button>");

or:

document.write("</form><button ... onclick='Proceed(\"test\")'>...</button>");

Edit: See this plunkr for a simple example

edited Aug 7, 2013 at 12:43

answered Aug 7, 2013 at 12:30

Simon Belanger

14.9k3 gold badges43 silver badges35 bronze badges

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

1 Comment

Robin Over a year ago

Changing the ' to \" and removing the keyword var in the Proceed function made it work. Thanks! :)

DevlshOne · Accepted Answer · 2013-08-07 12:29:50Z

1

Changing them to escaped double quotes should work for you.

document.write("</form><button style='margin-top:100px; width:150px; position:absolute; left:50%; margin-left:-75px' type='button' onclick='Proceed(\"test\")'>Se resultat</button>");

answered Aug 7, 2013 at 12:29

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Comments

css · Accepted Answer · 2013-08-07 12:30:26Z

1

You could change the single quotes to escaped double quotes:

onclick='Proceed(\"test\")'

answered Aug 7, 2013 at 12:30

css

9541 gold badge9 silver badges27 bronze badges

Collectives™ on Stack Overflow

How do I use quotation marks correctly in JavaScript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related