Reputation: 614
I'm trying to make a survey, and with each click, assign a variable a certain phrase. Then display it in the div
when I click span#display
.
I get the "Uncaught ReferenceError: Invalid left-hand side in assignment" when I run this code:
var a = "none chosen";
function companyPicka()
{
a= "I love Valve";
}
function companyPickb()
{
a= "I love Bethesda";
}
function companyPickc()
{
a= "I love EA";
}
function companyPickd()
{
a= "I love Ubisoft";
}
function companyPicke()
{
a= "I play terrible NES, SNES games";
}
function companyPickf()
{
a= "I like something that's so underground I wouldn't expect you to know it";
}
function display()
{
document.getElementById("display") = "a+''+b+''+c+''+d+''+e+''+f+''+g+''+h";
}
<div>
<span onclick="companyPicka(); this.style.border='inset';">
Valve <3</span>
<span onclick="companyPickb(); this.style.border='inset';">
Bethesda :\ </span>
<span onclick="companyPickc(); this.style.border='inset';">
EA </span>
<span onclick="companyPickd(); this.style.border='inset';">
Ubisoft </span>
<span onclick="companyPicke(); this.style.border='inset';">
LJN</span>
<span onclick="companyPickf(); this.style.border='inset';">
Other</span>
</div>
<span onclick="display();"> See Results </span>
<div id="display">
</div>
Upvotes: 1
Views: 10739
Reputation: 150050
The following line is wrong:
document.getElementById("display") = "a+''+b+''+c+''+d+''+e+''+f+''+g+''+h";
You can't assign a string directly to an HTML element. One way to set the element's content is with .innerHTML
:
document.getElementById("display").innerHTML = "something";
Note also that the right-hand side of your expression is a string containing the actual text a+''+b+''+c+''+d+''+e+''+f+''+g+''+h
- that is, the character "a" then the character "+", then two apostrophes, etc. It is not an expression concatenating the variables a, b, c, etc. (not that your code as shown has variables for b, c, d, etc). If you remove the surrounding double-quotes it would be an expression concatenating the variables.
Having a different function for every option is a very messy way to code this type of thing. You may like to try something like the following (could be further tidied, but I don't want to overload you with too much information all at once):
var phrases = {
a : "I love Valve",
b : "I love Bethesda",
c : "I love EA",
d : "I love Ubisoft",
e : "I play terrible NES, SNES games",
f : "I like something that's so underground I wouldn't expect you to know it"
},
currentPhrase = "none selected";
function companyPick(which) {
currentPhrase = phrases[which] || "none selected";
}
function display() {
document.getElementById("display").innerHTML = currentPhrase;
}
<div>
<span onclick="companyPick('a'); this.style.border='inset';">
Valve <3</span>
<span onclick="companyPick('b'); this.style.border='inset';">
Bethesda :\ </span>
<span onclick="companyPick('c'); this.style.border='inset';">
EA </span>
<span onclick="companyPick('d'); this.style.border='inset';">
Ubisoft </span>
<span onclick="companyPick('e'); this.style.border='inset';">
LJN</span>
<span onclick="companyPick('f'); this.style.border='inset';">
Other</span>
</div>
<span onclick="display();"> See Results </span>
<div id="display"></div>
Upvotes: 4
Reputation: 9202
This line is incorrect:
document.getElementById("display") = "a+''+b+''+c+''+d+''+e+''+f+''+g+''+h";
use this:
document.getElementById("display").innerHTML = a+''+b+''+c+''+d+''+e+''+f+''+g+''+h;
Edit:
Actually this makes no scene: a+''+b+''+c+''+d+''+e+''+f+''+g+''+h
It is the same like this: a+b+c+d+e+f+g+h
Upvotes: 3