javascript - 在 JS 提示符下获取 var - 我怎样才能通过 HTML 表单实现它？

我已经学习 HTML/CSS/JavaScript 几个星期了，目前我正在练习一个小型元素，该元素包括让人们回答数学问题并验证他们的答案。

我目前的进度可以在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>

谢谢

最佳答案

您可以使用 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;
}

这两个函数做的事情完全一样；您不需要两个单独的函数来获得两个单独的随机数。因此，只有一个功能就足够了。

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

其次，现在我们有两个功能。 userAnswer 在“开始游戏!”时发布新问题被点击，例如，evalAnswer 来评估点击“提交”时写在输入字段中的答案。

在 userAnswer 中，您生成两个新的随机数并确定将对它们执行哪种操作。此时，您可以简单地自己评估答案并将其存储在全局变量中。这让你在评估答案时更容易，你只需要做一个简单的比较。

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

在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 .

希望对您有所帮助!

关于javascript - 在 JS 提示符下获取 var - 我怎样才能通过 HTML 表单实现它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15848832/

javascript - 在 JS 提示符下获取 var - 我怎样才能通过 HTML 表单实现它？

上一篇：jQuery slider 随机滑动

下一篇：HTML 无法正确呈现