以JS提示带var - 我怎样才能通过HTML表单？

我已经学习了几个星期的HTML/CSS/JavaScript，现在我正在练习一个小型项目，其中包括让人们回答数学问题并验证他们的答案。以JS提示带var - 我怎样才能通过HTML表单？

我现在的进度可以在http://dany.faceflow.com

可以看出，我知道我可能没有使用最好的策略来开发这个迷你游戏，所以任何的建议是对有用的。然而现在，问题在于我通过JS提示接受了一个变量的用户回答，并且我想通过一个HTML表单（不那么讨厌）来实现。

在我的源代码，你可以看到在函数中这一行：

var userInput = prompt(numb1 + symbol + numb2);

然后，还在相同的功能，我有一个if/else结构给用户的答案与正确答案进行比较。代码的工作原理，我只是不知道如何使提示基于HTML的代替。我试过一个带有ID的html表单，并且在JS中使用getElementById，document.write和其他一些东西，但是我从来没有为它工作过。

（这里是所有的JS）

var number1 = function() { 
    var numb1 = Math.floor(Math.random() * 41) + 10; 
    return numb1; 
} 

var number2 = function() { 
    var numb2 = Math.floor(Math.random() * 41) + 10; 
    return numb2; 
} 


var userAnswer = function() { 
    var numb1 = number1(); 
    var numb2 = number2(); 

    var randomSymbol = Math.random(); 

    if (randomSymbol > 0.5) { 
     var symbol = "+"; 
    } else { 
     var symbol = "-"; 
    } 

    // add the math question in the html bubble 
    document.getElementById('bubble').innerHTML = numb1 + symbol + numb2; 

    // Prompts the user to give an answer. Change this to HTML. 
    var userInput = prompt(numb1 + symbol + numb2); 

    //var userInput = document.getElementById('tw').value; 


    if (symbol == "+" && userInput == (numb1 + numb2)) { 
     document.getElementById('feedback').innerHTML = "Congratulations!"; 
    } else if (symbol == "+" && userInput !== (numb1 + numb2)) { 
     document.getElementById('feedback').innerHTML = "Wrong!"; 
    } else if (symbol == "-" && userInput == (numb1 - numb2)) { 
     document.getElementById('feedback').innerHTML = "Congratulations!"; 
    } else if (symbol == "-" && userInput !== (numb1 - numb2)) { 
     document.getElementById('feedback').innerHTML = "Wrong!"; 
    } else { 
     alert("Something wrong happened. Try again."); 
    } 

    return userInput; 
}

（的HTML）

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> 
     <script src="js/script.js"></script> 
     <title>Improve Your Math Skills!</title> 
    </head> 

    <body> 
     <center> 

     <button onclick="userAnswer()">PLAY NOW!</button> 

     <div id="bubble"></div> 

     <div id="feedback"></div> 


     <!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> --> 
     </center> 
    </body>  
</html>

谢谢

来源

2013-04-06 Dan P.

您可以使用input标签，而不是提示。像Dinesh的回答一样改变HTML;

<div id="bubble"></div> 
<div id="inp" style="display: none;"> 
    <input type="text" id="ans"></input>&nbsp;<button id="subBtn">Submit</button> 
</div> 
<div id="feedback"></div>

现在，对于JavaScript，有几件事情需要考虑。首先，你有

var number1 = function() { 
    var numb1 = Math.floor(Math.random() * 41) + 10; 
    return numb1; 
} 

var number2 = function() { 
    var numb2 = Math.floor(Math.random() * 41) + 10; 
    return numb2; 
}

这两个函数完成相同的事情;你不需要两个单独的函数来获得两个单独的随机数。所以，只有一个功能就足够了。其次，现在我们有两个功能。第一，我们有两个功能。 userAnswer在'立即播放！'时发布新问题被点击并且例如evalAnswer来评估当单击“提交”时在输入栏中写入的答案。

在userAnswer中，您生成两个新的随机数并确定将对它们进行哪些操作。此时，您可以简单地自己评估答案并将其存储在全局变量中。当您评估答案时，这使事情变得更加简单，您只需做一个简单的比较。

除此之外，您更新innerHTML为bubble并显示divinp。

在evalAnswer中，您从ans获得值，并将其与当前答案的先前计算值进行比较，然后相应地更新feedback.innerHTML。

这是代码;

//variable to maintain the current answer 
var curAns = 0; 

//Here, I get all the DOMElements I will use 
var playBtn = document.getElementById('playBtn'); 

var bubble = document.getElementById('bubble'); 

var inp = document.getElementById('inp'); 
var ans = document.getElementById('ans'); 
var subBtn = document.getElementById('subBtn'); 

var feedback = document.getElementById('feedback'); 

