CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
YonaTheYak
YonaTheYak

Reputation: 41

InvalidArgumentError: Failed due to illegal value in property: 0

I am trying to program a geography quiz and it doesn't seem to work. Whenever I try to click the 'Submit' button, it prints out InvalidArgumentError: Failed due to illegal value in property: 0. do you have any ideas why this might be? Thanks in advance.

HTML:

<!DOCTYPE html>
    <html>
        <head>
            <base target="_top">
            <script>
                function send() {
                    var q1 = document.getElementById("q1").value;
                    var q2 = document.getElementById("q2").value;
                    var q3 = document.getElementById("q3").value;
                    var q4 = document.getElementById("q4").value;
                    var q5 = document.getElementById("q5").value;
                    var q6 = document.getElementById("q6").value;
                    var q7 = document.getElementById("q7").value;
                    var q8 = document.getElementById("q8").value;
                    var Email = document.getElementById("EmailAddress");
                    var Result = ("Results: 1. " + q1 + " 2. " + q2 + " 3. " + q3 + " 4. " + q4 + " 5. " + q5 + " 6. " + q6 + " 7. " + q7 + " 8. " + q8);
                    google.script.run.send(Email, Result);
                }
            </script>
            <script src="https://ws.sharethis.com/button/buttons.js">
            </script>
            <script>
                stLight.options({
                	publisher: "a788dcd1-6dfb-49ee-ba6c-3b6822d69fd8",
                	doNotHash: false,
                	doNotCopy: false,
                	hashAddressBar: false
                });
            </script>
            <style>
                .myButton {
                    -moz-box-shadow: inset 0px 39px 0px -24px #e67a73;
                    -webkit-box-shadow: inset 0px 39px 0px -24px #e67a73;
                    box-shadow: inset 0px 39px 0px -24px #e67a73;
                    background-color: #e4685d;
                    -moz-border-radius: 4px;
                    -webkit-border-radius: 4px;
                    border-radius: 4px;
                    border: 1px solid #ffffff;
                    display: inline-block;
                    cursor: pointer;
                    color: #ffffff;
                    font-family: Arial;
                    font-size: 15px;
                    padding: 6px 15px;
                    text-decoration: none;
                    text-shadow: 0px 1px 0px #b23e35;
                }
                .myButton:hover {
                    background-color: #eb675e;
                }
                .myButton:active {
                    position: relative;
                    top: 1px;
                }
                .myButton2 {
                    -moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
                    -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
                    box-shadow: inset 0px -3px 7px 0px #29bbff;
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
                    background: -moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
                    background: -webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
                    background: -o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
                    background: -ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
                    background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
                    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa', GradientType=0);
                    background-color: #2dabf9;
                    -moz-border-radius: 3px;
                    -webkit-border-radius: 3px;
                    border-radius: 3px;
                    border: 1px solid #9591ff;
                    display: inline-block;
                    cursor: pointer;
                    color: #ffffff;
                    font-family: Arial;
                    font-size: 15px;
                    padding: 6px 23px;
                    text-decoration: none;
                    text-shadow: 0px 1px 0px #263666;
                }
                .myButton2:hover {
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
                    background: -moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
                    background: -webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
                    background: -o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
                    background: -ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
                    background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
                    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9', GradientType=0);
                    background-color: #0688fa;
                }
                .myButton2:active {
                    position: relative;
                    top: 1px;
                }
            </style>
        </head>
        <body>
            <font face="Verdana">
                <h1>
                    Geography Quiz
                </h1>
                <br/>
                <br/>
                Your teacher's email address:
                <input type="text" id="EmailAddress"/>
                <br/>
                <br/>
                <b>
                    Questions
                </b>
                <br/>
                <br/>
                Q (1): Which state has a climate suitable for growing citrus fruits—California or Maine?
                <br/>
                A:
                <input type="text" id="q1"/>
                <br/>
                <br/>
                Q (2): The North Atlantic current brings warm waters from the tropics to the west coast of which continent?
                <br/>
                A:
                <input type="text" id="q2"/>
                <br/>
                <br/>
                Q (3): Which Canadian province produces more than half of the country's manufactured goods?
                <br/>
                A:
                <input type="text" id="q3"/>
                <br/>
                <br/>
                Q (4): To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?
                <br/>
                A:
                <input type="text" id="q4"/>
                <br/>
                <br/>
                Q (5): What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?
                <br/>
                A:
                <input type="text" id="q5"/>
                <br/>
                <br/>
                Q (6): Which country has the world's largest Muslim population—Indonesia or Mexico?
                <br/>
                A:
                <input type="text" id="q6"/>
                <br/>
                <br/>
                Q (7): The Rio Hondo forms a boundary between Mexico and which other country?
                <br/>
                A:
                <input type="text" id="q7"/>
                <br/>
                <br/>
                Q (8): Which lake is on the border between Chad and Cameroon?
                <br/>
                A:
                <input type="text" id="q8"/>
                <br/>
                <br/>
                <button onclick="send(); document.write('Thanks! Your teacher will receive your results in an email.')" class="myButton">
                    Submit
                </button>
                <br/>
                <br/>
                <br/>
                <br/>
                <span class='st_facebook_hcount'>
                </span>
                <span class='st_twitter_hcount'>
                </span>
                <span class='st_googleplus_hcount'>
                </span>
                <br/>
                <br/>
                <footer>
                    <font size="1px">
                        Posted by: Yona Klatchko | Contact information:
                        <a href="mailto:[email protected]">
                            [email protected]
                        </a>
                    </font>
                </footer>
            </font>
        </body>
    </html>

Google-Apps-Script doGet() function:

function doGet() {
    return(HtmlService.createTemplateFromFile('Index.html').evaluate().setTitle('Geography Quiz').setSandboxMode(HtmlService.SandboxMode.IFRAME)); 
}

Google-Apps-Script send() function:

function send(Email, Result) {
    MailApp.sendEmail(Email, Result);
}

Upvotes: 1

Views: 8173

Answers (1)

m5khan
m5khan

Reputation: 2717

In your send() function, you are extracting and sending email dom element instead of the string value:

var Email = document.getElementById("EmailAddress"); returns the dom element.

Change this to:

var Email = document.getElementById("EmailAddress").value;

will solve the problem of invalidArgumentError.

The next problem will be you will not receive the email. That is because in your code: 

function send(Email, Result) {
    MailApp.sendEmail(Email, Result);
}

You are passing two parameters but as you see in the documentation, third parameter is not optional and you need to pass the third parameter as body.

MailApp.sendEmail(Email, Result, "");

Will send the email with empty body.

Upvotes: 4

Related Questions