Display an alert with message according to the radio button chose
Question
I'm creating a role playing game questionnaire for a Pathfinder campaign. I thought to create a it of sorts to give various bonuses to the characters playing based on how they answer the questions listed. I plan to adjust the content below, I just need to know how to write the code displaying input radio button values selected for each question.
Here is the code:
<!DOCTYPE html>
<html>
<script>
function myFunction()
{
var queone = document.getElementById("qone").value;
var quetwo = document.getElementById("qtwo").value;
var quethr = document.getElementById("qthr").value;
if (queone == 1) {
alert("You are now +2 Acrobatics");
}
else if (queone == 2) {
alert("You are now +2 to Bluff");
}
else if (queone == 3) {
alert("You are now +2 Diplomacy");
}
if (quetwo == 1) {
alert("You are now +2 Acrobatics");
}
else if (quetwo == 2) {
alert("You are now +2 to Bluff");
}
else if (quetwo == 3) {
alert("You are now +2 Diplomacy");
}
if (quethr == 1) {
alert("You are now +2 Acrobatics");
}
else if (quethr == 2) {
alert("You are now +2 to Bluff");
}
else if (quethr == 3) {
alert("You are now +2 Diplomacy");
}
}
</script>
<div>
<h2 align="center">Fantasy Survey</h2>
<p>Do you love fantasy games?</p></br></br>
<input id="qone" name="radio1" value="1" checked="" type="radio">Yes</br></br>
<input id="qone" name="radio1" value="2" type="radio">Meh</br></br>
<input id="qone" name="radio1" value="3" type="radio">No</br></br>
<p>Have you ever considered playing pen and paper games?</p></br></br>
<input id="qtwo" name="radio2" value="1" checked="" type="radio"> Yes</br></br>
<input id="qtwo" name="radio2" value="2" type="radio"> Meh</br></br>
<input id="qtwo" name="radio2" value="3" type="radio"> No</br></br>
<p>Do you like Pathfinder?</p></br></br>
<input id="qthr" name="radio3" value="1" checked="" type="radio"> Yes</br></br>
<input id="qthr" name="radio3" value="2" type="radio"> Meh</br></br>
<input id="qthr" name="radio3" value="3" type="radio"> No</br></br>
<input type="button" onclick="myFunction()" value="Submit" />
</div>
</html>
I'm looking to display an alert with a bonus for the characters depending on what selection they make via the radio button values. I feel like I'm close, but I don't know how to only alert values related to the specific radio button(s) selected. If you have a better way, I'm happy to hear it, but I would like to have it done similarly to what I've posted above.
Thanks for your time!!
3 answers
solution1
1 2013-10-01 05:54:08
First of all ids have to be unique.So that needs to be corrected.Change those and try jquery selectors.If you are new to this script language i would recommend you to try this
Here is the working code
var queone = $( "input[type='radio'][name='radio1']" ).val();
var quetwo = $( "input[type='radio'][name='radio2']" ).val();
var quethree = $( "input[type='radio'][name='radio3']" ).val();
if (queone == 1) {
alert("You are now +2 Acrobatics");
}
else if (queone == 2) {
alert("You are now +2 to Bluff");
}
else if (queone == 3) {
alert("You are now +2 Diplomacy");
}
if (quetwo == 1) {
alert("You are now +2 Acrobatics");
}
else if (quetwo == 2) {
alert("You are now +2 to Bluff");
}
else if (quetwo == 3) {
alert("You are now +2 Diplomacy");
}
if (quethree == 1) {
alert("You are now +2 Acrobatics");
}
else if (quethree == 2) {
alert("You are now +2 to Bluff");
}
else if (quethree == 3) {
alert("You are now +2 Diplomacy");
}
solution2
0 2013-10-01 05:56:42
First of all, you are giving different elements the same id value. The id attribute should be unique for all elements. In your case, getElementById will always return the first item it comes across, not necessarily the selected one.
What you can do is use the querySelector function, which should work from IE8 upward, and in all other browsers.
document.querySelector("input[name=radio1]:checked") should return you the correct items.
You can always take a look at jQuery as a helpful library, but it's not needed for this.
solution3
0 2013-10-01 06:40:26
You can use this code
<!DOCTYPE html>
<html>
<script>
function myFunction()
{
for(k=1; k<=3; k++)
checkVal(document.getElementsByName("radio"+k))
}
function checkVal(selector){
for (var i = 0; i < selector.length; i++) {
if (selector[i].checked) {
switch (selector[i].value){
case '1' :
alert("You are now +2 Acrobatics")
break;
case '2' :
alert("You are now +2 to Bluff")
break;
case '3' :
alert("You are now +2 Diplomacy")
break;
}
break;
}
}
}
</script>
<div>
<h2 align="center">Fantasy Survey</h2>
<p>Do you love fantasy games?</p></br></br>
<input name="radio1" value="1" checked="" type="radio">Yes</br></br>
<input name="radio1" value="2" type="radio">Meh</br></br>
<input name="radio1" value="3" type="radio">No</br></br>
<p>Have you ever considered playing pen and paper games?</p></br></br>
<input name="radio2" value="1" checked="" type="radio">Yes</br></br>
<input name="radio2" value="2" type="radio">Meh</br></br>
<input name="radio2" value="3" type="radio">No</br></br>
<p>Do you like Pathfinder?</p></br></br>
<input name="radio3" value="1" checked="" type="radio">Yes</br></br>
<input name="radio3" value="2" type="radio">Meh</br></br>
<input name="radio3" value="3" type="radio">No</br></br>
<input type="button" onclick="myFunction()" value="Submit" />
</div>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.