javascript - 为什么这个测验不能正常进行？

标签 javascript

我对编码非常陌生，现在非常沮丧，我不知道为了让它发挥作用我缺少什么。请帮忙!现在，当我单击按钮提交时，它只会带我回到页面顶部并重置答案。它不会向我显示结果。

<html>
<head>
<title>Destiny enemy race quiz</title>
</head>
<style>
body {
    background-color: #e6ffff;
}

h1 {
    font-family: "Arial Black", Gadget, sans-serif;
    color: #000033;
    text-align: center;
}

p {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 20px;
    color: #000033;
    text-align: left;
}

</style>
<body>
<h1>Which Destiny enemy race are you?</h1>
<form>
<p>If you were dresing up for Halloween, what would you dress up as?</p>
<input type="radio" name="q1" value="fallen" checked="checked"> Captain Jack Sparrow
<br><input type="radio" name="q1" value="hive"> A zombie from The Walking Dead
<br><input type="radio" name="q1" value="vex"> The Terminator
<br><input type="radio" name="q1" value="cabal"> A military soldier
<br><br>

总共 10 个问题。

<input type="submit" value="Get results!" onclick="checkQuiz()">&nbsp;<input type="reset" value="Reset">
</form>
<p id="raceParagraph"></p>
</body>
<script>
function checkQuiz() {
var question = 1;
var fallen = 0;
var hive = 0;
var vex = 0;
var cabal = 0;
var answer = 1;
var youranswer = 0;
var result = '';
var choice;

for (question = 1; question <= 10; question++) {
    var selectedq = document.forms['quiz'].elements['q'+question];
        for (var i = 0; i < selectedq.length; i++) {
           if (selectedq[i].checked) {
              choice = selectedq[i].value;
           }
        }
    if (choice == 'fallen') {
        fallen++;
    }
    if (choice == 'hive') {
        hive++;
    }
    if (choice == 'vex') {
        vex++;
    }
    if (choice == 'cabal') {
        cabal++;
    }
}
if (fallen >= hive && fallen >= vex && fallen >= cabal && fallen > 0) {
     //fallen is the highest
     result = 'fallen';
  }
  else if (hive > fallen && hive >= vex && hive >= cabal && hive > 0) {
    //hive is the highest
     result = 'hive';
  }
  else if (vex > fallen && vex > hive && vex >= cabal && vex > 0) {
     //vex is the highest
     result = 'vex';
  }
   else if (cabal > fallen && cabal > hive && cabal > vex && cabal > 0) {
     //cabal is the highest
     result = 'cabal';
  }
  else {
     result = 'oops';
  }
  displayRace(result);
}

function displayRace(race) {

var image = document.createElement('img');

image.className = 'q1';

var source = document.getElementById('raceParagraph');

var text = 'Congratulations! You\'re a ' + race + '!';

switch(race) {
    case 'fallen':
        image.src =     'http://vignette4.wikia.nocookie.net/destinypedia/images/a/a9/Captain.png/revision/latest?cb=20130510122813';
        break;
    case 'hive':
        image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/8/8c/Hive_Thrall.png/revision/latest?cb=20140609013118';
        break;
    case 'vex':
        image.src = 'http://vignette3.wikia.nocookie.net/destinypedia/images/b/bc/Vex.png/revision/latest?cb=20140609005540';
        break;
    case 'cabal':
        image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/4/48/Cabal_Render.png/revision/latest?cb=20140609170438';
        break;
    default:
        image.src = '';
}

source.appendChild(image);

source.innerHTML += '<br>' + text;

window.onload = init;

}

</script>
</html>

最佳答案

Right now when I click the button to submit it just takes me back to the top of the page and resets the answers.

这是因为您有一个 type="submit" 按钮，并且您没有取消默认的表单提交行为 - 在您的情况下，表单没有 action，基本上是重新加载页面。将按钮更改为 type="button"。

除此之外，主要问题是您的 JS 正在尝试访问名为“quiz”的表单，但在您的 html 中您没有为该表单指定名称。这会导致浏览器控制台中出现异常。

修复了这些问题后，您的代码将可以正常工作，就像您扩展并运行此代码片段所看到的那样:

function checkQuiz() {
var question = 1;
var fallen = 0;
var hive = 0;
var vex = 0;
var cabal = 0;
var answer = 1;
var youranswer = 0;
var result = '';
var choice;

for (question = 1; question <= 2; question++) {
    var selectedq = document.forms['quiz'].elements['q'+question];
        for (var i = 0; i < selectedq.length; i++) {
           if (selectedq[i].checked) {
              choice = selectedq[i].value;
           }
        }
    if (choice == 'fallen') {
        fallen++;
    }
    if (choice == 'hive') {
        hive++;
    }
    if (choice == 'vex') {
        vex++;
    }
    if (choice == 'cabal') {
        cabal++;
    }
}
if (fallen >= hive && fallen >= vex && fallen >= cabal && fallen > 0) {
     //fallen is the highest
     result = 'fallen';
  }
  else if (hive > fallen && hive >= vex && hive >= cabal && hive > 0) {
    //hive is the highest
     result = 'hive';
  }
  else if (vex > fallen && vex > hive && vex >= cabal && vex > 0) {
     //vex is the highest
     result = 'vex';
  }
   else if (cabal > fallen && cabal > hive && cabal > vex && cabal > 0) {
     //cabal is the highest
     result = 'cabal';
  }
  else {
     result = 'oops';
  }
  displayRace(result);
}

function displayRace(race) {

var image = document.createElement('img');

image.className = 'q1';

var source = document.getElementById('raceParagraph');

var text = 'Congratulations! You\'re a ' + race + '!';

switch(race) {
    case 'fallen':
        image.src =     'http://vignette4.wikia.nocookie.net/destinypedia/images/a/a9/Captain.png/revision/latest?cb=20130510122813';
        break;
    case 'hive':
        image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/8/8c/Hive_Thrall.png/revision/latest?cb=20140609013118';
        break;
    case 'vex':
        image.src = 'http://vignette3.wikia.nocookie.net/destinypedia/images/b/bc/Vex.png/revision/latest?cb=20140609005540';
        break;
    case 'cabal':
        image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/4/48/Cabal_Render.png/revision/latest?cb=20140609170438';
        break;
    default:
        image.src = '';
}

source.appendChild(image);

source.innerHTML += '<br>' + text;
}
<h1>Which Destiny enemy race are you?</h1>
<form name="quiz">
<p>If you were dresing up for Halloween, what would you dress up as?</p>
<input type="radio" name="q1" value="fallen" checked="checked"> Captain Jack Sparrow
<br><input type="radio" name="q1" value="hive"> A zombie from The Walking Dead
<br><input type="radio" name="q1" value="vex"> The Terminator
<br><input type="radio" name="q1" value="cabal"> A military soldier
<br><br>
<p>Some other question?</p>
<input type="radio" name="q2" value="fallen" checked="checked"> Answer 1
<br><input type="radio" name="q2" value="hive"> Answer 2
<br><input type="radio" name="q2" value="vex"> Answer 3
<br><input type="radio" name="q2" value="cabal"> Answer 4
<br><br>
  <input type="button" value="Get results!" onclick="checkQuiz()">&nbsp;<input type="reset" value="Reset">
</form>
<p id="raceParagraph"></p>

您还应该从第二个函数的末尾删除 window.onload = init; 。即使您没有名为 init 的函数，在页面加载后设置 window.onload 处理程序也是没有意义的。

关于javascript - 为什么这个测验不能正常进行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39844221/

上一篇：javascript - JQuery 中的replaceWith()

下一篇：javascript - 在动态创建的单选按钮选择上显示 Div (PHP-AJAX)

相关文章：

javascript - AngularJs:参数不是未定义的函数

javascript - 使用在 ES6 React Component 类之外声明的方法

javascript - 向下滚动时使 div 移出屏幕(顶部)

javascript - 在正则表达式中捕获重复的组

javascript - knockout 组件绑定(bind)属性错误

javascript - 在knex SELECT之后访问数组值

javascript - 当字符从搜索栏中删除时，为什么我的 react 自动建议不起作用

javascript - 使用 Paypal Cordova 插件，无法使用生产或沙盒模式使其工作

javascript - 使用 JavaScript 获取通过 HTML 文件选择器按钮选择的文件的绝对路径

javascript - 使用 Jquery 在垂直导航上执行下拉功能

©2024 IT工具网  联系我们