Fatal编程技术网
  • javascript/
  • Javascript 提交按钮不更改问题

Javascript 提交按钮不更改问题

javascript html css

Javascript 提交按钮不更改问题,javascript,html,css,Javascript,Html,Css,我正在为我的老师（他很有趣）制作一个可爱的网页作为圣诞礼物，但每当我在输入框中输入文本并提交超过第一个问题的任何问题时，代码都会将其标记为不正确。当我更改问题提交时，我认为我已经解决了这个问题，每次问题更改，但显然不是。有人能告诉我我做错了什么吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width

我正在为我的老师（他很有趣）制作一个可爱的网页作为圣诞礼物，但每当我在输入框中输入文本并提交超过第一个问题的任何问题时，代码都会将其标记为不正确。当我更改问题提交时，我认为我已经解决了这个问题，每次问题更改，但显然不是。有人能告诉我我做错了什么吗

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Funn Chunn | Quiz</title>
    <link rel="icon" href="images/alabama logo.png"/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>
  <body onload="firstQ();">
    <div class='container'>
      <div class='row'>
        <h1 id='mainHeader'>Funn Chunn | Quiz</h1>
      </div>

      <div class='row'>
        <h3 id='questionBox'></h3>
      </div>

      <div class='row'>
        <form id="inputBoxOuter">
          <input id='inputBox' type='text'></br>
          <button class='btn btn-lg btn-info' id='submitBtn' onclick='firstQAnswer();'>Enter</button>
        </form>
      </div>

      <div class='row'>
        <form id="playAgainOuter">

        </form>
      </div>

      <div class="row">
        <p id="subText"></p>
      </div>

      <div class="row">
        <div id="logoImgOuter"><img class="mx-auto" id="logoImg" src="images/alabama logo.png"/></div>
      </div>
    </div>

    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>


Funn Chunn |测验
Funn Chunn |测验


进来
JavaScript

var mainHeaderJs = document.getElementById("mainHeader");
var questionBoxJs = document.getElementById("questionBox");
var inputBoxJs = document.getElementById("inputBox");
var inputBoxOuterJs = document.getElementById("inputBoxOuter");
var subTextJs = document.getElementById("subText");
var logoImgOuterJs = document.getElementById("logoImgOuter");
var playAgainOuter = document.getElementById("playAgainOuter");

var playerScore = 0;

function finalScore() {
  mainHeaderJs.innerHTML = "You Got a Score of " + playerScore + " Out of 10";
  playAgainOuter.innerHTML = "<button class='btn btn-lg btn-info mx-auto' id='playAgain' onclick='playAgain();'>Play Again</button>"
  questionBoxJs.innerHTML = "";
  inputBoxOuterJs.innerHTML = "";
}

function playAgain() {
  mainHeaderJs.innerHTML = "Funn Chunn | Quiz";
  firstQ();
  playerScore = 0;
  playAgainOuter.innerHTML = "";
  inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='firstQAnswer();'>Enter</button>";
}

function moveOnGood() {
  subTextJs.innerHTML = "Correct! Moving on to the next question";
  setTimeout(function () {
    subTextJs.innerHTML = "";
  }, 2000);
}

function moveOnBad() {
  subTextJs.innerHTML = "Moving on to the next question...";
  setTimeout(function () {
    subTextJs.innerHTML = "";
  }, 2000);
}

function firstQ() {
  setTimeout(function () {
    questionBoxJs.innerHTML = "Question 1: What is Mrs. Chunn's Favorite Team?";
  }, 2000);
}

function firstQAnswer() {
var Q1Answer = inputBoxJs.value;
Q1Answer = Q1Answer.toUpperCase();
  if (Q1Answer == "ALABAMA") {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='secondQAnswer();'>Enter</button>";
    playerScore += 1;
    moveOnGood();
    secondQ();
  } else if (Q1Answer == "CRIMSON") {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='secondQAnswer();'>Enter</button>";
    playerScore += 1;
    moveOnGood();
    secondQ();
  } else if (Q1Answer == "CRIMSON TIDE") {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='secondQAnswer();'>Enter</button>";
    playerScore += 1;
    moveOnGood();
    secondQ();
  } else {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='secondQAnswer();'>Enter</button>";
    moveOnBad();
    secondQ();
  }
}

function secondQ() {
  setTimeout(function () {
    questionBoxJs.innerHTML = "Question 2: Is Mrs. Chunn a Millenial?";
  }, 2000);
}

function secondQAnswer() {
var Q2Answer = inputBoxJs.value;
Q2Answer = Q2Answer.toUpperCase();
  if (Q2Answer == "YES") {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='thirdQAnswer();'>Enter</button>";
    playerScore += 1;
    moveOnGood();
    thirdQ();
  } else if (Q2Answer == "YEAH") {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='thirdQAnswer();'>Enter</button>";
    playerScore += 1;
    moveOnGood();
    thirdQ();
  } else if (Q2Answer == "Y") {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='thirdQAnswer();'>Enter</button>";
    playerScore += 1;
    moveOnGood();
    thirdQ();
  } else {
    inputBoxOuterJs.innerHTML = "<input id='inputBox' type='text'></br><button class='btn btn-info' id='submitBtn' onclick='secondQAnswerAlt();'>Enter</button>";
    moveOnBad();
    thirdQ();
  }
}

