使用Javascript和HTML进行调查
[英]Survey Using Javascript and HTML
问题描述
so currently I am trying to display different images for each radio button checked. 
所以目前我正尝试为每个选中的单选按钮显示不同的图像。 each question has two answers each and the users are to choose between either and in the end, there is a submit button (like any other form). 每个问题都有两个答案，用户可以在两个问题之间进行选择，最后，还有一个提交按钮（与其他任何形式一样）。 I want to be able to display images for each certain checked radio button. 我希望能够显示每个选中的单选按钮的图像。 so for example, if each of the question they picked the first answer and press submit, it would display picture 1, if they were to pick the first answer for all besides the last question, it would display a different picture, and so on (so for each combination of results = different picture). 因此，例如，如果每个问题他们选择了第一个答案并按Submit，它将显示图片1，如果他们选择最后一个问题以外的所有内容的第一个答案，则将显示不同的图片，依此类推（因此对于每种结果组合=不同的图片）。 thanks 谢谢
function myFunction() { var tops = document.getElementsByName('tops'); var str =' '; for (i = 0; i < 20; i++) { if (tops[i].checked === true) { str += tops[i].value + " "; } } alert(str); }
<!DOCTYPE html> <html> <head> <title> Quiz Yourself! </title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body class="deer"> <h1 style="font-size: 120px; text-align: center; border: 3px solid black; background-color: white;"> Quiz Yourself! </h1> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2000px-Solid_white.svg.png" class="pop"> <h3> 1. Shows or Movies? </h3> <form class="ok"> <input type="radio" name="tops" value="Shows" checked> Shows <br> <input type="radio" name="tops" value="Movies"> Movies <br> </form> <h3> 2. Apple or Windows? </h3> <form class="ok"> <input type="radio" name="tops" value="Apple" checked> Apple <br> <input type="radio" name="tops" value="Windows"> Windows <br> </form> <h3> 3. Pink or Blue? </h3> <form class="ok"> <input type="radio" name="tops" value="Pink" checked> Pink <br> <input type="radio" name="tops" value="Blue"> Blue <br> </form> <h3> 4. Basketball or Football? </h3> <form class="ok"> <input type="radio" name="tops" value="Basketball" checked> Basketball <br> <input type="radio" name="tops" value="Football"> Football <br> </form> <h3> 5. Phone Call or Texting Type of Person? </h3> <form class="ok"> <input type="radio" name="tops" value="Phone Call" checked> Phone Call <br> <input type="radio" name="tops" value="Texting"> Texting <br> </form> <h3> 6. Cake or Pie? </h3> <form class="ok"> <input type="radio" name="tops" value="Cake" checked> Cake <br> <input type="radio" name="tops" value="Pie"> Pie <br> </form> <h3> 7. Big Party or Small Gathering? </h3> <form class="ok"> <input type="radio" name="tops" value="Big Party" checked> Big Party <br> <input type="radio" name="tops" value="Small Gathering"> Small Gathering <br> </form> <h3> 8. Sneakers or Sandals? </h3> <form class="ok"> <input type="radio" name="tops" value="Sneakers" checked> Sneakers <br> <input type="radio" name="tops" value="Sandals"> Sandals <br> </form> <h3> 9. Gold or Silver? </h3> <form class="ok"> <input type="radio" name="tops" value="Gold" checked> Gold <br> <input type="radio" name="tops" value="Silver"> Silver <br> </form> <h3> 10. Pen or Pencil? </h3> <form class="ok"> <input type="radio" name="tops" value="Pen" checked> Pen <br> <input type="radio" name="tops" value="Pencil"> Pencil <br> </form> <br> <br> <br> <br> <br> <br> <button onclick="myFunction();return false;" class="yes"> Submit </button> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-12-03 05:08:25
I assumed that all of the question can only have 2 choices. 我假设所有问题只能有2个选择。 I also assumed that you want to display the image in a <img src='...' /> dom element. 我还假定您要在<img src='...' /> dom元素中显示图像。
In that case, I have modified your code to work as follows: 在这种情况下，我修改了您的代码以使其工作如下：
a- begin with str empty string a-以str空字符串开头
b- check the first question, the first option. b-检查第一个问题，第一个选项。 If it is checked, append a to str . 如果选中，则将a附加到str 。 If it is unchecked then append b . 如果未选中，则附加b 。 There is no need to check the second option. 无需检查第二个选项。 So, lets skip it 所以，让我们跳过它
c- loop until all question have been iterated ( tops.length ) not just '20'. c-循环直到所有问题都被迭代（ tops.length ）而不只是'20'。 You might decided to add more or remove questions. 您可能决定添加更多或删除问题。 So it is better to rely on tops.length . 因此最好依靠tops.length 。
d- Append a proper image file extension to the string obtained above. d-将适当的图像文件扩展名附加到上面获得的字符串。 ie: .png/.jpg/etc . 即： .png/.jpg/etc
e- set the property src of the result image as described above. 如上所述，重新设置结果图像的属性src 。
var results = { "aaaaaaaaaa":"https://i.ytimg.com/vi/EDzLx3hkli0/maxresdefault.jpg", "aaaaaaaaab":"https://cdn.pixabay.com/photo/2017/07/28/23/34/fantasy-picture-2550222_960_720.jpg", "bbbbbbbbbb":"http://your.image.link/here.png" } // you need to fill the other values. function myFunction() { var tops = document.getElementsByName('tops'); var str =''; // assuming each question only has 2 choices, we can // safely iterate through all question by evaluating // the first option of each question and skipping the // second option, since, if the first option is checked // then the other option is not, and vice versa for (i = 0; i < tops.length; i+=2) { str += (tops[i].checked)? 'a':'b'; // I choose 'a' for checked, and 'b' for unchecked } // after the loop, if all questions were answered by the first option, you will get // 'aaaaaaaaaa' and if all of them selected the second option, you will get 'bbbbbbbbbb' var link = results[str]; // lookup for the image path var img = document.getElementById("result"); img.alt = link; img.src = link; alert(str + "=" + link); }
<!DOCTYPE html> <html> <head> <title> Quiz Yourself! </title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body class="deer"> <h3> 1. Shows or Movies? </h3> <form class="ok"> <input type="radio" name="tops" value="Shows" checked> Shows <br> <input type="radio" name="tops" value="Movies"> Movies <br> </form> <h3> 2. Apple or Windows? </h3> <form class="ok"> <input type="radio" name="tops" value="Apple" checked> Apple <br> <input type="radio" name="tops" value="Windows"> Windows <br> </form> <h3> 3. Pink or Blue? </h3> <form class="ok"> <input type="radio" name="tops" value="Pink" checked> Pink <br> <input type="radio" name="tops" value="Blue"> Blue <br> </form> <h3> 4. Basketball or Football? </h3> <form class="ok"> <input type="radio" name="tops" value="Basketball" checked> Basketball <br> <input type="radio" name="tops" value="Football"> Football <br> </form> <h3> 5. Phone Call or Texting Type of Person? </h3> <form class="ok"> <input type="radio" name="tops" value="Phone Call" checked> Phone Call <br> <input type="radio" name="tops" value="Texting"> Texting <br> </form> <h3> 6. Cake or Pie? </h3> <form class="ok"> <input type="radio" name="tops" value="Cake" checked> Cake <br> <input type="radio" name="tops" value="Pie"> Pie <br> </form> <h3> 7. Big Party or Small Gathering? </h3> <form class="ok"> <input type="radio" name="tops" value="Big Party" checked> Big Party <br> <input type="radio" name="tops" value="Small Gathering"> Small Gathering <br> </form> <h3> 8. Sneakers or Sandals? </h3> <form class="ok"> <input type="radio" name="tops" value="Sneakers" checked> Sneakers <br> <input type="radio" name="tops" value="Sandals"> Sandals <br> </form> <h3> 9. Gold or Silver? </h3> <form class="ok"> <input type="radio" name="tops" value="Gold" checked> Gold <br> <input type="radio" name="tops" value="Silver"> Silver <br> </form> <h3> 10. Pen or Pencil? </h3> <form class="ok"> <input type="radio" name="tops" value="Pen" checked> Pen <br> <input type="radio" name="tops" value="Pencil"> Pencil <br> </form> <br> <br> <img id="result" alt="Result Image here" text="Result Image Here" /> <br> <br> <br> <br> <button onclick="myFunction();return false;" class="yes"> Submit </button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.