/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Need multiple outputs in form based on user output

Copy linkTweet thisAlerts:
Nov 18.2015

There is probably a very obvious answer to this question but I’m new to Javascript so please try and be patient, ha.

I’m messing around with designing a very simple form where the user fills out some multiple-choice questions and when they submit the form, the writing on the next page should based on what they entered,

e.g. user states that they are *male* and *angry*, page that comes up is: “I suggest you get a beer”,
or if user states *male* and *tired*, page that should come up is “I suggest you go for some exercise”,
or if user states *female* and *depressed*, page that comes up is: “I suggest you pig out on Ben & Jerry’s” 🙂

You get the idea.

How do I actually do this? Like what is the command called? I know the input has to be validated but I dont know how to make the output reflect what

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Nov 18.2015 — [code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advice</title>
<style>
label, button {
display: block;
margin-bottom: 1em;
}
</style>
</head>
<body>
<label>I am:<br>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</label>

<label>I feel:<br>
<select id="mood">
<option value="angry">angry</option>
<option value="tired">tired</option>
<option value="depressed">depressed</option>
</select>
</label>

<button>Advise me</button>

<div id="advice"></div>

<script>
document.querySelector("button").addEventListener("click", function() {
var g = document.querySelector("#gender").value,
m = document.querySelector("#mood").value,
s = 'I suggest you ',
a = document.querySelector("#advice");
switch(g){
case 'male':
switch(m){
case 'angry':
a.innerHTML = s + 'get a beer.';
break;
case 'tired':
a.innerHTML = s + 'go for some exercise.';
break;
case 'depressed':
a.innerHTML = s + '[your advice].';
break;
}
break;
case 'female':
switch(m){
case 'angry':
a.innerHTML = s + '[your advice].';
break;
case 'tired':
a.innerHTML = s + '[your advice].';
break;
case 'depressed':
a.innerHTML = s + 'pig out on Ben &amp; Jerry's.';
break;
}
break;
}
});
</script>
</body>
</html>[/code]
If you get an A I get credit. If you fail because you copy/paste this code, I was never here
Copy linkTweet thisAlerts:
@bobmasterauthorNov 19.2015 — It's only an exercise for an evening course I'm doing so it should be fine! Thanks very much!
Copy linkTweet thisAlerts:
@Kevin2Nov 19.2015 — You're very welcome. Good luck!
×

Success!

Help @bobmaster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...