Question

我正在完成一项家庭作业，我们必须在JavaScript中制作一个简单的计算器。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Calculator</title>
    <style>
        div{
            display: inline-block;

        }
        #first{
            float: left;
            position: relative;
            top: 65px;
        }
        #fieldset{
            width: 70px;
        {
        #second{

        }   
        #compute{
            position: relative;
        {
    </style>

    <script>
        window.onload = function(){
            alert('Welcome to the JavaScript Calculator!');
        };

        function compute() {
            var firstValue = document.getElementById("first").value;
            var secondValue = document.getElementById("second").value;
            var output;
                if (document.getElementById("plus").checked === true)
                {
                    output = firstValue + secondValue;
                }
                else if (document.getElementById("minus").checked === true)
                {
                    output = firstValue - secondValue;
                }
                else if (document.getElementById("times").checked === true)
                {
                    output = firstValue*secondValue;
                }
                else if (document.getElementById("divide").checked === true)
                {
                    output = firstValue/secondValue;
                }
            return output;
        }
    </script>
</head>

<body>
    <header>
        <h1>Simple Calculator</h1>
    </header>

    <form>
        <div id="first">
            First value: <input type="text" name="FirstValue" />
        </div>
        <div id="fieldset">
        <fieldset id=radio>
                <label for="plus">+</label>
                <input type="radio" id="plus" name="type" value="plus" checked/><br>
                <label for="minus">-</label>
                <input type="radio" id="minus" name="type" value="minus"/><br>
                <label for="times">x</label> 
                <input type="radio" id="times" name="type" value="times"/><br>
                <label for="divide">&divide;</label>
                <input type="radio" id="divide" name="type" value="divide"/>
        </fieldset>
        </div>
        <div id="second">
            Second value: <input type="text" name="SecondValue" />
        </div>
        <div id="compute">
            <button type="button" onclick = "compute();">Compute</button>
        </div>
        Result:
    </form>
</body>
</html>

计算器无法运行，我认为这与我如何设置它返回有关。返回输出是否将其打印到屏幕上？如果没有，我该如何实现这一目标？请帮忙！感谢。

Answer 1

你需要做一些事情。

您需要将值插入文本框，而不是div的值。
您还需要使用parseInt将字符串中的输入转换为数字。
返回输出不会在屏幕上显示。您需要使用innerHTML将其作为答案添加到页面，而不是返回输出。

运行下面的代码段以查看其实际效果。

＆＃13;

<html>
<head>
    <meta charset="utf-8" />
    <title>Calculator</title>
    <style>
        div{
            display: inline-block;

        }
        #first{
            float: left;
            position: relative;
            top: 65px;
        }
        #fieldset{
            width: 70px;
        {
        #second{

        }   
        #compute{
            position: relative;
        }
    </style>

    <script>
        window.onload = function(){
            alert('Welcome to the JavaScript Calculator!');
        };

        function compute() {
            var firstValue = parseInt(document.getElementById("firstValue").value);

            var secondValue = parseInt(document.getElementById("secondValue").value);
            var output;
                if (document.getElementById("plus").checked === true)
                {
                    output = firstValue + secondValue;
                }
                else if (document.getElementById("minus").checked === true)
                {
                    output = firstValue - secondValue;
                }
                else if (document.getElementById("times").checked === true)
                {
                    output = firstValue*secondValue;
                }
                else if (document.getElementById("divide").checked === true)
                {
                    output = firstValue/secondValue;
                }

                document.getElementById("result").innerHTML = "Result: " + output;
                return output;
        }
    </script>
</head>

<body>
    <header>
        <h1>Simple Calculator</h1>
    </header>

    <form>
        <div id="first">
            First value: <input id="firstValue" type="text" name="FirstValue" />
        </div>
        <div id="fieldset">
        <fieldset id=radio>
                <label for="plus">+</label>
                <input type="radio" id="plus" name="type" value="plus" checked/><br>
                <label for="minus">-</label>
                <input type="radio" id="minus" name="type" value="minus"/><br>
                <label for="times">x</label> 
                <input type="radio" id="times" name="type" value="times"/><br>
                <label for="divide">&divide;</label>
                <input type="radio" id="divide" name="type" value="divide"/>
        </fieldset>
        </div>
        <div id="second">
            Second value: <input id="secondValue" type="text" name="SecondValue" />
        </div>
        <div id="compute">
            <button type="button" onclick="compute();">Compute</button>
        </div>
        <div id="result">
        Result:
        </div>
    </form>
</body>
</html>

＆＃13;

家庭作业帮助：在JavaScript中返回一个值？

1 个答案: