How do I use quotation marks correctly in JavaScript?

StackOverflow https://stackoverflow.com/questions/18103351

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>
Was it helpful?

Solution

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

OTHER TIPS

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>");

You could change the single quotes to escaped double quotes:

onclick='Proceed(\"test\")'
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top