var mainHeaderJs=document.getElementById（“mainHeader”）；
var questionBoxJs=document.getElementById（“questionBox”）；
var inputBoxJs=document.getElementById（“inputBox”）；
var inputBoxOuterJs=document.getElementById（“inputBoxOuter”）；
var subTextJs=document.getElementById（“subText”）；
var logoImgOuterJs=document.getElementById（“logoImgOuter”）；
var playAgainOuter=document.getElementById（“playAgainOuter”）；
var playerScore=0；
函数finalScore（）{
mainHeaderJs.innerHTML=“你的分数为“+playerScore+”满分10分”；
playAgainOuter.innerHTML=“再次播放”
questionBoxJs.innerHTML=“”；
inputBoxOuterJs.innerHTML=“”；
}
函数playreach（）{
mainHeaderJs.innerHTML=“Funn Chunn | quick”；
firstQ（）；
playerScore=0；
playAgainOuter.innerHTML=“”；
inputBoxOuterJs.innerHTML=“
Enter”；
}
函数moveOnGood（）{
subTextJs.innerHTML=“正确！继续下一个问题”；
setTimeout（函数（）{
subTextJs.innerHTML=“”；
}, 2000);
}
函数moveOnBad（）{
subTextJs.innerHTML=“继续下一个问题…”；
setTimeout（函数（）{
subTextJs.innerHTML=“”；
}, 2000);
}
函数firstQ（）{
setTimeout（函数（）{
questionBoxJs.innerHTML=“问题1：Chunn夫人最喜欢的团队是什么？”；
}, 2000);
}
函数firstQAnswer（）{
var Q1Answer=inputBoxJs.value；
Q1Answer=Q1Answer.toUpperCase（）；
如果（Q1答案==“阿拉巴马州”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
moveOnGood（）；
secondQ（）；
}否则如果（Q1答案==“深红色”）{
inputBoxOuterJs.innerHTML=“
输入”；
playerScore+=1；
moveOnGood（）；
secondQ（）；
}否则如果（Q1Answer==“深红色潮汐”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
moveOnGood（）；
secondQ（）；
}否则{
inputBoxOuterJs.innerHTML=“
Enter”；
moveOnBad（）；
secondQ（）；
}
}
函数secondQ（）{
setTimeout（函数（）{
questionBoxJs.innerHTML=“问题2：Chunn夫人是千年老人吗？”；
}, 2000);
}
函数secondQAnswer（）{
var Q2Answer=inputBoxJs.value；
Q2Answer=Q2Answer.toUpperCase（）；
如果（回答=“是”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
moveOnGood（）；
thirdQ（）；
}否则，如果（Q2回答==“是”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
moveOnGood（）；
thirdQ（）；
}否则如果（Q2答案==“Y”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
moveOnGood（）；
thirdQ（）；
}否则{
inputBoxOuterJs.innerHTML=“
Enter”；
moveOnBad（）；
thirdQ（）；
}
}
这不是最好的解决方案，但它应该能起作用。只需初始化
inputBoxjs=''并在每个问题函数的开头更新
inputBoxjs

所以改变


var-inputBoxJs=document.getElementById（“inputBox”）

到


var-inputBoxJs=''

再加上这一行


inputBoxJs=document.getElementById（“inputBox”）

在您的
Q1Answer
和
Q2Answer
变量上方

完成Q2函数后，只需添加
thirdQ
函数和变量

希望这能有所帮助




Funn Chunn |测验
Funn Chunn |测验


进来


var mainHeaderJs=document.getElementById（“mainHeader”）；
var questionBoxJs=document.getElementById（“questionBox”）；
var inputBoxJs=''；
var inputBoxOuterJs=document.getElementById（“inputBoxOuter”）；
var subTextJs=document.getElementById（“subText”）；
var logoImgOuterJs=document.getElementById（“logoImgOuter”）；
var playAgainOuter=document.getElementById（“playAgainOuter”）；
var playerScore=0；
函数finalScore（）{
mainHeaderJs.innerHTML=“你的分数为“+playerScore+”满分10分”；
playAgainOuter.innerHTML=“再次播放”
questionBoxJs.innerHTML=“”；
inputBoxOuterJs.innerHTML=“”；
}
函数playreach（）{
mainHeaderJs.innerHTML=“Funn Chunn | quick”；
firstQ（）；
playerScore=0；
playAgainOuter.innerHTML=“”；
inputBoxOuterJs.innerHTML=“
Enter”；
}
函数moveOnGood（）{
subTextJs.innerHTML=“正确！继续下一个问题”；
setTimeout（函数（）{
subTextJs.innerHTML=“”；
}, 2000);
}
函数moveOnBad（）{
subTextJs.innerHTML=“继续下一个问题…”；
setTimeout（函数（）{
subTextJs.innerHTML=“”；
}, 2000);
}
函数firstQ（）{
setTimeout（函数（）{
questionBoxJs.innerHTML=“问题1：Chunn夫人最喜欢的团队是什么？”；
}, 2000);
}
函数firstQAnswer（）{
inputBoxJs=document.getElementById（“inputBox”）；
var q1应答=inputBoxJs.value；
Q1Answer=Q1Answer.toUpperCase（）；
如果（Q1答案==“阿拉巴马州”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
moveOnGood（）；
secondQ（）；
}否则如果（Q1答案==“深红色”）{
inputBoxOuterJs.innerHTML=“
Enter”；
playerScore+=1；
移动