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=".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>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./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);
}
Share Improve this question asked Jun 6, 2016 at 23:12 YonaTheYakYonaTheYak 411 silver badge5 bronze badges 1
- 2 I remend taking a look at the help guide on MCVE (stackoverflow./help/mcve). Your code contains a lot of details that distract from the problem itself (like CSS, lots of quiz questions, ...). If you shorten your example it will make it easier for people to help you. – J Delaney Commented Jun 6, 2016 at 23:15
1 Answer
Reset to default 4In 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.