//I add the event listeners 
//This is equivalent to using 'onclick' 
//in the HTML, and doing it this way is only 
//my personal preference 
playBtn.addEventListener('click', function() {userAnswer();}, false); 
subBtn.addEventListener('click', function() {evalAnswer();}, false); 

//Function to get random number 
var number = function() { 
    return Math.floor(Math.random() * 41) + 10; 
}; 

//This function will be executed when 'Play Now!' is clicked. 
var userAnswer = function() { 
    //Get two separate random numbers in 
    //numb1 and numb2 
    var numb1 = number(); 
    var numb2 = number(); 
    var symbol = ''; 

    var randomSymbol = Math.random(); 

    //Determine the operation to be used 
    //and compute the corresponding correct answer for the current 
    //question 
    if (randomSymbol > 0.5) { 
     symbol = "+"; 
     curAns = numb1+numb2; 
    } else { 
     symbol = "-"; 
     curAns = numb1-numb2; 
    } 

    //Add math question to bubble 
    bubble.innerHTML = 'What is ' + numb1 + ' ' + symbol + ' ' + numb2 + '?'; 
    feedback.innerHTML = ''; 

    //Make inp div visible 
    inp.style.display = 'block'; 
    //Reset input value to '' 
    ans.value = ''; 
}; 

//This function will be executed when 'Submit' is clicked 
var evalAnswer = function() { 
    //Simply compare input value with computed 
    //answer and update feedback 
    if(parseInt(ans.value) !== curAns) { 
     feedback.innerHTML = 'Wrong answer, try again!'; 
    } 
    else { 
     feedback.innerHTML = 'You got it right, congratulations!'; 
    } 
};

Here's a working example。

希望有帮助！

来源

2013-04-06 10:28:53 Rikonator

非常感谢。作为一个初学者，这正是那种能够让我快速改进的东西。我可以发现我犯的很多错误，现在我可以对未来进行纠正。我会继续构建游戏;）再次感谢，非常感谢！ – 2013-04-06 10:57:20

我从你的问题不解的是，你需要相同功能的HTML本身而不是由JS在提示框中驱动，如果是这样，下面的代码将有助于：

HTML ADITION：

<div id="bubble"></div> 
<div id="check_ans_div" style="display:none;"> 
    <input type="text" id="txt_answer" /> 
    <input type="submit" value="Check Answer" onclick="checkanswer()" /> 
</div> 
<div id="feedback"></div>

JS变化：

var number1 = function() { 
     var numbx = Math.floor(Math.random() * 41) + 10; 
     return numbx; 
    }   
    var number2 = function() { 
     var numby = Math.floor(Math.random() * 41) + 10; 
     return numby; 
    } 
    var numb1=0; var numb2=0; 
    var userAnswer = function() { 
     numb1 = number1(); 
     numb2 = number2(); 

     var randomSymbol = Math.random(); 

     if (randomSymbol > 0.5) { 
      var symbol = "+"; 
     } else { 
      var symbol = "-"; 
     } 

     // add the math question in the html bubble 
     document.getElementById('bubble').innerHTML = numb1 + symbol + numb2; 
     if(document.getElementById('check_ans_div').style.display=='none') 
      document.getElementById('check_ans_div').style.display='block'; 
     document.getElementById('txt_answer').value=''; 

    } 

function checkanswer(){ 

     var userInput= document.getElementById('txt_answer').value; 
     if (symbol == "+" && userInput == (numb1 + numb2)) { 
      document.getElementById('feedback').innerHTML = "Congratulations!"; 
     } else if (symbol == "+" && userInput !== (numb1 + numb2)) { 
      document.getElementById('feedback').innerHTML = "Wrong!"; 
     } else if (symbol == "-" && userInput == (numb1 - numb2)) { 
      document.getElementById('feedback').innerHTML = "Congratulations!"; 
     } else if (symbol == "-" && userInput !== (numb1 - numb2)) { 
      document.getElementById('feedback').innerHTML = "Wrong!"; 
     } else { 
      alert("Something wrong happened. Try again."); 
     } 

}

来源

2013-04-06 09:24:41

非常感谢您花时间帮助我。在尝试你的代码时，我遇到了关于“symbol”和“numb1”“numb2”没有被定义的问题。我想我可能不得不考虑一个计划并重新构建该程序并应用我从您那里学到的东西（与JS一起工作的HTML表单） – 2013-04-06 09:59:52

啊！你是对的，需要在这些函数之外声明numb1和numb2，更新我的代码，现在应该工作。它很好地重构代码，因为你正在学习，重做它会是个好主意:) – 2013-04-06 10:08:16

以JS提示带var - 我怎样才能通过HTML表单？

回答

相关问题